Last edited on July 9, 2021
You can add more fonts using Google Fonts by using the Code Injection feature.
Go to Google Fonts, select the font that you like:
Copy the code to import fonts from Google Fonts
Go to Settings > Code Injection, then paste the Google Fonts Code from Step 1
Paste in the code from Google Fonts to Settings > Code Injection
Below your pasted code above, add styling to the .content span
element to cover the whole page.
Copy the CSS font style from Google Fonts:
Then compose your CSS code like this:
<style>
.content span {
font-family: 'Dancing Script', cursive;
}
</style>
Then paste it below your code in Site Header.
Press Update Settings to show the changes.
Anything you add via Code Injection will not be reflected in the editor. Please publish your site and open the published version to see the changes.
For reference:
Here's the whole code that you need in Site Header:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected];600&display=swap" rel="stylesheet">
<style>
.content span {
font-family: 'Dancing Script', cursive;
}
</style>
Here's how your Site Header should look like in the end: