Fonts

Update Feb 2023:  Sites now allows you to select your own fonts.  However, the information below is still relevant as it will allow you to select font colors, backgrounds, text shadows etc. either with a little knowledge of css or with some searched code pasted.

The limited font choices within Google Sites help keeps designs clean.  However, there may be times when a touch of a fanciful font can really lift your page.

This quote from Alice in Wonderland has been added by using embedded code and Google Fonts.  See the short video below for a quick demonstration, or copy the code below and have a go.

Embed Code:

https://editor.primary-apps.com/googlesites-fonts.htmls


<link href="https://fonts.googleapis.com/css?family=Ruge+Boogie&display=swap" rel="stylesheet"><style>p{border-radius:12px;padding:12px;color:royalblue;background-color:aliceblue;font-size:50px;font-family: 'Ruge Boogie', cursive;text-align:center;}</style><p>“And what is the use of a book,” thought Alice, “without pictures or conversation?”</p>

Web fonts allow your browser to get the font needed from the cloud rather then rely on the viewer having it installed in their operating system.  Google have a comprehensive web font library that we can use with Google Sites.

http://fonts.google.com

How to use Google Fonts in Google Sites

How to use any Google Font with the above text code.

<link href="https://fonts.googleapis.com/css?family=Wallpoet&display=swap" rel="stylesheet">

<style>

p{

border-radius:12px;

padding:12px;

color:grey;

background:linear-gradient(to top left,lightgrey,ghostwhite,lightgrey,ghostwhite,lightgrey,ghostwhite);

text-shadow:-1px -1px black, 1px 1px white;

font-size:60px;

font-family: 'Wallpoet', cursive;

text-align:center;

}

</style>

<p>

"And what is the use of a book," thought Alice, "without pictures or conversation?"

</p>