Editing Using Web Fonts (section)

=== Using Google fonts ===

==== Per-page basis ====

* Go to [https://www.google.com/fonts Google Fonts]
* Browse, search and select font families.
* To use a font family, either click the '''Quick Use''' button ([[file:Google-fonts-quick-use.jpg]]).
* 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. 

<syntaxhighlight lang="css" highlight="2,3">
p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}
</syntaxhighlight>

See also: [https://femmebot.github.io/google-type/ 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.

<syntaxhighlight lang="css">
@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');
}
</syntaxhighlight>

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

<syntaxhighlight lang="css">
p { 
    font-family: Roboto, sans-serif;
    font-weight: 500;
}
</syntaxhighlight>