How To Add Font To A Web Page

How do you add a font to a page. For example lets say I have a particular .TTF file. And I want to use this file on a particular webpage. Now with all browsers processing differen

Solution 1:

Create the font folder and save all the font files

    @font-face {
        font-family: 'Archer-Semibold';
        src: url('fonts/archer-semibold-pro.eot');
        src: url('fonts/archer-semibold-pro.eot?#iefix') format('embedded-opentype'),
                 url('fonts/archer-semibold-pro.woff') format('woff'),
                 url('fonts/archer-semibold-pro.ttf') format('truetype'),
                 url('fonts/archer-semibold-pro.svg#archer-semibold-pro') format('svg');
        font-weight: normal;
        font-style: normal;
    }

.menu {
  font-family: Archer-Semibold;
}

url('fonts/archer-semibold-pro.eot') is use for IE 9 and url('fonts/archer-semibold-pro.eot?#iefix') is used for IE 6 to 8

Solution 2:

This page should help you.

You declare your new font with:

@font-face { 
  font-family: Delicious; 
  src: url('Delicious-Roman.otf'); 
} 

Then reference it with

h1 {
  font-family: Delicious;
}

Solution 3:

If you have a .ttf-file that you own, you can go to a site that will make web fonts for you (for instance font-squirrel: http://www.fontsquirrel.com/fontface/generator).

You'll get a zip with the fonts, a CSS-file with some font-face declerations. That should get you started.

Solution 4:

Use the @font-face

@font-face {
    font-family:font-name;
    src: url(path-to-font/font-name);
} 

Solution 5:

Try this:

@charset "utf-8";       //file encoding

@font-face {
font-family: 'GoodDogRegular';
src: local("GoodDog Regular");
url('fonts/gooddog-webfont.ttf') format('truetype'),
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;
}