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.
- What fonts can be used on the Web?
- Different font formats and browser support
- How to add custom fonts using @font-face (CSS rule)
- How Content Management Systems support custom fonts
- How website builders support custom fonts
What fonts can be used on the Web?
Technically speaking, you can add just about any font to any website.
However, when searching for a font online, you always want to keep in mind the price, the license agreement, and the installation method.
Without further ado, here are some of the most popular font libraries to help you find that perfect font:
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.
Related: Top 20 most popular Google Fonts
Adobe Typekit is an online subscription-based service that gives users access to thousands of fonts under a single licensing agreement. Their free plan gives access to 950+ fonts while their premium plans give access to 7,500+ fonts.
Note: All plans include pageview limits ranging from 25k views/month to 1 million views/month.
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.
Here’s a quick example:
src: url("CustomFont.woff") format("woff"),
src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
Once you’ve updated the CSS file, you need to upload it to your website (server).
Step 5: Use the custom font in your CSS declarations
Now that your Cascading Style Sheet and font files are uploaded to your server, you can start using your custom font in your CSS declarations to help improve the look of the HTML.
This can be done in multiple ways, including adding site-wide declarations to your main CSS file.
Here is a quick example:
font-family: 'CustomFont', Arial, sans-serif;
How to add fonts in popular website building tools
Content Management Systems (WordPress, Drupal, Joomla, etc.)
There are a few different ways you can add custom fonts to a Content Management System (CMS) like WordPress (WP):
- Adding custom fonts using @font-face CSS
- Add fonts using a WordPress plugin
- Manually adding fonts from Google Fonts
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.
Website Builders (PageCloud, Squarespace, Wix, Weebly)
There are a ton of website builder options online that manage custom fonts in different ways.
For the most part, the top website builders make it pretty easy to add fonts from popular sites like Google Fonts.
For example, with PageCloud, adding a font from Google couldn’t be easier. All you need to do is copy and paste the font, and voila, your font is added to your page and ready to be styled in any way!
However, not all website builders make it this easy to add a Google Font.
For example, adding a Google Font in Weebly will require you to edit the source code (CSS) of your website. They explain the 8 step process in their knowledge base.
Here is a short list of the top website builders and how they manage Google Fonts:
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.
For example, the process of adding a custom font with PageCloud is very similar to the step-by-step guide provided above.
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.
This is why I’d recommend using a flexible website builder like PageCloud that gives you unrivalled flexibility when looking to create a unique layout with virtually unlimited style and font options.