How to make Google Fonts work in IE

Question

I ve been developing a site that uses the Google Fonts API  It s great  and supposedly has been tested in IE  but when testing in IE 8 the fonts simply don t get styled   I included the font  as Google instructs  thus    lt link href  http   fonts googleapis com css family Josefin Sans Std Light     rel  stylesheet  type  text css    gt    and added its name to the front of a font family in CSS thus    body   font-family   Josefin Sans Std Light    Times New Roman   Times  serif  font-size  16px  overflow-y  scroll  overflow-x  hidden  color   05121F       Works like a charm in Chrome  Firefox  Safari  No dice in IE 8  Anybody know why

User · Answer

You can try fontsforweb com where fonts are working for all browsers  because they are provided in TTF  WOFF and EOT formats together with CSS code ready to be pasted on your page i e    font-face       font-family   gothambold1       src  url  http   fontsforweb com public fonts 5903 gothambold1 eot        src  local  Gotham-Bold    url  http   fontsforweb com public fonts 5903 gothambold1 woff   format  woff    url  http   fontsforweb com public fonts 5903 gothambold1 ttf   format  truetype       fontsforweb fontid 5903       font-family   gothambold1       or you can download them zipped in a package with CSS file attached  then just add class to any element to apply that font i e    lt h2 class  fontsforweb fontid 5903  gt This will be written with Gotham Bold font and will work in all browsers lt  h2 gt    See it working  http   jsfiddle net SD4MP

User · Answer

Google Fonts uses Web Open Font Format  WOFF   which is good  because it s the recommended font format by the W3C   IE versions older than IE9 don t support Web Open Font Format  WOFF  because it didn t exist back then  To support  lt  IE9  you need to serve your font in Embedded Open Type  EOT   To do this you will need to write your own  font-face css tag instead of using the embed script from Google  Also you need to convert the original WOFF file to EOT   You can convert your WOFF to EOT over here by first converting it to TTF and then to EOT  http   convertfonts com   Then you can serve the EOT font like this    font-face       font-family   MyFont       src  url  myfont eot        Now it works in  lt  IE9  However  modern browsers don t support EOT anymore  so now your fonts won t work in modern browsers  So you need to specify them both  The src property supports this by comma seperating the font urls and specefying the type   src  url  myfont woff   format  woff         url  myfont eot   format  embedded-opentype      However   lt  IE9 doesn t understand this  it just graps the text between the first quote and the last quote  so it will actually get   myfont woff   format  woff    url  myfont eot   format  embedded-opentype   as the URL to the font  We can fix this by first specifying a src with only one url which is the EOT format  then specifying a second src property that s meant for the modern browsers and  lt  IE9 will not understand  Because  lt  IE9 will not understand it it will ignore the tag so the EOT will still be working  The modern browsers will use the last specified font they support  so probably WOFF   src  url  myfont eot    src  url  myfont woff   format  woff      So only because in the second src property you specify the format  woff     lt  IE9 won t understand it  or actually it just can t find the font at the url myfont woff   format  woff  and will keep using the first specified one  eot    So now you got your Google Webfonts working for  lt  IE9 and modern browsers   For more information about different font type and browser support  read this perfect article by Alex Tatiyants  http   tatiyants com how-to-get-ie8-to-support-html5-tags-and-web-fonts

User · Answer

For what its worth  I couldn t get it working on IE7 8 9 and the multiple declaration option didn t make any difference   The fix for me was as a result of the instructions on the Technical Considerations Page where it highlights        For best display in IE  make the stylesheet  link  tag the first   element in the HTML  head  section    Works across IE7 8 9 for me now

User · Answer

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

User · Answer

It s all about trying all those answers  for me  nothing works except the next solution  Google font suggested    import  https   fonts googleapis com css family Assistant     But  I m using here foreign language fonts  and it didn t work on IE11 only  I found out this solution that worked    import  https   fonts googleapis com css family Assistant amp subset hebrew     Hope that save someone precious time

User · Answer

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 gotten it to work in IE7-IE8 is to only have one Google Web Font request  And only have one font style in the href of the link tag   So normally you would have this  declaring multiple font styles in the same request    lt link rel  stylesheet  href  http   fonts googleapis com css family Open Sans 400 600 300 800 700 400italic    gt     But in IE7-IE8 add a IE conditional and specify each Google font style separately and it will work    lt  -- if lte IE 8  gt       lt link rel  stylesheet  href  http   fonts googleapis com css family Open Sans 400    gt        lt link rel  stylesheet  href  http   fonts googleapis com css family Open Sans 700    gt        lt link rel  stylesheet  href  http   fonts googleapis com css family Open Sans 800    gt   lt   endif -- gt    Hope this can help others

User · Answer

Try this type of link   it will run in also IE   hope this helps      lt link href    fonts googleapis com css family Josefin Sans 300 400 600 700 300italic  rel  stylesheet  type  text css  gt

User · Answer

While Yi Jiang s solution may work  I don t believe abandoning the Google Web Font API is the right answer here  We serve a local jQuery file when it s not properly loaded from the CDN  right    lt script src    ajax googleapis com ajax libs jquery 1 9 0 jquery min js  gt  lt  script gt   lt script gt window jQuery    document write   lt script src   js jquery-1 9 0 min js  gt  lt   script gt    lt  script gt    So why wouldn t we do the same for fonts  specifically for  lt  IE9    lt link href  http   fonts googleapis com css family Cardo 400 400italic 700  rel  stylesheet  type  text css  gt   lt  -- if lt IE 9  gt  lt link href   css fonts css  rel  stylesheet  type  text css  gt  lt   endif -- gt    Here s my process when using custom fonts    Download the font s ZIP folder from Google  and use Font Squirrel s  font-face Generator to create the local web font  Create a fonts css file that calls the newly created  locally hosted font files  only linking to the file if  lt  IE9  as shown above   NOTE  The  font-face Generator creates this file for you    font-face     font-family   cardoitalic     src  url  cardo-italic-webfont eot      src  url  cardo-italic-webfont eot  iefix   format  embedded-opentype        url  cardo-italic-webfont woff   format  woff        url  cardo-italic-webfont ttf   format  truetype        url  cardo-italic-webfont svg cardoitalic   format  svg      font-weight  normal    font-style  normal     font-face     font-family   cardobold     src  url  cardo-bold-webfont eot      src  url  cardo-bold-webfont eot  iefix   format  embedded-opentype        url  cardo-bold-webfont woff   format  woff        url  cardo-bold-webfont ttf   format  truetype        url  cardo-bold-webfont svg cardobold   format  svg      font-weight  normal    font-style  normal     font-face     font-family   cardoregular     src  url  cardo-regular-webfont eot      src  url  cardo-regular-webfont eot  iefix   format  embedded-opentype         url  cardo-regular-webfont woff   format  woff         url  cardo-regular-webfont ttf   format  truetype         url  cardo-regular-webfont svg cardoregular   format  svg      font-weight  normal    font-style  normal     Using IE conditional classes in your main stylesheet to avoide faux weights and styles  your font styles might look like this   h1    font-size 3 25em    font-weight normal    font-style italic    font-family  Cardo   cardoitalic  serif    line-height 1 25em    h2    font-size 2 75em    font-weight 700    font-family  Cardo   cardobold  serif    line-height 1 25em    strong  b    font-family  Cardo   cardobold  serif    font-weight 700     lt-ie9 h1    font-style normal     lt-ie9 h2    font-weight normal     lt-ie9 strong   lt-ie9 b    font-weight normal       Sure  it s a little extra work  but haven t we come to expect this from IE  Besides  it becomes second-nature after awhile

User · Answer

I tried all the options from above and they didn t work   Then I located the google font  Over the Rainbow  in my folder  new  and used IE conditional below and it worked perfect    lt  -- if IE  gt   lt style type  text css  gt       font-face       font-family   Over the Rainbow       src  url     new over ttf        src  local  Over the Rainbow    url     new over ttf           lt  style gt   lt   endif -- gt    I hope it will help

User · Answer

I had the same problem with you  I found a solution using a Adobe Web Fonts code  work perfect in Internet Explorer  Chrome  Firefox and Safari   More info in this page  http   html adobe com edge webfonts

User · Answer

After my investigation  I came up to this solution     writing the below line into the top of my style css file  import url  https   fonts googleapis com css family Assistant 200 300 400 600 700 800 amp subset hebrew      MUST OBSERVE  We must need to write the font-weight correctly of this font  For example  font-weight 900  will not work as we have not included 900 like 200 300 400 600 700 800 into the URL address while importing from Google with the above link  We can add or include 900 to the above URL  but that will work only if the above Google Font has this option while embedding

[css] How to make Google Fonts work in IE?

Examples related to css

Examples related to internet-explorer

Examples related to webfonts

Examples related to google-webfonts