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

Image upload using JQuery + Uploadify + ASP.Net Custom Handler

Image
Recently, I worked on a small POC to upload image files to web server and without a visible postback. There are many solutions to upload a file to server and among many of them, one of the interesting solution is to use a jquery plugin called Uploadify . Well, the advantages of Uploadify are You can upload one or more files  It is a Jquery implementation. Works on multiple browsers. Many options to try (Set file size limit, File type filter, Callback after upload etc) You can bend it based on  your needs. Look and feel is customizable.
Read more

Generating reports with Templater, MS Word & C#

Image
Whenever developers think of report design or development, they actually think of SSRS or other report designers/engines. But many times it happens like just for the sake of few basic reports, customers will not be ready to buy those expensive reporting tools and also it is obvious that using such tools are meaningless for a small requirement. You can create reports with MS Word and MS Excel easily, it was not so easy to push data into it programmatically. In this post, let us look into a small reporting library known as " Templater " to push data into reports. Well ,
Read more

Creating a cool Microsoft Word Report for listing Scientists with Templater and C# Generic List

Image
Some time back, I had written a post on Templater Library for creating a simple "Prize Winner Notification" e-mailer template using MS Word & Templater. It was a simple one. If you have not read it yet, please have a look at this Post . In this post, let us create a Microsoft Word Report which lists few great scientists across the world. Also, let us see how the Templater supports Generic List as a data source for the report.
Read more