Modifying titles using CSS

I'm used to building websites using WordPress, where you have far greater control over fonts, presentation and CSS in general. Whilst I appreciate the simplicity of Google Sites, there are some features not present in the platform which I miss; one of which is the ability to be a little more creative where fonts are concerned. Hence, this experiment.

Basically I wanted to see if I could apply the letter-spacing element to a h1 element, to make the titles a little more unique. In it's current form, you can't do this natively in Google Sites so I had to fudge it using the Embed element. (And it is a fudge).

The CSS for WordPress

In WordPress I would have added this CSS class to the Additional CSS box using the Customizer:

h1 {

font-size: 1rem; 

font-family: 'Inter', sans-serif; 

color: #000000; 

letter-spacing: -0.075em;

margin: 1em 0 0 0;

}

This would give me the reduced letter spacing on the h1 heading which is what I was after. (Like the title on this web page). The standard header (non-fudged) version is on the Standard Header page so you can see the difference.

Embedding CSS into Google Sites

I created the CSS and HTML I wanted to use and pasted them into an Embed box at the top of a page. Note, I didn't use any type of header, I just had a full width Embed box at the top of the page. 

Any html you paste into the Embed box does not inherit the Google Site CSS so you have to include your own, even the Google font if you want to use one. This is not good practice: it works, but it's slow. That means the html and CSS now look like this:

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');

h1 {

font-size: 1rem; 

font-family: 'Inter', sans-serif; 

color: #000000; 

letter-spacing: -0.075em; 

margin: 1em 0 0 0;

}

</style>

<h1>Using CSS media queries in Google Sites</h1>

My main concern was that using the @import approach would impact performance; I'll check that later using GTMetrix.

That kinda worked...

Using the code above works, but there's a flaw in this cunning plan. 

You lose any element of responsive font resizing (normally done by Google Sites) in the Embed box, because you're effectively executing a self contained bit of HTML. That means whatever size display you're using you get a mahoosive 5rem sized text. Not good.

So, it's media queries to the rescue.

Media queries

Media queries allow you to apply logic to CSS. There's a great primer on media queries right here. A quick bit of research and I modified my embedded html and CSS thus:

<style>

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap');

h1 {font-size: 1rem; font-family: 'Rubik', sans-serif; color: #000000; letter-spacing: -0.075em; margin: 1em 0;}

@media screen and (max-width: 600px) {h1{font-size: 1.6em;}}

@media screen and (min-width: 600px) {h1{font-size: 2.6em;}}

@media screen and (min-width: 768px) {h1{font-size: 2.6em;}}

@media screen and (min-width: 896px) {h1{font-size: 4em;}}

@media screen and (min-width: 1020px) {h1{font-size: 5m;}}

</style>

<h1>Using CSS media queries in Google Sites</h1>

And hey presto. A responsive, modified heading in your Google Site. Here's a screenshot of a standard title (top) against a custom CSS version:

You said something about performance?

Yup. Time to check this page with GTMetrix and see what's what. Here's the GTMetrix analyzer results for this page. Not too shabby, all things considered.

The result

Anyhoo - as an experiment it worked out. I can now customise a page header using CSS and media queries, although there are trade-offs inasmuch that you don't get the functionality associated with Cover, Banner and Titles at the top of your page (e.g., background images). Good to know though!

Hope you find this useful. If I can help you with Google Sites then by all means drop me a line.