Lets learn Web Designing

How to use any font on your website

How to use any font on your website

This question might sound very simple to answer. Just download the font of your choice, install it, and include it (using font-family CSS property) in your website. But in reality it is not as simple as it sounds. What happens if your visitors (website visitors) dont have the same font installed on their system? If you use a font that is not installed on your website visitor’s computer then his or her browser will show some other font that is present on their computer.

So, What is the easiest way of using fonts of your choice on your website? The answer is “Font Squirrel“. This is one website which provides @Font-Face Kits, which is a tool that allows you to easily use any font in your web sites. Font Squirrel uses a technique called “font embedding“. Font-Embedding is a technique which allows fonts to be temporarily installed on a user’s computer so that a Web page is displayed exactly as the Web designer intended. To know more about the “font-embedding technique” go to this link.

Demo of Font Embedding- Use any font on a webpage

Click here to go to the demonstration page, where I have used some uncommon fonts to explain the usage of “Font Squirrel” @font-face kit generators.

Now Step by Step we will see how to use custom fonts on our webpage/ website.

Step 1: Download a font of your choice (which you want to use in your webpage/ website). Save it on your desktop.

Step 2: Go to the following link “http://www.fontsquirrel.com/fontface/generator“.You should now see something like this:

Font Face Generator Kit on Font Squirrel

Step 3: Click on “Add Fonts” button on the top. Select the font that we have downloaded (to be used on our website/ webpage). And click on “Open” button, which will upload that font.

Step 4: Check the box as shown in the figure (Marked in red border). Before you check the box, make sure that the fonts you are uploading are legally eligible for web embedding.

Font Face Kit Generator - Font Squirrel

Font Face Kit Generator - Font Squirrel

Once you check the box, you will see that a button appears on the bottom of the screen which says “Download your kit“. (See the picture above- Marked with blue border).

Step 5: Click on the button, and save the zipped file on your desktop. Extract the contents of the zipped file in the folder where you have saved your html files. In the extracted content, you will find a file called “stylesheet.css“. This file contains the style rules for the font that we are going to embedd in our website. Its content will look something like this:

@font-face {
	font-family: 'ArcanumRegular';
	src: url('arcanum-webfont.eot');
	src: local('☺'), url('arcanum-webfont.woff') format('woff'), url('arcanum-webfont.ttf') format('truetype'), url('arcanum-webfont.svg#webfonta1BeegY1') format('svg');
	font-weight: normal;
	font-style: normal;
}

Step 6: Copy and paste the content of your “stylesheet.css” file on top of your main css file. Now the section of your webpage where you want to use your own downloaded font, just use the style rule- font-family: “Your-font-name”;.

That’s it. Now you see how easy it is to use the custom fonts on your website using “Font Squirrel”. Click here to go to the demonstration page, where I have used some uncommon fonts to explain the usage of “Font Squirrel” @font-face kit generators.

For more information on font-embedding and “How to use custom fonts on a webpage”, please visit the following links:


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s