The Easy Way to Add Fonts to Your Website (Including Custom Fonts)
Adding a unique font to your website is a great way to make your design stand out online.
In this article, I will walk you through the step-by-step process for adding any font to your website.
Note: because websites are not all built and managed the same way, I will introduce the most universal approach for adding custom fonts and then explain how the most popular website building platforms support custom fonts.
Google fonts boast an impressive library of close to 1000 libre license fonts that can be browsed via their interactive web directory. Because of their Developer API, Google Fonts are arguably the easiest fonts to add to your site and where I would recommending starting your search.
Adobe Fonts, (previously Typekit) provides a collection of +14,000 stunning fonts. The new and improved service now provides Creative Cloud subscribers subscribers with easy access to their entire library of fonts through the click of a button. Unlike Typekit, Adobe Fonts has removed limits on page views and has made all their fonts accessible for both desktop and web use.
The Webfont Generator allows you to convert any font that you legally own the rights to (.ttf or .otf file format) and convert it into a usable WebFont Kit that includes an easy-to-use Cascading Style Sheet (CSS).
Different Font Formats and Browser Support
Over the past few years, modern browsers have dramatically improved how they support custom fonts. However, even today, not all formats are supported on every browser.
Here are the most popular browsers and what font format they currently support:
I’d always recommend using TTF/OTF and WOFF to ensure that your fonts are supported across all browsers.
For more details on supported font formats, try Can I Use – A great tool for researching feature compatibility across different browser versions (FREE).
How to add custom fonts to your website using @font-face
The @font-face CSS rule explained below is the most common approach for adding custom fonts to a website.
Step 1: Download the font
Find the custom font you want to use on your website, and then download the TrueType Font file format (.ttf). You can also download the OpenType Font format (.otf)
Step 2: Create a WebFont Kit for cross-browsing
Upload your .ttf or .otf file to the Webfont Generator and then download your Web Font Kit.
Step 3: Upload the font files to your website
Using your FTP or file manager, upload all the font files found within your Web Font Kit to your website.* Typically this kit will include multiple file extensions such as (.eot), (.woff), (.woff2), (.ttf) and (.svg).
Your kit will also include a Cascading Style Sheet (.css) that you will need to update and upload in step 4.
*This step will vary greatly based upon how your website is built and hosted.
Step 4: Update and upload your CSS file
Open the CSS file in a text editor such as Textedit, NotePad or Sublime.
Replace the existing source URL with the new URL you created by uploading each file.
By default, the source URL location is set within the downloaded Web Font Kit. It needs to be replaced by the location on your server.
Generally speaking, the 5 step process shown above will be the default approach when adding a custom font to a CMS. Although the process might seem pretty straightforward for people experienced with manipulating code, novice users will often look for an alternative.
If you are using WP and don’t have any experience editing the source code (theme files), you will most likely want to rely on a typography plugin. Plugins make it easier to add custom fonts without having to write any code yourself.
The only thing I caution about when using WP plugins is that they can cause a variety of issues on your website. It’s important to always research plugins before using them on your site.
Finally, because Google Fonts offers a developer API, you can also choose to “manually add” those fonts to your theme using the functions.php file.
As you can see, each website builder uses a different approach for adding fonts that can range from very easy to somewhat complicated.
In most cases, when looking to add a custom font that does not exist within Google Fonts, you will need to edit the CSS on your website. This process can be dramatically different based on the website builder you decide to use.
I’d recommend searching through their respective knowledge bases and community forums for more information.
Regardless of your experience with CSS, following the instructions in this article will give you the ability to add any font to any website building platform.
However, once you’ve successfully added the font you wanted to your website, the questions you need to ask are:
Do you have the ability to customize the look of the font? (font weight, color, line-height, letter spacing, opacity, etc)Can you customize the layout of your site to make the font stand-out(position of text, images, videos, etc)
If you don’t have extensive experience with CSS, these customizations can be very challenging when using a CMS or a rigid template based website builder like SquareSpace.
We use analytics to understand the usage, to improve user experience and to measure the performance of our website. We anonymise any information we may collate so we can’t identify you personally.