If you are a professional web developer or even if you have designed a basic HTML website for yourself –you must have wished “it would have been great, if I could use that good-looking font on my website”. But as you might know, there are only a few fonts that are web-safe and those fonts have become so widely used on Internet that so many people they have becoming boring.
Before I tell you how to use a wide variety of fonts on your website, I guess it is important to understand why you can’t use these fonts straightaway. See, the problem is that when you use a font on your website –that font shall be visible to your website’s visitor only if the visitor has the same font installed in his/her computer. The web-safe fonts like Arial, Verdana Georgia and Times Roman etc. because these fonts are shipped with operating systems. And therefore are available in almost all computers. If you use a fancy font –it may or may not be there in visitor’s computer. Consequently, the browser chooses a different font to show the text and the desired look of your website does not materialize.
It is easy to use non-conventional fonts on websites.
Google Font API is a service from Google from where you can embed fonts into your website. The visitor’s browser gets the font from Google’s Font Directory and the dependence on font’s availability in visitor’s computer becomes irrelevant.
At present, Google provides you with close 450 open source fonts. You can browse through the font directory, select a font and then link the font with your website with the following code:
<link href="http://fonts.googleapis.com/css?family=FONTNAME" rel="stylesheet" type="text/css" />
Here you need to replace FONTNAME with the name of the font you want to use. After this, you can make use of the font’s family name anywhere in HTML or CSS. For example:
<link href="http://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css" />
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
<body>
<div>Making the Web Beautiful!</div>
</body>
Isn’t it cool?
TechWelkin recommends use of Google API for using fancy and stylish fonts in HTML on your website. However, if you are looking for a specific font that is not available in Google’s font directory —there are paid services available. I will talk about these services in a separate article.
I hope you liked this article. Please let me know your views on it.
thanks for sharing
Hello Admin,
This HTML Code Is Not Working, Even I Changed All ( ” ” ) Inverted Commas To Default Commas.( ” ” ). You Are Using Stylish Commas Which Are Not Supported By HTML Markup. Please Take A Review.
From Ahtsham Khan Qazi
Hi Ahtsham, the code is working all fine. I have replaced the stylish commas. Thanks for error reporting!