css google font how to download and embedd in css to avoid slow load times

Question

I am using the yaml css framework. Every now and again when I access my web page I get the following message that my page is trying to download a google font.

This page is an intranet page and the internet can be very slow so I am looking to stop this from happening. I guess what I need to do is download the font and put it somewhere in my css. Can anyone guide me on how to do this and also where can I grab the google font?

Thanks

Answer 1

A good place to look up fonts is http://www.google.com/fonts

Perhaps you can download Droid Sans from here: http://www.fontsquirrel.com/fonts/Droid-Sans if TTF is ok with you.

As for the font, if you wan the font to be global, you can simply do:

@font-face {
  font-family: DroidSans;
  src: url('location/DroidSans.ttf'),
       url('location/DroidSans.eot'); /* IE9 */
}

html * {
   font-family: DroidSans;
}

If you want to support IE9 - I think there are plenty of ttf to eot converters online.

Answer 2

Put this into your CSS file. Obviously, change the names of the files to match what your using.

/* Webfont: Open Sans Regular */
@font-face {
    font-family: 'open_sansregular';
    src: url('path/to/fonts/OpenSans-Regular-webfont.eot');
    src: url('path/to/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('path/to/fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('path/to/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('path/to/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p {
  font-family:'open_sansregular', Verdana, Arial, sans;
}

You can download fonts all over the internet but make sure they're open to the public unless you purchase a license.

Answer 3

You can download the font files directly from Google Fonts.

Then host the files on your server.

Then use @font-face to import them into your page.

Then use it like any other font in your CSS: font-family: 'Droid Sans'

Answer 4

Take care when only referencing TTF. To cover the most browsers you will need to reference 5 different font formats, which are TTF, EOT, WOFF, WOFF2 and SVG. From the Google fonts website you can only download TTF though.

When you include the CSS file from the Google Fonts site, Google takes care of the user agent detection and will deliver CSS rules with the correct font format. To download all font formats you need to use different browsers or fake the user agent, which most browsers can do.

A handy tool like http://www.localfont.com/ can take care of this for you. You can download all possible font formats along with X-Browser CSS definition.