Question

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 different fonts differently is it possible in CSS to add the “font file” in the font-family tag.

I’m sorry if this is unsolvable or unbelievably simple I’m a newbie to CSS.

Answer 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