CODEWITHSUNDEEP
htmlcss
cjds
cjds

Reputation: 8426

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 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.

Upvotes: 0

Views: 2349

Answers (5)

vusan
vusan

Reputation: 5331

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

Upvotes: 5

peirix
peirix

Reputation: 37771

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.

Upvotes: 3

palaѕн
palaѕн

Reputation: 73966

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;
}

Upvotes: 2

George
George

Reputation: 36794

Use the @font-face

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

Upvotes: 2

Andy
Andy

Reputation: 14575

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;
}

Upvotes: 3

Related Questions