How to use any font in your website with Font-face

I bet you have already been in the situation of designing some web page with a great font you found on web. And then, you have a problem – how to use it online and how could your visitors see it?

Well many of you have probably given up using the font on your site just because you don’t know how it will appear to your visitors.

With Font Face it’s no longer an obstacle.

Today, I will teach in a step-by-step tutorial how to generate text with your font and applying it to an element using Font Face Generator. Let’s go on.

 

1 – Generating the font

We will be using Font Face Generator, provided by FontSquirrel.

Let’s to Font Face Generator, that is where we generate our font.

 

Font Face Generator

 

The generator give us three options – Basic, Optimal and Expert. Let’s select the optimal option because it is recommended for a balance between performance/speed.

Let’s activate the option that we have license to use the font and embed it in our page. If you don’t have a license for it, or if your license doesn’t allow you to do it, please choose another font – you can’t use a font for which you have no rights to use.

Then choose the font file you want to use and the upload will start. I will use the font foglihten.
Once the website generates the font, click on Download Your Kit to download the files you need to use on your website.

 

download kit

 

2 – Style sheet

Copy the folder that you have downloaded to the root of your site. I renamed the folder to fonts, but you can rename it to whatever you want, or you can just leave the name as it was.

Inside the folder, you’ll find a CSS file with the name style sheet, open the file and will find something like this:

@font-face {
    font-family: 'FoglihtenRegular';
    src: url('fonts/foglihten-068-webfont.eot');
    src: url('fonts/foglihten-068-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/foglihten-068-webfont.woff') format('woff'),
         url('fonts/foglihten-068-webfont.ttf') format('truetype'),
         url('fonts/foglihten-068-webfont.svg#FoglihtenRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

 

Copy the code to your css and rectify the path of the files. Remember that I changed the folder name to fonts.

 

3 – Apply the font

We will be applying the font to the element H1, but you can apply it to whatever you want to, even to classes!

 

h1{
    font-family: 'FoglihtenRegular', arial, verdana;
}

 

Final result:

Done. Now you are able to use any font in your website!

Code used:



    
     
        
        
        
        
    
    
    
        

Developping

Tags: , ,

1 Comment

Deixe uma resposta