HTML and CSS Reference
In-Depth Information
1.
Download some fonts you want to use. Generally, they will be in .otf or .ttf
format, but either will do.
2.
3.
Click the Add Fonts button, and select one of your font files. Repeat this
step until you've added all the fonts you need to the list.
4.
Select the “Yes, the fonts I'm uploading are legally eligible for web embed-
ding” check box. The fonts I chose from Font Squirrel are free for commercial
web use, but you'll find many that are not, so be careful here.
5.
Click the Download Your Kit button, and save the resulting ZIP download
to a location you'll remember.
At this point you'll have a ZIP file full of different format fonts, HTML, CSS, and
other shizzle. For each font you want to use, copy the font files (.eot, .svg, .ttf, and
.woff ) to a fo nt s su b d i re c to r y i in yo u r .woff) r k i in g d i re c to r y. T h e in o p e in
stylesheet.css
and copy all the CSS from there to the top of your CSS. It needs to be at the top so
the fonts will be available when you apply them later on. At the top of
main-style.
css
in my King Arthur example, you'll find one of these structures for each font:
@font-face {
: ;
: ;
: )
p
format('embedded-opentype'),
) ,
) ,
)
p
format('svg');
: ;
: ;
}
