How to include external font file in CSS – Cross browser compatible

font-face
You may always want to use external fonts with your websites. But there is always a cross browser compatibility issue while using external font files. This is because each browser supports different and limited number of font formatsĀ  like eot, ttf, woff, svg. In order to make your font cross browser compatible follow these steps.

    1. Keep your external font file ready. This can be in any compatible font format. Go to Font Face Generator. Upload your font file to it and agree to their user agreement. Download the zip file.
    2. Unzip to your drive. You will find four fonts file of the same name but different formats, like if you have uploaded a font named GoodDog, your unzip folder will include four files gooddog.eot, gooddog.svg, gooddog.ttf, gooddog.woff.
    3. Copy these four files to your website directory like www.example.com/fonts/font-files.
    4. Again go to the unzip folder on your local drive and find the file stylesheet.css. This file has the standard @font-face code. Copy and paste this code at the top of your website styling file (css file).

    Do not forget to modify the src url in it. In our example the source url should be fonts/fontname. Note the name of your font in this code in font-family.

    @charset "utf-8";       //file encoding
    
    @font-face {
    font-family: 'GoodDogRegular';
    src: local("GoodDog Regular");
    src: url('fonts/gooddog-webfont.eot');
    src: url('fonts/gooddog-webfont.eot?#iefix') format('eot'),
    url('fonts/gooddog-webfont.woff') format('woff'),
    url('fonts/gooddog-webfont.ttf') format('truetype'),
    url('fonts/gooddog-webfont.svg#webfontQ1FnPBwb') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    You can now use this font like a regular font in your CSS.

    .menu {
    font-family:GoodDogRegular;
    color:#dd0000;
    font-size: 36px;
    font-weight:bold;
    }

    Tags: , , , , , ,

2 Responses to "How to include external font file in CSS – Cross browser compatible"

Leave a Comment