How to Use Custom Google Fonts on Static Pages
To use Google Fonts on a static page, please follow these steps.
Create or open a static page.
Add content to the page. The text shown below will be used as an example:
- - - - - -
Universe
The physical Universe is defined as all of space and time (collectively referred to as spacetime) and their contents. Such contents comprise all of the energy in its various forms, including electromagnetic radiation and matter, and therefore planets, moons, stars, galaxies, and the contents of intergalactic space.
- - - - - -
Once the text has been added, click on the "Code View" icon:
If desired, add a class for each section to use different Google fonts:
Example code:
1.
<h2 class="myTitle">Universe</h2>
2.
<p class="myParagraph1">The physical Universe is defined as all of space and time (collectively referred to as spacetime) and their contents. Such contents comprise all of energy in its various forms, including electromagnetic radiation and matter, and therefore planets, moons, stars, galaxies, and the contents of intergalactic space.</p>
We recommend to Save the Web Page at this point.
On the browser open up a different tab to check the different available fonts in Google Fonts.
Once a font has been selected. Copy this embed code in the Advanced >> HEAD section of the static page:
Paste code into the Customize Page Level HEAD Tags by navigating to the advanced tab:
In this example, the Nanum Gothic font family will also be used:
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
Now, enter the following CSS in the Customize Page Level CSS Styles section
CSS:
.myTitle {
font-family: 'Calistoga', cursive;
}
.myParagraph1 {
font-family: 'Alata', sans-serif;
}
This is what the page will look like after saving the changes:
To add one Google Font for the whole page, use a <div></div> with a class. For example, this code:
Example:
<div class="fullPage"> <p><span style="font-size: 36px;">Universe</span></p> <p>The physical Universe is defined as all of space and time (collectively referred to as spacetime) and their contents. Such contents comprise all of energy in its various forms, including electromagnetic radiation and matter, and therefore planets, moons, stars, galaxies, and the contents of intergalactic space.</p> </div>
CSS code:
.fullPage {
font-family: 'Alata', sans-serif;
}
