How to make use of Google Fonts in your Website?
Are you tired of using some default fonts commonly available in all computers? Then you are not aware of web fonts? You may be wondering what is a Web Font? A browser displays the content of a web page normally available in a computer. It won’t be able to display the content of a website using unrecognized fonts (usually ending up in displaying with the available font). With a web-font, if the font is not present in the user’s computer, it will load the font from the link mentioned by the publisher.
So the primary requirement for using a web-font is to mention the source of the font. A lot of free and premium fonts are currently available. Google Font Directory contains some web-fonts. Let’s explore how to use these web fonts.
Choose a font from the Google Font Directory and get the associated link of the font. For example, let’s use Reenie Beanie. The associated link is
http://fonts.googleapis.com/css?family=Reenie+Beanie
To use this font, we must specify this link as the CSS style
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
Now let’s write a small stylesheet which makes use of this font. All you have to do is to specify Reenie Beanie as the font family
h1 {
font-family: 'Reenie Beanie',arial,serif;
font-size: 52;
}
As you can see, I am using Reenie Beanie for the h1 tag
This font can be seen in action here.
The source code of the page is
<html>
<head>
<title>Google Font API: Examples- Joys of Programming</title>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<style>
h1 {
font-family: 'Reenie Beanie',arial,serif;
font-size: 52;
}
</style>
</head>
<body>
<h1>Joys of Programming</h1>
</body>
</html>
Comments:
Translate
Search
Custom Search