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

Using Google fonts

• Go to Google Fonts
• Browse, search and select font families.
• To use a font family, either click the Quick Use button ().
• Select the styles that will be used.
• Scroll down to Step 3 to get the URL to the font.
• Add the URL to a PHP Littled-based site with PageConfig::register_stylesheet("<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>");
• Use the value of the family property in the URL above as the value for the font-family property to apply it to CSS elements.

p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}

See also: Google font pairings 25x52

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