@ font-face i.e. Problems

Question

I tried several different ways to include the correct fonts in CSS. I know that I need an eot version for the font to work in IE, but I can’t recognize it. I used the squirrel font to convert the fonts, and I put the .eot and .otf file in a folder called "fonts". Here is my CSS:

@font-face { font-family: BebasNeue; src: url('fonts/BebasNeue.eot'); src: url('fonts/BebasNeue.otf') format("opentype"); } 

UPDATE Thus, from the suggestions below, they brought me to this site: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

I used CSS:

 @font-face { font-family: 'BebasNeue'; src: url('fonts/bebasneue.eot'); /* IE9 Compat Modes */ src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/bebasneue.woff') format('woff'), /* Modern Browsers */ url('fonts/bebasneue.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/bebasneue.svg#svgBebasNeue') format('svg'); /* Legacy iOS */ } 

Then I went back to Font Squirrel, downloaded the kit again and renamed everything correctly, and it worked.

Answer 1

You need to set the Access-Control-Allow-Origin HTTP header for this
See here:
IE9 blocks cross-original web font loading

---

It works?

 @font-face { font-family: 'BebasNeue'; src: url('fonts/BebasNeue.eot'); src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'), url('fonts/BebasNeue.otf') format("opentype"); } 

---

In fontsquirrel they do it this way
http://www.fontsquirrel.com/fontfacedemo/bebas-neue

Download the @ font-face kit from there

 @font-face { font-family: 'BebasNeueRegular'; src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot'); src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.woff') format('woff'), url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.ttf') format('truetype'), url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } 

Answer 2

This code should make it work. if not, check the font url (if one exists).

 @font-face { font-family: 'BebasNeue'; src: url('fonts/BebasNeue.eot'); src: local('BebasNeue'), local('BebasNeue'), url('fonts/BebasNeue.eot') format('embedded-opentype'); } 

Answer 3

Sometimes, when you convert a font type (other than TTF), the font does not work. Try using a TTF font and convert it.

I have not experienced this with TTF fonts .. but I did it with other types of fonts.

Answer 4

This is the css that I have for Bebas on our site (not Neue), but pay attention to the URL:

 @font-face { font-family: 'Bebas'; src: url('../fonts/bebas-webfont.eot'); src: url('../fonts/bebas-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/bebas-webfont.ttf') format('truetype'), url('../fonts/bebas-webfont.svg#bebasregular') format('svg'); font-weight: normal; font-style: normal; }