How to make Google Fonts work in IE?
The method, as indicated by their technical considerations page, is correct - so you're definitely not doing anything wrong. However, this bug report on Google Code indicate that there is a problem with the fonts Google produced for this, specifically the IE version. This only seems to affect only some fonts, but it's a real bummmer.
The answers on the thread indicate that the problem lies with the files Google's serving up, so there's nothing you can do about it. The author suggest getting the fonts from alternative locations, like FontSquirrel, and serving it locally instead, in which case you might also be interested in sites like the League of Movable Type.
N.B. As of Oct 2010 the issue is reported as fixed and closed on the Google Code bug report.
How to make this Google Font work on Internet Explorer 11
Use:
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
To call it inside your stylesheet and:
font-family: 'Montserrat', sans-serif;
To make something that font..
From google fonts: "Note: For best display in IE, make the stylesheet tag the first element in the HTML section. In IE, if the link is placed after tags, the entire page will block and not display anything until the font is loaded."
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
If that does not work, try this: https://developers.google.com/fonts/docs/webfont_loader#Example
This will make every browser "behave like Firefox".
Google Fonts not working in Internet Explorer (IE) 11
Using the Web Font Loader javascript instead of the default method of adding fonts works in IE11 for me. https://developers.google.com/fonts/docs/webfont_loader.
It also had the advantage of having default font text showing on slow connections until font downloads, at which point it will switch to google font. Otherwise you get no text at all for tens of seconds.
Important note: You should choose your fall-back fonts to those with similar size / kerning / leading etc to minimise screen re-draw and content jumping issues that affect UX.
Related Topics
Should I Use Single or Double Colon Notation For Pseudo-Elements
@Font-Face Eot Not Loading Over Https
Difference Between Px, Em and Ex
Transition Background-Color Via Slide Animation
Bootstrap: How to Stack Divs of Different Heights
How to Transition Width of Content With Width: Auto
Ie Display: Table-Cell Child Ignores Height: 100%
Vertical-Align Aligns Everything Else Except Self
Css Skew Element and Get Inner Rounded Border Top
Why the CSS Calc() Function Is Not Working
Meaning of Numbers in "Col-Md-4"," Col-Xs-1", "Col-Lg-2" in Bootstrap
Downloading a Google Font and Setting Up an Offline Site That Uses It
Z-Index Does Not Work in Internet Explorer with PDF in Iframe
Bootstrap 3 - Desktop View on a Mobile Device
Set Google Maps Container Div Width and Height 100%
How to Target Elements with an Attribute That Has Any Value in CSS