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

Solution 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?

Solution 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;