Fonts Not Rendering Uniformly in Browsers

Fonts not rendering uniformly in browsers

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.

How to adjust mobile browser rendering of font sizes uniformly

<meta name="viewport" content="width=device-width, user-scalable=yes" />

I came across this tag on another question; it works perfectly.

Fonts aren't displaying uniformly

I was confused as to why Playfair Display appeared grainy in my headings and paragraphs, but NOT in my sidebar navigation.

After some frustration, I realized that the typeface just looks bad at a certain (small) font.

Search for Playfair:

http://www.google.com/fonts/

As you can see, Normal 400 looks very weird, but in larger, bold, or italic styles, it looks just fine. The only thing to do was to choose a similar typeface for smaller styles, so I'm using Jacques Francois.

Rendering font differs from IE compared to FF and Chrome

Firefox 7+ under Windows 7 uses GDI Classic mode (with hinting) to render so called Core Web fonts like Arial (since they are more sharp and readable with hinting enabled), and DirectWrite (without hinting) for other fonts. Specific fonts to use GDI mode with are listed in following about:config pref:

gfx.font_rendering.cleartype_params.force_gdi_classic_for_families

AFAIK, rendering mode in Firefox depends also on font size. For enough-big font-sizes and too small ones (perhaps greater than 15px and maybe less than 9px), it uses DirectWrite for Core Web fonts too.

IE9 under Windows 7 uses DirectWrite always.

Chrome seems to use GDI classic mode always.

How to get uniform appearance of unicode (HTML entities) in all browsers

Thanks to @giacomo-catenazzi for pointing me towards webfonts. I found the following useful:

• MDN Web fonts tutorial
• fileformat.info for finding out which fonts have glyphs for particular unicodes
• I downloaded the font from https://webfonts.ffonts.net/, but many other sources are available. MDN suggests fontsquirrel
• Font squirrel web font generator - if you have a TTF or OTF font to convert into a webfont

I followed the instructions from MDN, and set up the newly created web font in the CSS:

@font-face {
    font-family: 'Symbola';
    src:url('fonts/Symbola.ttf.woff') format('woff'),
    url('fonts/Symbola.ttf.svg#Symbola') format('svg'),
    url('fonts/Symbola.ttf.eot'),
    url('fonts/Symbola.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: Symbola, sans-serif;
}

but this did not work.
There was one more hoop to jump through: It seems that font-family is not inherited by form elements, although I couldn't find reference to this in the specifications (but I assume it is there somewhere).

This was fixed by:

button {
    font-family: inherit;
}

---

Related Topics