How To Use Google Web Fonts (Custom Fonts) On Your Website

Hi! Everyone, hope you all are fine.
Today in this post I will tell you how you can use Google Web Fonts in your website. Most of you must be wanting to use some costume fonts on your website but if the user don’t have that font on their computer so that custom font may not work, so Google have come up with many custom fonts which you can use it on your website very easily.

Google web fonts beta logo

You can go to google.com/webfonts, select the font you want to use, click on Use this font tab, past the link code in your page head tag, now simply define the font family in CSS and start using.

For e.g.: I have selected font called Vibur, now here how your code will somewhat look like

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Web Fonts - Vibur</title>
<link href='http://fonts.googleapis.com/css?family=Vibur' rel='stylesheet' type='text/css'>
<style>
h3 { font-family: 'Vibur', serif; font-size: 100px; }
</style>
</head>
<body>
<h3>This is Vibur font in h3 tag</h3>
</body>
</html>

Click here to see the live demo of above example.

You can also do more customization in this font using CSS and the great thing about this Google web fonts is it is also supported with IE6 (Internet Explorer 6), so you don’t to worry about the people who still use IE6. If you have any question or problem let me know.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.