Docs

[ichibanj]

Hi, my site loads slowly in China. Some investigation seems to suggest that this may be because it uses Google web fonts (I’m using Open Sans). Is there another way I can use this font without loading it from Google?
Site is http://www.masseyblogs.ac.nz/studentblog (it’s multisite)
Thanks

[Rupok]

Hi there,

Thanks for writing in! However it sounds a bit weird and we are nor certain about something like this. Google fonts shouldn’t load slow in a specific country unless they block some google service or port that might cause this. So can’t tell much about this as we are not aware of that.

However you can download google fonts and add to your Child Theme so you can avoid this. You can also try the other source like fontsquirrel or typekit.

Cheers!

[ichibanj]

China blocks/slows down heaps of sites and it seems that Google-related things can be a potential reason for this. I’m not certain but to be on the safe side I’d like to do what you suggest. I already operate a child theme, but how do I download and include Google fonts in it directly?
Thanks

[Rupok]

Hi there,

If you search on web, you will find lot of resources about this – http://stackoverflow.com/questions/8966740/how-to-host-google-web-fonts-on-my-own-server
http://stackoverflow.com/questions/12772418/google-server-for-webfonts-or-self-hosted

Also as mentioned earlier, you can use fontsquirrel or typekit.

Thanks

[Rupok]

Hi again,

It might be helpful for you as well. Here goes the step by step guide to add custom webfont to your site.

You can add custom fonts to your website using CSS3 @font-face rule. To do this, please review this article: http://css-tricks.com/snippets/css/using-font-face/

Basically you need to add the following code in your child theme’s style.css file (if you haven’t installed a child theme, please visit this to install Child Theme):

@font-face {
  font-family: 'MyWebFont';
  src: url('path-to-your-font-directory/font_name.eot');
  src: url('path-to-your-font-directory/font_name.eot?#iefix') format('embedded-opentype'),
       url('path-to-your-font-directory/font_name.woff') format('woff'),
       url('path-to-your-font-directory/font_name.ttf')  format('truetype'),
       url('path-to-your-font-directory/font_name.svg#svgFontName') format('svg');
}

Replace MyWebFont with the name of your font, path-to-your-font-directory with your fonts directory URL (e.g, http://yourwebsite.com/fonts) and font_name with your font’s name.

Next, whenever you need to use this font, simply use “MyWebFont” (or your custom font name), e.g:

body {
   font-family: 'MyWebFont', sans-serif;
}

Hope this helps. 🙂

Thank you.

[Author]

Posts