Search code examples
csswebfonts

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

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.

enter image description here

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

Solution

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