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

Per-page basis

• 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

Adding Google fonts to global stylesheet

In a Sass file, add a @font-face definition for the font, along with its style variations.

In the example below, ital => 0 translates to "normal", i.e. non-italic. font-style: italic would require ital => 1.

Similarly, wght => 400 provides a regular weight, while wght => 700 provides the bold variation of the font.

The URLs below use fonts served by Google's CDN. Adjust the url value accordingly if the fonts are downloaded locally.

@font-face {
	src: local('Roboto'), local('Roboto-Regular'),
	url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400&display=swap');
}
@font-face {
	src: local('Roboto'), local('Roboto-Medium'),
		url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500&display=swap');
}
@font-face {
	src: local('Roboto'), local('Roboto-Bold'),
	url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700&display=swap');
}

With the above fonts being added to the stylesheet, they can be applied to elements.

p { 
    font-family: Roboto, sans-serif;
    font-weight: 500;
}

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