3

I have a page which uses the font Avenir. It works in all browsers (Firefox, Opera, Chrome) – but DOES not display this FONT in Internet Explorer 11. I am using this code to attach the fonts (it seems to care for Internet Explorer):

<style type="text/css">
@font-face { font-family:"Avenir LT Std 35 Light"; src:url("./Fonts/Avenir LT Std 35 Light.eot"); } /* for IE */
@font-face { font-family:"Avenir LT Std 35 Light"; src:url("./Fonts/Avenir LT Std 35 Light.woff") format("woff"); } /* Works only in WOFF-enabled browsers */
.ft0{font-family:"Avenir LT Std 35 Light";font-size:16.67px;color:#BFBFBF}
.ft1{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#BFBFBF}
.ft2{font-family:"Avenir LT Std 35 Light";font-size:12.50px;color:#BFBFBF}
.ft3{font-family:"Avenir LT Std 35 Light";font-size:12.50px;color:#292C31}
.ft4{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#FE4A5E}
.ft5{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#000000}
.ft6{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#00B0F0}
.ft7{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#262626}
.ft8{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#0D0D0D}

</style>

Not sure why it is not working….Can you please take a look?

Dave

Johannes
  • 64,305
  • 18
  • 73
  • 130
Gabriel
  • 83
  • 3
  • 8

1 Answers1

0

Try it like this:

@font-face { 
  font-family:"Avenir LT Std 35 Light"; 
  src: url("./Fonts/Avenir LT Std 35 Light.eot");
  src: url("./Fonts/Avenir LT Std 35 Light.eot?#iefix") format("embedded-opentype"),  
       url("./Fonts/Avenir LT Std 35 Light.woff") format("woff"); 
}

BTW: All those comma sizes will be rounded to the next full pixel - maybe IE also has problems with that (? - not sure)

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thank you for your reply....for some reason this code works in local file and does not when I upload it to the website....should I send the Avenir fonts to you to take a look? – Gabriel Mar 03 '17 at 05:41
  • https://www.dropbox.com/s/o158s9c5z7a56ai/Avenir%20LT%20Std%2035%20Light.eot?dl=0 – Gabriel Mar 03 '17 at 05:44
  • https://www.dropbox.com/s/e8vtp1b76dab8uq/Avenir%20LT%20Std%2035%20Light.woff?dl=0 – Gabriel Mar 03 '17 at 05:44
  • please attach these to any file and see if they work on your side – Gabriel Mar 03 '17 at 05:50
  • maybe you should try to rename the font file/s, replace all those spaces with underscores or similar, and then also change that link accordingly. – Johannes Mar 03 '17 at 10:05
  • thank you for your kind reply....I ill try this - I need to rename the file itself right ? It can be anything for that matter - eg. just Avenir.woff right? the font name in eh style will stay the same - "Avenir LT Std 35 Light"? – Gabriel Mar 03 '17 at 11:33
  • the only important thing is that the filename and the name in your link are identical, and that the font-family name in the CSS rules is the same as in your @font-face rule. But especially if you use other versions of the same font, I still would use something like "Avenir_LT_Std_35_Light" – Johannes Mar 03 '17 at 11:41
  • renaming the fonts to just Avenir.woff did not work(( - IE sees the font in local view but does not when it loads the html from website.... – Gabriel Mar 03 '17 at 11:57
  • `code` `code` – Gabriel Mar 03 '17 at 12:25
  • maybe there is a still a solution to this - IE 11 has problem with WOFF? – Gabriel Mar 03 '17 at 16:16
  • thank you - maybe you can recommend a place where this can be answered - like woff forum? or ms ie forum? – Gabriel Mar 03 '17 at 17:43