Google web fonts stored locally versus online source

Question

When I add google web fonts using the @import rule in my CSS file, it works fine.

But when I download that font and store it locally in my server and then direct the @font-face rule to my own machine, it doesn't work.

So what I did was to replace this line, in my css/fonts.css file:

@import url(http://fonts.googleapis.com/css?family=Michroma);

with this:

@font-face {
font-family: 'Michroma';
font-style: normal;
font-weight: 400;
src: url(http://localhost/xampp/mysite/css/fonts/michroma/micrhoma.woff) format('woff');
}

In other words, I just copied the code from the googleapi for that font. And I saved the font file (.woff) in the path above (I've rechecked, it is indeed there).

I tried editing the url to this as well, but no good:

src: url(fonts/michroma/michroma.woff) format('woff');

I can't believe there's any reason why Google web fonts wouldn't work if we used them locally, so there must something wrong with what I'm doing. Clues? Isn't this how we define our own font faces anyway? (I've never tried that before).

Aromaticity

Answer 1

As indicated in the comments, the cause of the problem was misspelling of the font name in the URL.

This is a way to use Google fonts locally. The proper way is to use relative URLs like fonts/michroma/michroma.woff and not http: URLs with localhost (they would require you to run an HTTP server on your computer).

However, it would not work on browsers that do not support the WOFF format (in this case). Generally, using Google Fonts as remotely hosted is better, since they know how to serve different font formats to different browsers. Cf. to Should I locally store CSS generated by the Google Web Fonts API?

Danais

Off-topic but related: for converting a .ttf font into more formats supported by most browsers, head over to FontSquirrel: fontsquirrel.com/fontface/generator. Just discovered it, it's awesome. – Aromaticity

Answer 2

in single font the quotes for font family name is not needed. you should remove and run it will works fine. font-family: Michroma;

Downatheel

The quotes are optional, so removing them is not likely to fix anything. – Danais

@user961627, what do you mean? Does your comment relate to the proposed answer? I can still reproduce your problem with Michroma (tested on IE, Firefox, Chrome), but not with another font, Rye, so I suspect it’s a font-specific issue. Did you reload the font? (I just did, but it did not help.) – Danais

The problem was just a spelling mistake in the source URL, I think I'd typed "mihcroma" instead of michroma. Tried to delete this question but alas. – Aromaticity

Right, that was it. I modified your code in my tests without checking the spelling of the name. – Danais