How many of you actually tested your website design on different browsers and computers before you launch the site? I bet few of you do. Do you know that what looks good on one OS (for example, Mac) can really look bad on another, such as Windows? The main reason is because the fonts used in the Mac system is not available in the Windows OS. Substitute font is used by the computer (without the font) and this can really screw up your web design. A good way to overcome this is to use a web font that is supported by most browsers, so that your site will look essentially the same regardless which browser or computer you are using.
During the I/O developer conference in June 2010, Google introduced the Google Font – a series of open source font, that you can embed and use on your site. All the fonts are hosted on the Google server, so any browsers can utilise it without much effort. At the moment, there are 18 different fonts (as of this post) that you can choose from and I am sure more will be added to the library in the future.
Previewing the font
In addition to the Google Font, Google also released the Google Font previewer that allows you to preview the font before embedding it to your site.
The usage is simple. You just have to type in some custom text, play around with the settings (font family, size, variants, spacing etc) to find the best fit for your site.
Once you are satisfied with the result, simply grab the code and embed it into your site design.
Embedding Google Font to your WordPress site
If you are using a WP-powered blog, here’s how you can embed and use Google font in your site.
Go to Google Font, find your favorite font and grab the “Embed” code. For example:
Open up the “header.php” file in your active theme folder. Insert the code before the tag.
To use the Google Font throughout the site, open your “style.css” file from the active theme folder and paste the remaining code that you grabbed from the Google Font site.
body {
font-family: 'Cantarell', serif;
font-size: 28px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1em;
}
Alternatively, you can change the css accordingly if you are only using it for a small part of your site. For example
span.custom_font {
font-family: 'Cantarell', serif;
font-size: 28px;
font-style: normal;
font-weight: 400;
}
Save the header.php and style.css file and upload them back to your server. If you are using a cache plugin, don’t forget to clear your cache.
That’s it. Try it out and let us know if it works for you.
Image credit: til01
