CODEWITHSUNDEEP
windowsfont-face
Anton Gildebrand
Anton Gildebrand

Reputation: 3707

Why does @font-face render weird in Windows?

I have generated font-face files for the font "formata" using fontsquirrel. On my Mac the font looks good in both Chrome and Safari (which seems logic since both use Webkit). It renders fine on Android (Chrome) and the iPad (Safari) as well.

In Windows, however, the font renders really weird. Some letters look like they have a padding-bottom of 1px. Some letters also seem like they are one pixel to small on the height.

I have tried to turn of ClearType, but it still is the same. The browser doesn't seem to matter.

Below is screenshot of how i looks like: Example of the font rendering in Windows

Upvotes: 2

Views: 1398

Answers (1)

Michael Gatto
Michael Gatto

Reputation: 118

Try adjusting the font size. Some custom fonts on Windows don't work well at specific font sizes. Experiment with a few different sizes.

An example that works for me:

@font-face {
    font-family: 'PaddingtonSCPlainSmallCapsRom';
    src: url('/assets/fonts/paddingtonsc-webfont.eot');  /* IE9 Compat Modes */
    src: url('/assets/fonts/paddingtonsc-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/assets/fonts/paddingtonsc-webfont.woff') format('woff'),  /* Modern Browsers */
         url('/assets/fonts/paddingtonsc-webfont.ttf') format('truetype'),  /* Safari, Android, iOS */
     url('/assets/fonts/paddingtonsc-webfont.svg#webfontCykG2Qou') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
  /* font-variant: normal; don't include this since webkit will ignore the whole rule: https://bugs.webkit.org/show_bug.cgi?id=25000 */
}

body {
  font: normal 75%/1.5em PaddingtonSCPlainSmallCapsRom, Arial, sans-serif;
}

Upvotes: 2

Related Questions