In @font-face CSS rule, doesn't the 'local' value (for 'src' attribute) work anymore?

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).

@AllanKimmerJensen It's there in the question, let me quote it for you -- "...but the browser (Chromium in my case)..." — its_me
– its_me, Commented Apr 30, 2012 at 11:16

Allan Kimmer Jensen · Accepted Answer · 2012-04-30 11:31:32Z

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

answered Apr 30, 2012 at 11:31

Allan Kimmer Jensen

4,4192 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

its_me Over a year ago

You are absolutely right. Kicking myself, why hadn't I tried this already?! Thanks, now it'll help others as well. :)

Allan Kimmer Jensen Over a year ago

Depending on the project. I would also recommend that you use the google font API, it is likely that people will already have cached the file, gaining better performance. There could be reasons not to use this, but mostly it is a plus.

Collectives™ on Stack Overflow

In @font-face CSS rule, doesn't the 'local' value (for 'src' attribute) work anymore?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related