Use correct local names for fonts (#10594)

app/javascript/styles/fonts/montserrat.scss

@@ -10,7 +10,7 @@
 
 @font-face {
   font-family: 'mastodon-font-display';
-  src: local('Montserrat'),
+  src: local('Montserrat Medium'),
     url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;

app/javascript/styles/fonts/roboto.scss

 @font-face {
   font-family: 'mastodon-font-sans-serif';
-  src: local('Roboto'),
+  src: local('Roboto Italic'),
     url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
     url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'),
     url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
@@ -11,7 +11,7 @@
 
 @font-face {
   font-family: 'mastodon-font-sans-serif';
-  src: local('Roboto'),
+  src: local('Roboto Bold'),
     url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
     url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'),
     url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
@@ -22,7 +22,7 @@
 
 @font-face {
   font-family: 'mastodon-font-sans-serif';
-  src: local('Roboto'),
+  src: local('Roboto Medium'),
     url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
     url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'),
     url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),