Question

Example CSS:

@font-face {
  font-family: 'Droid Serif';
  font-weight: normal;
  font-style: italic;
  src: url('DroidSerif-Italic-webfont.eot');
  src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
       local('Droid Serif'), local('DroidSerifItalic'),
       url('DroidSerif-Italic-webfont.woff') format('woff'),
       url('DroidSerif-Italic-webfont.ttf') format('truetype'),
       url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
}

h1 {
  font-family:  'Droid Serif';
  font-weight: normal;
  font-style: italic;
}

Example HTML:

<div id="content">
    <h1>This is a big, big title</h1>
</div>

Droid Serif is a very common font on Linux systems these days (at least it’s available on Ubuntu which I use).

As you can see above, I have clearly defined local('Droid Serif'), local('DroidSerifItalic'), but the browser (Chromium in my case) is simply downloading the font file (WOFF format) instead of simply using the font that’s available on my computer.

Any idea what could be causing this? Am I doing something wrong, or the isn’t the ‘local’ value considered by browsers anymore?

EDIT: In case you are wondering, DroidSerifItalic is the post-script name for the Droid Serif font if you downloaded it from Font Squirrel (at least that what I’ve read).

EDIT-2: Just in case it’s not clear enough, I am using Chromium web browser on Ubuntu (v12.04).

Answer 1

I looked at google’s implementation and they use this syntax/names:

src: local('Droid Serif Italic'), local('DroidSerif-Italic')

I guess it will work if you use this name! It could seem you simply got the postscript name wrong.

Source: http://fonts.googleapis.com/css?family=Droid+Serif:400italic