The CSS @font-face Rule
CSS @font-face rules allow the introduction of new font family identifiers and new font families into CSS that can be used to render HTML content for the site. This example is from w3 TryIt™ The @font-face Rule
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Using the Google Font API
Google Font API Documentation
See the documentation for a complete list of fonts available through the Google Fonts API.
Google Font API documentation is available from both Google and from W3 Schools.
- Google font API Documentation from Google: Google Fonts from the Google Developers portal.
- Google Fonts API documentation from W3 Schools How-To collection.
Example using the Google Font Alef
In order to use the Alef font family from the Google Font API, simply insert the following two lines of HTML into the <head> element of the HTML document where you wish to apply the font.
<link href="https://fonts.googleapis.com/css?family=Alef" rel="stylesheet">
<style>body { font-family: "Alef";font-size: 22px } </style>
This example is defined in the W3 Schools TryIt™ font=alef example.
Google Font Pairings Defined at W3 Schools
The Google Fonts API Article from W3 Schools section entitiled How TO - Google Font Pairings defines some commonly usable font pairs that are suggested for use together within web pages and sites. Below we show the CSS code to use these fonts within HTML cotent.
Font Pair: Ubuntu / Lora Font (UL)
As shown in the TryIt™ example for Font Pair UL
The following snippet can be placed in the <head> section of an HTML document to make available the Ubuntu and Lora font families from the Google Font API.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Lora">
<style>
body {
font-family: Lora, serif;
font-size: 16px;
}
h1 {
font-family: Ubuntu, sans-serif;
font-size: 46px;
}
</style>
Font Pair: Space Mono / Muli (SMM)
The following HTML code is taken from the W3 Schools Google Font Pairing example(s) at w3TryIt™ Font Pair example Space Mono / Muli (SMM)
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono|Muli">
<style>
body {
font-family: Muli, sans-serif;
font-size: 16px;
}
h1 {
font-family: "Space Mono", monospace;
font-size: 46px;
}
</style>