Add Google WebFonts To WordPress

ADD GOOGLE WEBFONTS

Add Desired Typo

If you need unique typography then add google webfonts to wordpress blogs or websites. This task becomes really easy, if we use any particular plugin. But we can also use import function and add them to our stylesheets.

Remember that it is usually suggested to use import function, instead of using any plugin. Since plugin will not only affect the load time, but the changes are also not permanent. So whenever your page loads, then changes in typography are loaded externally.

Google Webfonts : Its a place where huge collections of fonts are maintained. They all can be downloaded and used on any machine. But they are specially designed to work on websites. They all are elegant, bold, appealing and unique. You can use and download all of them for free.

Lets Add Google WebFonts To WordPress

We will first discuss of the import function, which is usually used by all theme developers.

We will take Spirax as our example. Its really very unique font. If you are designing any website for Mommy ” female specific ” then their is no better option except Spirax. Use it and you will get outstanding design.

Bring into action : We get three different options..

  • Standard : This will give you direct link to the desired font
  • @import : I will recommend this ( reduce the stylesheet size and also easy to implement )
  • Javascript : I will never go for this. Huge structure. More than 1.5 kb external load.

How to use import function :

Here’s the example  @import url(http://fonts.googleapis.com/css?family=Spirax);. Never try to modify the link structure.

Hint : Check out the load time of your desired font. Its really easy. Google shows a speedometer in the right area. Just check that the load time is in green area. If you are a blogger or webmaster, then it will really affect you SEO.

Steps To Implement Google WebFonts To WordPress :

  • First is to add the code into the theme.
IMPORT GOOGLE WEBFONTS

IMPORT GOOGLE WEBFONTS

  • Then we have to add the fonts with desired style into the body, H1,2,3,4,5,6 tags etc places. See the example below
TEXT AREA

TEXT AREA

Now you have to just save your stylesheet. That’s all. Once done you can load your site to check out the changes. Remember that until and unless you are not concerned with SEO, don’t use more than 1 font.

Using Plugins :

Use them if you really don’t care for your blog’s speed. But one of them changes the typography permanently.

WordPress Font Uploader : If you want to bring some permanent changes, but at the same time you don’t know even C of CSS. Then you should move with this plugin. It can upload your fonts, and then you can directly implement it to your blog.

Why You should not use it : I think you know that Google have more than a million servers. Now each of their server is much more powerful then out VPS, Managed or shared ones. If we host our fonts on our server then the page load time will increase much more. So its always better to let Google host the fonts and we can use it wisely without any problems.

Google webfont Integrate : This is the second generation plugin and support almost 500 different types of fonts. You can easily chose any of them for any particulate part of your page. For title, headings, content, sidebars, footers etc. The best part is, that it also gives complete guide on how to add scripts to stylesheets.

WEEKLY NEWSLETTER

Grab Weekly Design & Development News, Collections, Tips And Tools.

Privacy Policy : we hate SPAM just like you do

About Vivek Kumar Poddar

Hi Its Vivek, Admin of this blog. I am an engineering student from India who loves web designing ( Genesis ), Photoshop, Wordpress, Google & finally HALO [ series ].Find me on Google+

Speak Your Mind

*