7

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

user961627
  • 12,379
  • 42
  • 136
  • 210

2 Answers2

2

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?

Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Off-topic but related: for converting a .ttf font into more formats supported by most browsers, head over to FontSquirrel: http://www.fontsquirrel.com/fontface/generator. Just discovered it, it's awesome. – user961627 Sep 10 '12 at 11:52
1

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

Web Designer cum Promoter
  • 1,334
  • 14
  • 26
  • The quotes are optional, so removing them is not likely to fix anything. – Jukka K. Korpela Sep 10 '12 at 10:56
  • @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.) – Jukka K. Korpela Sep 10 '12 at 11:02
  • 1
    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. – user961627 Sep 10 '12 at 11:16
  • Right, that was it. I modified your code in my tests without checking the spelling of the name. – Jukka K. Korpela Sep 10 '12 at 11:20