How to Use Fancy Stylish Fonts in a Website

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.

The Problem

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.
It is easy to use non-conventional fonts on websites.
The Solution: Use Fancy Stylish Fonts in HTML

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?

ALSO READ:  Enable Cookies in Firefox, Chrome, Safari, IE, Opera, Android

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.

3 thoughts on “How to Use Fancy Stylish Fonts in a Website”

  1. 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

Leave a Comment

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