Custom typography is a great way to spruce up your website design. Unique fonts can be used to show your business’s own style and personality.
Thanks to services like Google Fonts, these days anyone can add custom fonts to their WordPress website easily. Google Fonts is a repository of open-source fonts that are easy to read on small screens and which cache well to speed up page load times.
In this post, I will share my simple 2 step strategy for setting up your website typography the right way.
Step #1 – Choose your fonts wisely
To ensure that your website looks professional, it is recommended to limit the number of font families used to a maximum of two. Also stick to the same fonts throughout the entire website. Ensure the font families selected complement each other.
I generally select one font for the content and the other for the headings. Content fonts should be clean and easy to read. Whereas title fonts should be used for maximum impact and to draw attention to specific areas of your site. For example, you could use a bold or serif font for your headlines so they stand out. Use a simple sans serif font for body copy so it’s easy to scan, even on a smartphone.
FontPair is a great tool you can use to help you find font pairs that complement each other. It gives you hundreds of pre-selected font pairs and also suggests matching fonts for any specific font you prefer. If you are still working out your branding, then this tool will give you the start you need to iron out the typography.
Step #2 – Setup your fonts correctly in WordPress
There are many ways to integrate Google Fonts into your WordPress site. If you are tech savvy and is comfortable with playing with code, then the recommended way is to upload the fonts locally to your website. I hope to cover this in a future blog post.
If you are not the most tech-savvy, don’t worry, there are still many plugins available that you can use to implement Google Fonts into your WordPress website easily. One of the most popular plugins, is Easy Google Fonts.
The plugin adds a typography menu in the WordPress Customisation section of the dashboard. From here you can select font families, styles, color, and other text elements for each type of header and text in your site theme. You can see a real-time preview of the changes you make. To change text elements that aren’t part of your theme’s default controls, Easy Google Fonts allows you to create your own font controls that will show up in the Typography menu.
So my recommendation is to avoid doing font changes on your theme or on your page builders. Instead, install the Easy Google Fonts plugin and then use the plugin to set up the fonts for the website. Controlling the typography centrally helps to keep things clean and simple.
In conclusion, wisely selected fonts that are implemented to optimise for fast load times will keep visitors coming back to your website. Try and see the difference.