0

If I link a custom font to google, it works. But when I copy the @font-face's to my local machine, it doesn't. In short, i have the following very simple HTML:

<html>
<head>
    <!--<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto'>-->
    <!--<link rel='stylesheet' href='roboto.css'>-->
    <title>Hello</title>
    <style>
        .temp { font-family: roboto, courier; }         
    </style>
</head>
<body>
    <div class="temp">THIS IS A STRING!</div>
</body>
</html>

Now, if I uncomment the first link, everything works fine. The string has roboto font.

However, if I paste that link in browser, it'd return me a bunch of @font-face's. If I then copy that lot into a local roboto.css (that stays in the same folder as my html), and use the second link instead, roboto font doesn't show up. Why is that so?

I'm trying to make everything run offline, hence I need to have all css and fonts downloaded.

Dunnomuch
  • 223
  • 1
  • 2
  • 11
  • Wrong paths to the font files maybe? Go check in the network panel of your browser’s developer tools, to see if there’s any 404s there. – CBroe Mar 18 '15 at 03:28
  • As from the comments below, see if this is of help for you: http://stackoverflow.com/q/10300143/2543628 – Jey DWork Mar 18 '15 at 03:52

1 Answers1

1

I tried in my local. And it works. In the case your internet is fully switched off, then you will need to download the fonts referenced in the roboto.css file as well and place them in your local folder. Then update the roboto.css file with the local paths for those fonts.

example: download the file referenced below

src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');

the url would be http://fonts.gstatic.com/s/roboto/v15/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2

once you download the file ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2. Place it in your local folder and the updated code would be:

src: local('Roboto'), local('Roboto-Regular'), url(./ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');

Hope this helps.

Bala
  • 686
  • 3
  • 11
  • 2
    The Google Font API gives you different (optimized) content depending on with which browser you request the font. (Just open http://fonts.googleapis.com/css?family=Roboto for example with Chrome and with IE and you will notice a difference.) So also your approach may work somewhat you may run in strange bugs regarding cross browser compatibility and therefore lose for what the Google Font API is there. Hence you should stay away from solutions like that. – Jey DWork Mar 18 '15 at 03:43
  • 1
    ah.. Well, that would be a problem. Nice to know and will make a note of it. Although, the only solution for above issue would be to figure out the target browsers and get the right font files and css for the page as clearly the application does not have internet access and might be an offline local page. – Bala Mar 18 '15 at 03:48
  • 1
    Something similar (how to user Google Fonts offline properly) was discussed here: http://stackoverflow.com/q/10300143/2543628 I'm not sure if it will clone the full range of different font formats and CSS for all OS and browser combinations. – Jey DWork Mar 18 '15 at 03:52
  • Jey DWork, you've hit the nail right on the head! You see, my subtle problem was, I paste that googleapi link in CHROME, but I run the HTML file in IE! when I paste the same googleapi link in IE, it gives me a completely different src, a WOFF, whereas CHROME gives me WOFF2! It now works flawlessly. Thanks again! – Dunnomuch Mar 18 '15 at 05:53
  • Yes, Bala, I'm now working on downloading the actual font file. Thanks! – Dunnomuch Mar 18 '15 at 05:58