• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Technostarry

  • Home
  • Windows 8
  • Android
  • iOS
  • Web Apps
  • Web Browser
  • Hardware
  • About

How to Use Free Google Web Fonts

June 1, 2011 by Saqib Leave a Comment

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.

google-fonts

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.

Filed Under: Tips Tagged With: Google

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

STAY CONNECTED

  • Facebook
  • RSS
  • Twitter
  • YouTube

SUBSCRIBE

Subscribe now to get the latest updates from this blog right to your Inbox

Recent Posts

  • 6 Things to Remember Before Buying a Micro SD Card
  • 5 Best Android Stock Market Apps for India
  • Facebook App Alternatives for Android , and Why You Should Use Them
  • Kindle Oasis vs Voyage vs Paperwhite: Which one to Buy

Footer

Links

  • About
  • Subscribe
  • Contact
  • Advertise
  • Privacy Policy

Books on cloud storage services:

  • Mastering OneDrive And Office Online
  • Mastering Google Drive and Docs (With Tips)
  • Mastering Dropbox with Useful Tips and Apps

Must Read Articles

  • How to Change Default Apps on Android
  • 6 Tips to Increase Battery Life on Android 4.4 KitKat Devices
  • How to Transfer Documents and Files to your Kindle
  • 5 Best Free Offline Dictionary Apps for Android

© Copyright 2016 Technostarry · All Rights Reserved ·