0

I have the code below in my css file. The font renders as desired in all browsers on Mac OS, but will not render on Windows. Now before you say it's not Windows compatible, I have made a dummy page on the Windows machine, and it runs the '.woff' file fine in Chrome (not IE). Hovever IE can render this page. I feel like I'm missing something important in the @font-face. Here is my code: 

@font-face { font-family: Skia; 
        src:url('./webfonts/skia.ttf') format('truetype'),
            url('./webfonts/skia.eot') format('embedded-opentype'),
            url('./webfonts/skia.woff') format('woff'),
            url('./webfonts/skia.svg');
        font-weight: lighter;
        font-style: normal;
    }

the 'webfonts' folder is in the same directory as the 'styles' folder where the css files are located.

>styles
    >'style.css'
>webfonts
    >'skia.ttf / woff / eot / svg'

In the <body> tag, I'm including font-family:Skia, sans-serif;

Adam M Thompson
  • 438
  • 5
  • 21
  • 1
    Please post a real URL. The relative URLs can refer to just bout anything. And please specify the source of the font and the tools used to generate the different font files. – Jukka K. Korpela Mar 22 '13 at 20:27

1 Answers1

-1

It looks like you're on the right track

@font-face {
    font-family: "sansation";
        src: url("fonts/sansation_light.eot");
        src: url("fonts/sansation_light.eot?#iefix") format("eot"),
             url("fonts/sansation_light.ttf") format("truetype"), 
             url("fonts/sansation_light.woff") format("woff"), 
             url("fonts/sansation_light.svg") format("svg");
    font-weight: 200;
    font-style: normal;
}

You do want to include the format, ie fixes for older versions of ie, woff for opera, and svg for mobile devices. This format usually never does me wrong!

Also, you can safely omit ./ since it relates to the current directory. You also should to include the font-weight and font-style. Checkout how google webfonts does this.

djthoms
  • 3,026
  • 2
  • 31
  • 56