Ways to Add Fonts to Your Website Effectively
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 to add any font to your website.
Note: because websites aren't built and managed the same way, I'll cover the most common approach to adding custom fonts and then explain how the platforms build websites. most popular custom font support.
What fonts can be used on the Web?
Technically, you can add any font to any web page.
However, when looking for a font online, you always want to keep the price, license agreement, and installation method in mind.
Without further ado, here are some of the most popular font libraries to help you find that perfect font:
Google Fonts (FREE)
Google Fonts boasts an impressive library of almost 1000 libre license fonts that can be browsed through their interactive web directory. Because of their Developer API, Google Fonts is arguably the easiest font to add to your site and where I recommend you start your search.
Adobe Fonts (Premium)
Adobe Fonts, (formerly Typekit) offers a collection of +14,000 beautiful fonts. The new and improved service now offers Creative Cloud subscribers easy access to their entire font library at the click of a button. Unlike Typekit, Adobe Fonts has removed the restrictions on page views and has made all of their fonts accessible for both desktop and web use.
Custom Fonts
In addition to offering a selection of licensed free fonts for commercial work, Font Squirrel is best known for its Font Identifier and Font Generator.
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 Toolkit that includes the Layout easy to use cascading style (CSS).
Various Font Formats and Browser Support
Over the past few years, modern browsers have greatly improved the way they support custom fonts. However, even today, not all formats are supported on every browser.
Here are the most popular browsers and the font formats they currently support:
I always recommend using TTF/OTF and WOFF to ensure that your fonts are supported on all browsers.
For more details on supported font formats, try Can I Use – A great tool to research 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 (.ttf) file format. You can also download the OpenType Font format (.otf)
Step 2: Create a WebFont Set for Cross-Browsing
Upload your .ttf or .otf file to Webfont Generator and then download your Web Font Set.
Step 3: Upload the font files to your website
Using FTP or your file manager, upload all the font files found in your Web Font Set to your website. * Typically, this set will include multiple file extensions such as (.eot), (.woff), (.woff2), (.ttf) and (.svg).
Your set will also include the Cascade Style Sheet (.css) which you will need to update and upload in step 4.
* This step will vary greatly based on how your site is built and hosted.
Step 4: Update and Upload Your CSS File
Open the CSS file in a text editor like Textedit, NotePad or Sublime.
Replace the current source URL with the new URL you created by uploading each file.
By default, the source URL location is set in the downloaded Web Font Set. It needs to be replaced by the location on your server.
Here is a quick example:
Before updating:
@ font-face {
font-family: “CustomFont”;
src: url (“CustomFont.eot”);
format src: url (“CustomFont.woff”) (“woff”),
url (“CustomFont.otf”) (“opentype”),
url (“CustomFont.svg # filename”) format (“svg”);
}
After updating:
@ 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”); }https : // yoursite . com / css / font / CustomFont . eot “);https : // yoursite . com / css / font / CustomFont . woff “) format (“woff”),https : // yoursite . com / css / font / CustomFont . format otf “) (” opentype “), https : // yoursite . com / css / fonts / CustomFont . format svg # filename “) (“svg”);
Once you have updated the CSS file, you need to upload it to your website (server).
Step 5: Use a custom font in your CSS declaration
Now that your Cascading font and font files are uploaded to your server, you can start using custom fonts in your CSS declarations to help improve the look and feel of your HTML.
This can be done in several ways, including adding page-wide declarations to your main CSS file.
Here is a quick example:
h1 {
font-family: ‘CustomFont’, Arial, sans-serif;
font-weight: normal;
font: normal;
}
How to add fonts in popular website builders
Content Management System (WordPress, Drupal, Joomla, etc.)
There are a few different ways you can add custom fonts to a Content Management System (CMS) like WordPress (WP):
Add custom fonts with fonts CSSAdd font-face using the WordPress plugin Add fonts manually from Google Fonts
In general, the 5-step process shown above will be the default approach when adding custom fonts to the CMS. While the process may seem fairly straightforward to those experienced with manipulating code, novice users will often look for an alternative.
If you are using WP and don't have any experience in editing source code (theme files), you will most likely want to rely on a typography plugin. The plugin makes it easy to add custom fonts without having to write any code yourself.
The only thing I would caution about using WP plugins is that they can cause various problems on your site. It is important to always research plugins before using them on your site.
Finally, since Google Fonts provides a developer API, you can also choose to manually add those fonts to your theme using the .php file.
Website Builder (PageCloud, Squarespace, Wix, Weebly)
There are many online website builder options that manage custom fonts in a variety of ways.
Google Fonts
For the most part, top website builders make it easy to add fonts from popular sites like Google Fonts.
For example, with PageCloud, adding fonts 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 any way!
However, not all website builders easily add Google Fonts.
For example, adding Google Fonts in Weebly will require you to edit the source code (CSS) of your site. 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:
- PageCloud
- SquareSpace
- Wix
- Weebly
- Shopify
- Webflow
As you can see, each website builder uses a different approach to adding fonts that can range from very easy to somewhat complex.
Custom fonts
In most cases, when looking to add a custom font that doesn't exist in Google Fonts, you'll need to edit the CSS on your site. This process can vary significantly based on the website builder you decide to use.
I recommend searching through their respective knowledge bases and community forums for more information.
For example, the process for adding custom fonts with PageCloud is very similar to the step-by-step instructions provided above.
Summary
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 have successfully added the font you want to your site, the questions you need to ask are:
Do you have the ability to customize the look and feel of the font? (font weight, color, line height, letter spacing, opacity, etc.) You can customize your website layout to make fonts stand out (position of text, images, videos, etc.)
If you don't have much experience with CSS, these customizations can be very challenging using a CMS or a rigid template-based website builder like SquareSpace. This is why I recommend a flexible website builder like PageCloud, which gives you unparalleled flexibility when it comes to creating unique layouts with virtually unlimited font and style options. .
