A few years ago, web designers could use only the ubiquitous fonts, the fonts found on every computer irrespective of the operating system. These fonts were also called web safe fonts, and included fonts such as Arial, Georgia Verdana etc.
These days you can easily include any font on your web page using the CSS3 @font-face property. You upload the font to your web server and then define it in your CSS file like this,
{
font-family: customFont;
src: url('Somefont.ttf'),
url('Somefont.eot'); /* IE9 */
}
You can then use this font anywhere in your CSS file,
{
font-family: customFont;
}
Google has gone a step ahead and uploaded all the fonts you will ever need on its servers so that you can directly use the fonts on your website by importing the font in your CSS file from Google’s server.
To use any Google font on your WordPress website, you need to integrate the specific fonts in your WordPress theme. To do that, first go to the Google fonts directory and decide which Google font you want to use on your WordPress website. One you find it, click on ‘Quick-use’ button.
On next page scroll down a bit to find the code that you need to add to your WordPress website to use this Google font.
You can now use either of the three methods, standard, @import or JavaScript, to add this Google font to your WordPress site.
• To add the Google font in WordPress theme via standard method, copy the code above the </head>
tag in the header.php file of your WordPress theme.
• To add the Google font in WordPress theme using the @import method, just copy the specified code at the top of style.css file of your WordPress theme.
• To add the Google font in WordPress theme using the JavaScript method, copy the above the </head>
tag in the header.php file of your WordPress theme.
One you have added the Google font to your WordPress theme, you can easily use it any where like any other font,
font-family: 'Somefont', Helvetica, Arial, serif;
}
If you face any issues while integrating Google fonts with WordPress, then post your question here using the comments form below and we’ll be happy to help.