You should wrap each option tag in an optgroup tag and then style that as: <select> <optgroup style=”font-family:arial”> <option>Arial</option> </optgroup> <optgroup style=”font-family:verdana”> <option>veranda</option> </optgroup> <optgroup style=”font-family:other”> <option>other</option> </optgroup> </select>
Looks like IE8-IE7 can’t understand multiple Google Web Font styles through the same file request using the link tags href. These two links helped me figure this out: See this open Google issue, and look at the comments. Also see this StackOverlow Answer Google Web Fonts don’t work in IE8 The only way I have … Read more
In the Font Squirrel Expert options, make sure to set the ‘TrueType Hinting’ option to ‘Keep Existing’. Either of the other options will cause the TrueType instructions (hints) to be modified, which will in turn affect the rendering of the font. Alternatively, if you’re happy with the rendering of the font directly from GWF, you … Read more
For 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.. and if you have a build process which “flattens” the @import’s, then you create another problem with web fonts: … Read more
Status of the issue, June 2014: Fixed with Chrome 37 Finally, the Chrome team will release a fix for this issue with Chrome 37 which will be released to public in July 2014. See example comparison of current stable Chrome 35 and latest Chrome 37 (early development preview) here: Status of the issue, December 2013 … Read more
Apparently it’s a known Chrome bug. There’s a css-only workaround that should solve the problem: body { -webkit-animation-delay: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-duration: 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } @-webkit-keyframes fontfix { from { opacity: 1; } to { opacity: 1; } } It seems like Chrome just needs to be told to repaint the text
Use the @import method: @import url(‘https://fonts.googleapis.com/css?family=Open+Sans&display=swap’); Obviously, “Open Sans” (Open+Sans) is the font that is imported. So replace it with yours. If the font’s name has multiple words, URL-encode it by adding a + sign between each word, as I did. Make sure to place the @import at the very top of your CSS, before … Read more