Fonts not rendering uniformly in browsers

Question

I am trying to use custom fonts on my website and in the css I have the following code:

@font-face {
    font-family: \'Sketch\';
    src: url(\'../fonts/Ske         


        

Answer 1

Edward said it all. Chrome used to drive me insane for the way it displayed certain fonts.

If you have the font file you can use font squirrel to generate the code as well as all font files that you need for all browsers.

Answer 2

All the main browsers have slightly different font rendering engines / techniques and they have different quality of rendering output. So your fonts are unlikely to be 'pixel perfect' between the various browsers and some quality differences will appear. Which one ends up looking the best depends on the font. I have a glyph font that looks great on Chrome and IE but looks a little washed out in Firefox...

Anyway, there is a little hack that you helps you to get fonts to work on IE, see the second src line. This is needed because whilst adding extra font formats ensures support for every browser, unfortunately it causes problems in versions of IE before IE9. Those older browsers see everything between the first url(' and the last ') as a single URL request, so will fail to load the font. This hack tricks the browser into thinking that the rest of the src property are arguments of that query string, so it goes looking for the correct URL and loads the font:

@font-face {
    font-family: 'Sketch';
    src: url('../fonts/SketchRockwell.eot');
    src: url('../fonts/SketchRockwell.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SketchRockwell.woff') format('woff'),
         url('../fonts/SketchRockwell.ttf') format('truetype'),
         url('../fonts/SketchRockwell.svg#countersoftfontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

The above came from Font Squirrel’s @font-face Kit Generator which can be accessed at http://www.fontsquirrel.com/fontface/generator. There you can upload your font and convert it to whichever formats you wish. You can also control the CSS syntax it outputs, subset the characters to reduce file size, and use more options to fine-tune the fonts

Also if you are going to use Bold or Italic on you text then you need to include version of the rule that change the font-weight and font-style accordingly for each combination, so the browser knows what font to use when it encounters a CSS rule with bold in it.

Each font typically has a design purpose and was created for a specific job. Most commercial fonts were not designed to be viewed at small sizes on a screen, so in many cases it makes the most sense to reserve these @font-face for headings and continue to use web-safe fonts like Georgia and Lucida for body copy.

Another aspect of fonts that can affect legibility is how they are anti-aliased and hinted. Right now, web fonts are generally more jagged around the edges than traditional fonts, even when anti-aliased, usually because most were not designed to be viewed on screen. Higher quality fonts, as well as fonts that were designed for the web, have better hinting,

Answer 3

Here is a great URL for creating embeddable font packs:

http://fontface.codeandmore.com/

Upload your TTF or OTF font and it creates the entire font kit for you, complete with implementation HTML and CSS examples.

Cheers!

Answer 4

Different browsers supports different font formats:

So you need to create your font in all formats. You can use Font Squirrel (thank you, effectica).

And then, you can import them like that:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

That's not the only possible way. You can find more complete information on this question at Paul Irish's blog.

And, anyway, their appearance may differ a little in different browsers.