Styling Your Google Site with Custom Fonts and Colors
TL;DR:
- Google Sites offers access to hundreds of Google Fonts to customise your site's typography
- You can apply exact brand colours using hex codes or choose from preset colour palettes
- Font and colour changes apply site-wide, but settings don't save for future projects
- The styling options are limited compared to other platforms but cover the basics well
- Changes preview in real-time as you make them
Google Sites gives you decent control over your site's visual appearance through font and colour customisation. The interface is straightforward, though you'll need to reapply your choices for each new site you create.
Setting Up Custom Fonts
The font options in Google Sites are actually quite good. You get access to the full Google Fonts library, which includes hundreds of typefaces.
To change your fonts:
- Open your site in the Google Sites editor
- Click the Themes tab in the right panel
- Select Fonts from the menu
- Browse the available fonts or use the search bar
- Click on any font to preview it across your site
- Hit Done when you're happy with your choice
The font will apply to all text on your site automatically. Google Sites handles the technical side of loading the fonts, so you don't need to worry about performance or compatibility issues.
Font selection tips:
- Stick to fonts that are easy to read on screens
- Avoid decorative fonts for body text
- Test how your chosen font looks on mobile devices
- Consider your audience – formal sites need different fonts than creative ones
Customising Site Colours
Google Sites lets you adjust colours through a simple interface. You can either pick from preset palettes or input specific hex codes for exact brand matching.
To change your colours:
- In the Themes panel, click Colors
- Choose from the suggested colour combinations, or
- Click Custom to input your own hex codes
- Apply colours to different elements (backgrounds, text, accent colours)
- Preview changes in real-time
The colour system works well for most basic needs. You can set a primary colour, secondary colour, and background colour that will apply consistently across your site.
Getting the best results:
- Use hex codes if you have specific brand colours
- Ensure good contrast between text and background colours
- Test your colour choices on different devices
- Keep accessibility in mind – not everyone sees colours the same way
Working with Google Sites' Limitations
Google Sites keeps things simple, but this means fewer options than you'd get with other website builders. Here's what you need to know:
What works well:
- Font changes apply instantly across your entire site
- Colour adjustments are consistent and professional-looking
- The interface is beginner-friendly
- No technical knowledge required
What's frustrating:
- You can't save custom themes for future use
- Limited control over individual page elements
- No advanced typography options (line spacing, font weights)
- Colour options are more basic than professional design tools
Workarounds for common issues:
- Document your hex codes and font choices for future sites
- Use Google Sites' built-in themes as starting points
- Focus on readability over fancy design elements
- Test your site thoroughly after making changes
Making Your Styling Choices Count
Since you can't save custom themes, it's worth getting your styling right the first time. Think about your brand or personal style before you start clicking through options.
Planning your approach:
- Know your brand colours (hex codes) before you start
- Consider your target audience and site purpose
- Look at similar sites for inspiration
- Keep mobile users in mind
Testing your changes:
- View your site on different screen sizes
- Ask others for feedback on readability
- Check that your colour choices work for all content types
- Make sure your styling doesn't clash with any images you're using
FAQs
Can I use fonts that aren't in Google Fonts?
No, Google Sites only supports fonts from the Google Fonts library. You can't upload custom fonts or use system fonts.
Do my font and colour choices affect my site's loading speed?
Google handles font loading automatically, so there's minimal impact on performance. The colour choices don't affect loading speed at all.
Can I have different fonts on different pages?
No, font choices apply to your entire site. You can't set different fonts for individual pages.
What happens if I change my mind about colours later?
You can change colours anytime through the Themes panel. Changes apply immediately across your whole site.
Are there any accessibility considerations for fonts and colours?
Yes, ensure good contrast between text and background colours. Avoid fonts that are difficult to read, especially for body text.
Jargon Buster
Google Fonts – A free library of web fonts that Google hosts and maintains, designed to work well on websites
Hex codes – Six-character codes (like #FF0000 for red) that specify exact colours for web design
Themes – Pre-designed combinations of fonts, colours, and layouts that you can apply to your site
Contrast – The difference between text colour and background colour, important for readability
Typography – The art and technique of arranging text in a readable and visually appealing way
Wrap-up
Google Sites gives you the essential tools to make your site look professional through font and colour customisation. While the options aren't as extensive as dedicated design platforms, they cover what most people need for a clean, branded website.
The key is planning your choices beforehand and accepting the platform's limitations. Document your settings so you can recreate them for future sites, and focus on readability and consistency rather than complex design elements.
Your styling choices should support your content, not distract from it. With the right fonts and colours, your Google Site can look polished and professional without requiring any technical expertise.
Ready to take your website skills further? Join thousands of others learning practical web design and development techniques at Pixelhaze Academy.