Using Web Fonts

Implementation

First add the fonts themselves with the @font-face rule:

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
		url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
		url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
		url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Then the font maybe references as a value for the font-family property:

p {
	font-family: 'MyWebFont', sans-serif;
}

Web font formats

format	extension	description	target platform
eot	.eot
woff	.woff
truetype	.ttf
svg	.svg

Examples

• Barchowsky Fluent Handwriting website - The menu items and the H1 tags are rendered using GoudySans-Bold.

Links

Resources

• Using @font-face - CSS Tricks