Creating a website can be an overwhelming experience. There are so many options to choose from platforms, styles, to colours and fonts.
If you decided to go ahead and create a WordPress site, you may be wondering how do I add custom fonts to my site to make it unique and stand out from the crowd? Or perhaps you already created a brand identity and want to use your preferred fonts. Whatever your motivation is, I got you covered.
Google Fonts are awesome. Not only there are hundreds of options to choose from including different variants and font weights but more important they are free to use!
There are different methods you can use to add these fonts to your site which are listed below.
Some modern themes have the built-in functionality that allows you to add Google Fonts by default. However, if you’re using a custom theme or one that does not offer this option within the customizer, there are many plugin options you can use.
One of the plugins you can use is Fonts Plugin | Google Fonts Typography. It’s pretty simple to use, first you’ll need to download the plugin from the repository or just install it from the Plugins section in WordPress. Then go ahead and activate it. Once the plugin is active, you’ll need to head over to the customizer > Fonts Plugins > Basic Settings.
Within the Basic Settings, you’ll choose the Base Typography that will be used on the site for the Content, Headings, Buttons and Inputs by clicking on the dropdown menu and then selecting your desired font option. However, you can change these options or set different rules for your menu, branding, footer, or each heading type (h1, h2 and so on).
Please note that just because you can choose different font families or even a different font family per option doesn’t mean you should. Loading multiple fonts can impact on the site’s performance making your site slow. It’s recommended to stick to one or two fonts if possible.
Another amazing feature about this plugin is that you can also use it to add Adobe Fonts (Typekit) to your website. All, you’ll need to do is to generate an API Key here https://fonts.adobe.com/account/tokens which will allow you to retrieve the Typekit fonts.
To add the fonts manually, you’ll need to make some changes to the theme’s header as well as adding some custom CSS. This method is less user friendly and depending on how tech savvy you are, it may be a bit complex so I wouldn’t recommend it unless you know what you’re doing.
Adding Google Fonts is really easy and straightforward but what happens if you purchase a font and would like to add it to your website? Well, it turns out this also something you can achieve.
This method is useful if you’ve acquired and downloaded a font from a site such as Creative Market or Design Bundles (to name a few). A word of caution here, make sure you have the appropriate licence to use the fonts on your website (please note that this is not legal advice).
There are a few plugins that will help with this, but my favourite is Custom Fonts. You can download the plugin for free from the WordPress Repository or from the Plugins section within your wp-admin dashboard. Go ahead and deactivate it and then you’ll need to upload the files. To do so go to Appearance > Custom Fonts.
Enter the Font Name then the Font Fallback name. Font fallback is the font that will be loaded if the selected font is not available. I recommend choosing a web safe font such as Arial, Tahoma, Verdana, Baskerville. Under Font Display, choose your preferred option.
Upload the file under the correct file extension option. For example, if you have a .otf file, you’ll upload the file under Font .otf. If you have different font weights available (Thin, Normal, Semiblod, etc) select the correct one before hitting Add Font Variation. Otherwise, click Add New Font.
Once everything has been setup and the font added, all you need to do is add some CSS code and voila!
If you are using the free version of Elementor, the font will be available as an option within the fonts dropdown menu
I hope you have enjoyed the article. I will be creating more content for entrepreneurs looking for designed related resources, tutorials and information. You can subscribe to our mailing list to be notified of our next releases.