The Easy Way To Add Fonts To Your Website (Including Custom Fonts)

You are viewing: The Easy Way to Add Fonts to Your Website (Including Custom Fonts) At HTTLEN: Share Good Articles

Adding a unique font to your website is a great way to make your design stand out online.

In this article, I’ll walk you through the step-by-step process of adding any font to your website. your website.

Note: Because not all websites are built and managed the same, I’ll present the most universal approach to adding custom fonts, and then explain how. the most popular website building platforms support custom fonts.

Content:

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 almost any font to any website.

However, when looking for a font online, you should always consider price, license agreement, and installation. ion method.

Without further ado, here are some of the most popular font libraries to help you find the perfect font:

Google Fonts (FREE)

Google Fonts boasts an impressive library of nearly 1,000 freely licensed fonts that can be explored through its interactive web directory. Due to their developer API, Google Fonts are possibly the easiest fonts to add to your site and where I would recommend starting your search.

Related: Top 20 Most Popular Google Fonts

Adobe Fonts (Premium)

Adobe Fonts (formerly Typekit) offers a collection of 14,000 impressive fonts. The new and improved service now gives Creative Cloud subscribers easy access to their entire font library at the click of a button. Unlike Typekit, Adobe Fonts has removed limits on page views and made all of its fonts accessible for both desktop and web use.

Note: Creative Cloud subscriptions (with Adobe Fonts) start at $20.99 /month.

Custom Fonts (Font Squirrel)

As well as offering a selection of free fonts licensed for commercial work , Font Squirrel is known for its Font Identifier and Font Generator.

Web Font Generator allows you to convert any font to which you have legal rights (.ttf or .otf file format) and convert it into a usable Web Font Kit that includes a -Use Cascading Style Sheet (CSS).

Different Font Formats and Browser Compatibility

Over the last few years, Modern browsers have drastically improved the way they support custom fonts. However, even today, not all formats are supported by all browsers.

Here are the most popular browsers and which font format they currently support:

(font: https://www .w3schools.com/Css/css3_fonts.asp)

I would always recommend using TTF/OTF and WOFF to ensure your fonts are compatible with all browsers.

For more details on supported font formats, try Can I Use – a great tool to investigate feature compatibility in different browser versions (FREE).

How to add custom fonts to your website using @font-face

The @font-face CSS rule below is the most common approach to adding custom fonts to a website.

Step 1: Download the font

Find the custom font you want to use on your website, then download the TrueType font (.ttf) file format. You can also download the OpenType Font Format (.otf)

Step 2: Create a WebFont Kit for Cross Navigation

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 in 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 also includes a cascading style sheet (.css) which you will need to update and upload in step 4.

*This step will vary greatly depending on how your website is built and hosted .

Step 4 – Update and Load Your CSS File

Open the CSS file in a text editor such as Textedit, NotePad, or Sublime.

Replace the URL source file with the new URL you created when uploading each file.

By default, the location The source URL ion is set within the downloaded Web Font Kit. It should be replaced with 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”);}

Step 5 : use 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 appearance from HTML .

This can be done in a number of ways, including adding site-wide declarations to your main CSS file.

Here’s a quick example:

h1 {font-family: ‘CustomFont’, Arial, sans-serif;font-weight:normal;font-style:normal;}

Adding fonts in popular website building tools

Content Management Systems (WordPress, Drupal, Joomla, etc.)

There are a few different ways to add custom fonts to a Content Management System content (CMS) like WordPress (WP ):

Add sources custom fonts using @font-face CSSAdding fonts using a WordPress plugin Adding fonts manually from Google Fonts

Usually spe For example, the 5-step process shown above will be the default approach when adding a custom font to a CMS. Although the process may seem quite easy for someone with experience in code manipulation, novice users will often look for an alternative.

If you are using WP and have no experience editing source code (theme files ) , you most likely want to rely on a typography plugin. Plugins make it easy to add custom fonts without having to write any code yourself.

The one thing I’d caution about 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.

Lastly, because Google Fonts offers an API for developers, you can also choose to “manually add” those fonts to your theme using the file functions.php. .

Website Builders (Pagecloud, Squarespace, Wix, Weebly)

There are a ton of website builders online that manage custom fonts in different ways.

Google Fonts

For the most part, the best website builders make it fairly easy to add fonts from popular sites like Google Fonts.

For example With Pagecloud, adding a Google font 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 it’s ready for any styling to be applied to it.

Not all website builders though they make it so 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’s a short list of the best website builders and how they manage Google Fonts:

Pagecloud
SquareSpace
Wix
Weebly
Shopify
Webflow

Like See, every website builder uses a different approach to adding fonts that can range from very easy to somewhat complicated.

Custom Fonts

In most cases, when you are looking to add a custom custom font that doesn’t exist within Google Fonts, you’ll need to edit the CSS on your website. This process can be radically different depending on which website builder you decide to use.

I recommend searching their respective knowledge bases and community forums for more information.

For example, the The process of adding a custom font with Pagecloud is very similar to the step-by-step guide 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 wanted to your website, the questions to ask are:</ p

Do you have the ability to customize the appearance of the font? (font weight, color, line height, letter spacing, opacity, etc.) Can you customize your site design to make the font stand out (position of text, images, videos, etc.)

If you don’t have much 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 recommend using a builder from flexible websites like Pagecloud that gives you unmatched flexibility when looking to create a unique design with virtually unlimited font and style options. Sign up today to try Pagecloud’s website builder and eCommerce platform!

Everything else

The Easy Way to Add Fonts to Your Website (Including Custom Fonts)