Reputation: 8426
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
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
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
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
Reputation: 36794
Use the @font-face
@font-face {
font-family:font-name;
src: url(path-to-font/font-name);
}
Upvotes: 2