×
☰
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.
Want an easy way to identify fonts on any webpage? Install Design Sidekick from the Chrome store to instantly find out what fonts are used on a website, and save those fonts for later!
Contents:
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
/blogmerge/f5803697-e536-4ed4-bb3a-ae324097deec.jpeg)
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.
Note: Creative Cloud Subscriptions (with Adobe Fonts) start at $20,99 /month.
/web/da3b7fc4-d03e-4b58-f65c-1e20cdff4855.png)
On top of offering a selection of free fonts licensed for commercial work, Font Squirrel is well known for their Font Identifier and Font Generator.
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).
/blogmerge/ef3f30d6-0d21-43cf-a857-068f8ddb91fe.jpeg)
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:
/blogmerge/c738a044-dcdd-4185-b98d-956c421becb6.jpeg)
(source: https://www.w3schools.com/Css/css3_fonts.asp)
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).
The @font-face CSS rule explained below is the most common approach for adding custom fonts to a website.
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)
Upload your .ttf or .otf file to the Webfont Generator and then download your Web Font Kit.
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.
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:
Before update:
@font-face {
font-family: “CustomFont”;
src: url(“CustomFont.eot”);
src: url(“CustomFont.woff”) format(“woff”),
url(“CustomFont.otf”) format(“opentype”),
url(“CustomFont.svg#filename”) format(“svg”);
}
After update:
@font-face {
font-family: “CustomFont”;
src: url(“https://yoursite.com/css/fonts/CustomFont.eot“);
src: url(“https://yoursite.com/css/fonts/CustomFont.woff“) format(“woff”),
url(“https://yoursite.com/css/fonts/CustomFont.otf“) format(“opentype”),
url(“https://yoursite.com/css/fonts/CustomFont.svg#filename“) format(“svg”);
}
Once you’ve updated the CSS file, you need to upload it to your website (server).
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:
h1 {
font-family: ‘CustomFont’, Arial, sans-serif;
font-weight:normal;
font-style:normal;
}
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 CSSAdd 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.
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.
/blogmerge/e7eabfd7-375c-404f-aecb-704ae9504388.jpeg)
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.
/web/pagecloud-blog-ad-2022-1-r3882.jpg)
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.
Source: Pagecloud
Blogs
