Using fonts for your web projects

written by Web designers London on October 8, 2012 in Tutorials and Web design with no comments

fonts
As a web designer one of the most important things we need to take into account are the fonts we use, I was surprised how many people do not even know how to add font files to their computer so I thought I would write this post to explain how. I will also be explaining how to use these fonts in your web projects using Fontsquirrel.

Firstly we need to find a font, there are many free and paid font websites out there; the one I tend to use is Dafont.com So scroll through the pages till you find a font that will suit your project. Once you find the right font click on the download button, please check the terms of use for each font as some vary.

Once we have the font file on our hard drive we open control panel and drop the font file into the fonts folder. There we have it you now can find your new font in your fonts list to use to your designing heart is content.

fonts2

Now the next step is to use your new found font in your web design, because I like most (in the past) have used fancy fonts as an image replacing the tags because the chances of the website viewer having that specific font on their computer is slim to none. Now thanks to websites like Google fonts and Fontsquirrel we can display the font we want as live text which will not hinder any SEO issues.

To use Fontsquirrel go to their website and click on @font-face generator, click browse to find the font you wish to use from your hard drive. Tick all the relevant boxes then download all files to a folder called “site-font”.
Once we have this folder we can upload it to our website and we are nearly ready to display our fancy new font as live text.

font 3

We will take a basic website to show you how to implement your new Fontsquirrel font below is the standard HTML site.

fonts4

Then all we need to do is style the font in the CSS file.


@font-face { 
    font-family: 'duase_light_dispregular' ;
    src: url('../site-font/duase-lightdisplay-webfont.eot' );
    src: url('../site-font/duase-lightdisplay-webfont.eot?#iefix' ) format('embedded-opentype'),
         url('../site-font/duase-lightdisplay-webfont.woff' ) format('woff'),
         url('../site-font/duase-lightdisplay-webfont.ttf' ) format('truetype'),
         url('../site-font/duase-lightdisplay-webfont.svg#duase_light_dispregular' ) format('svg');
    font-weight: normal;
    font-style: normal;
} 


h1 { 
	font-family:'duase_light_dispregular'  Verdana, Geneva, sans-serif;
	font-weight:100;
	font-size:24px;
	color:#333;
} 

That should do it, and if you notice in the CSS hor the H1 tag we have added custom fonts as a fall back encase something goes wrong with the font file upload.

Hope this has helped.