Introduction to Webfonts for HTML & CSS developers


I am writing this post as an answer to a question I received in email. A developer wanted to know about Webfonts and using them. If you are a Web-font expert or you have used them , you can hit the X button right on your browser tab.

However, read further if you want to learn about it.

In the modern web era, fonts play a major role in web design, usability and typography. Webfont is the solution to a big problem which all web designers and developers were facing. Now, lets dive into the problem statement.


In simple words, until recently, most websites could only display text using a small selection of fonts which are already installed on user's computer. Simply, the font names/types you use in your HTML/CSS should be available on user's machine and only then users could see the text with that font and not otherwise.
As a designer, if you wanted to use some fonts which are catchy, flair or with a different appeal, it was not possible as you could not expect your users to install the fonts which you like as a developer. Just imagine, how many times we used images instead of text to show a attractive text or a small section header?

The biggest problem with images is that ; Search engines cannot understand the text on your images so could not index your pages very well. And suppose, if you wanted to change the font size in your heading, you had to recreate an image!

And with the Introduction to Web-fonts, the problem is solved!.
Webfonts are a font format with a specific license that permits web designers and developers to use real typography online without losing the advantages of live text — dynamic, searchable, accessible content.
Today, there are many providers offering web-fonts as a service. Few services are for free and few of them comes for a cost! Using a web-font is fairly simple. The service provider gives a Javascript reference URL and a font name. Just reference that URL on your web page and start using the font in your CSS. And these fonts are available to your users without having them to manually install it!!

Almost every one likes "Free" just like me. So, lets look into a Free Web-font Service.

Google !!
Google Web Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. There are many fonts available on the Google directory for free use. Also, you can submit your own font. Find more details here http://www.google.com/webfonts/#



Here is an example on using a free Web-font called "Merienda One" available on Google.

Add the below code in the Head Section of your HTML
<link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>

You can obtain the URL ref like above for every font available on Google web-fonts. Just browse the web-font directory and for the desired font, click on "Quick -Use" for that particular font. You will get the javascript ref link code to use it.




And that's all you have to do. You can Just use the font name wherever required in your HTML document. Here is the complete listing.

<html>
<head>
    <title></title>
    <link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet'
        type='text/css'>
</head>
<body>
    <form id="form1" runat="server">
    <div style="font-family: 'Merienda One'">
        This text is looking cool. Thanks to the font Meerienda One!
    </div>
    </form>
</body>
</html>

and for every user and every browser, the output will be


Interesting? Here are some more web-font services
  1. Typekit
  2. Webtype
  3. FontDeck
  4. FontsLive 
  5. TypeFront
If you are looking for free webfonts, just Google for "Free Web-fonts" and you will find couple of them.

Popular posts from this blog

Facebook Javascript API : Feed and Share Dialog for Beginners

Real time Push Notifications with SignalR & PNotify (Pines Notify)

What's new and expected in .NET Framework 4.5