Google web fonts stored locally and online sources

Question

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

But when I download this font and save it locally on my server, and then direct the @ font-face rule to my own machine, it does not work.

So, I made a replacement for this line in the 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 googleapi for this font. And I saved the font file (.woff) in the above path (I double-checked, it really is).

I tried to edit the url too, but nothing good:

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

I cannot believe that there is any reason why Google web fonts will not work if we use them locally, so that something is wrong with what I am doing. The evidence? Isn't that the way we define our own font faces? (I have never tried this before).

Answer 1

As pointed out in the comments, the cause of the problem was the spelling of the font name in the URL.

This is a way to use Google fonts locally. The correct way is to use relative URLs such as fonts / michroma / michroma.woff, and not http: URLs from localhost (for this you will need to run an HTTP server on your computer).

However, it will not work in browsers that do not support the WOFF format (in this case). Usually, using Google Fonts as a remote hosting is better because they know how to serve different font formats for different browsers. Wed to Should I locally store CSS generated by the Google Web Fonts API?

Answer 2

in one font, quotes for the surname of the font are not needed. you have to uninstall and run, it will work fine. font-family: Michroma;