Fonts/typography are very important for any website. The fonts should be clearly readable and it should not confuse the readers. One problem which the web designers/programmers have faced since ages is that what if a particular font is not present in the visitors Computer. But thankfully, Google Fonts is here. The fonts are hosted on Google’s server and all you need is to embed a few lines of code to your webpage. This guide will explain you how to use free Google Web Fonts. These are web safe fonts. So now let’s get started:
Step 1: Choosing the font
The first step is to head over to Google Web Fonts Directory. You can choose the font from a large variety. But yes, before choosing a font do consider its purpose, usability and readability. Not all fonts are suitable for all purposes. E.g. if its a business site, the fonts should not look much fancy. After selecting a font, just click on it. In the next page, a preview will be shown of that font. E.g. on clicking Playfair Display font, this is its preview.
From here, you can see how this text and how all its alphabets will look like.
Step 2: Embedding the font
So now that the font is chosen, click on Use this font. A second page will be displayed with instructions on how to use this font. The instructions are pretty self explanatory, but here’s a detailed explanation. You will need to place this line of code in <head> section of your HTML document.
<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
This is a link to stylesheet, and it defines the location of this font which is hosted on Google’s server.
Step 3: Using the font
So once this step 2 is done, you can now use the font, just like any ordinary fonts. E.g. first declare this in CSS.
h3 { font-family: 'Playfair Display', arial, serif; }
Now whenever H3 tag is used, Playfair Display font will rendered. Its always advisable to use some fall back fonts also. So that if in case, this particular font is not available, then browser can render some other font. E.g. in the above case, if Playfair Display is not available, then arial will be used.
Google Font API is really very useful. Go ahead and use these fonts and make your site stand out from the crowd, its really easy integrating these fonts in the website. What do you think about these Google webfonts, have you used them in any website, just post your comment below.
Tip: If you are using WordPress, then you can just declare the font family in style.css, and then use the same tag afterwards wherever you want to apply the same formatting.
Read the official documentation from here.
Leave a Reply