How to use @ font-face CSS to change your website’s fonts



Making sure your website matches your brand and the style of your home is extremely important to anyone working on their own website. Despite this, most DIY website builders and other website platforms have limited font options, making it difficult to get the consistent brand you crave.

So how exactly can you get your website to reflect the style you’ve painstakingly designed? @ font-face and CSS are the answer to that question, and we’ll show you exactly how to change your website’s fonts using these tools.

Why should you use CSS @ font-face on your website

Before getting to the heart of this process, it makes sense to explore the reasons for using this method to apply custom fonts to your website. @ font-face comes with a range of different benefits, making it a great choice for newbies and web design experts alike.

  • Easy to use: You don’t need to be able to write CSS from memory to use rules like this. This makes it easy for anyone to add a font to their website with this method, all without having to rely on any plugins or extensions.
  • Light and fast: Using @ font-face does not add another CDN connection to your website, as the font files are hosted on your own server. This means that your CSS rules and font files will be cached along with the rest of your website.
  • Versatile: Just about any font can be used with @ font-face, and it gives you a huge range of options to control the default appearance of your new font when used.

How to use CSS @ font-face to load custom fonts

css font family

Using @ font-face rules on your websites isn’t too difficult at all. There are plenty of tools out there that can help you with this, and we’ll show you each of the steps you’ll need to take to get a new policy online.

1. Find your policy

kaiju dafont page

It all starts with a police hunt. You have to find a font that you like that will work for your website, and there are plenty of places to look when you approach it. Of course, you can skip this step if you have already chosen a font.

Websites like DaFont can be perfect for those looking for fonts that can be used commercially for free. This is where we found the font we use in this guide. It’s called Goma Shin’s Kaiju Monster, with a 100% free commercial license, which means it can be used on any website.

Besides DaFont, there are many other free fonts websites on the web. If you have a sample font but don’t know its name, you can use the Font Identifier on Font Squirrel to find fonts in an image. It doesn’t always work, but it can be a great way to find similar fonts on the web.

If you’re looking for more inspiration, check out our guide on how to find free fonts similar to paid fonts.

2. Convert your font to a web font

squirrel font downloaded font

Once you’ve uploaded your font files, it’s time to convert your font to a format your website can display. Besides being able to identify fonts, Font Squirrel also has a tool to convert fonts to web font packs. Go to this page and follow the steps below to convert your font.

  1. Unzip your policy.

  2. Click on Download the font and select the font you are converting.

  3. Press on the text box to accept that you have permission to use the font.

  4. Click on Download your kit and wait for the download to start.

  5. Unzip the new font file.

extract the font file

3. Upload your web font to your website

Now that you’ve downloaded your font, it’s time to add it to the file directory that stores your live website. This will usually be on your web server and you can use an FTP client like FileZilla or the tools provided on your web server to add the files. We will use the latter method for that.

The site we are doing this on is a WordPress site. This means that there is already a file called wp-content which is great for our font, and we can start from there.

web font web server download

Go to the root directory in your website files and find a suitable location for your font (for WordPress we used public_html > wp content > and created a file called Fonts). Then download the .woff and .woff2 files supplied with your Webfont pack.

4. Add an @ font-face rule to the CSS of your site

This next step is perhaps the most delicate part of this process. Font Squirrel provides an example @ font-face rule with the folder you downloaded, and this one can be found by opening stylesheet.css file inside.

unchanged font style sheet

As you can see, this rule is almost complete, but it does not include our file location. This can be a bit tricky to figure out, as you don’t need to include the full path to the file to get the job done. In our case, it suffices to add / wp-content / Fonts / to our @ font-face rule, because the user will already be beyond our website root file when this CSS loads.

updated font style sheet

You can see what the above rules look like.

add css code to the website

Finally, it’s time to add your @ font-face rule to your website’s CSS. As we use WordPress, we will do this through our website customizer. Most modern website platforms offer custom CSS options, but you can also add this rule directly to a CSS file on your website.

An important note: We usually provide sample code at this point in a guide. The CSS code you use will almost certainly be different from ours, which means that it is best for you to use the example CSS provided by Font Squirrel.

5. Modify the fonts of your website with the CSS rules of the font family

As the final step in the process, you need to add new CSS rules to all the text you want to add your new font to. We showed you how to find specific CSS classes and text element IDs on your website in our recent article on changing font colors with CSS.

CSS font rule added

Once you know the class or ID you are working with, you can add it to your CSS file. In our case, we are going to modify the body of the main text on one of our pages.

Add your class name followed by a set of curly braces (our example – .siteorigin-widget-tinymce p {}). After that add the font-family rule found at the top of your CSS group @ font-face to the class you just configured. Then verify that the font has changed.

If your font hasn’t changed, you may have entered the wrong CSS class name, or you may have another rule behind you. Using your browser’s Developer Inspector can be a good way to determine what is preventing CSS from working.

Other ways to load new website fonts

Using @ font-face isn’t the only way to add new fonts to your website. Companies like Google host their own font libraries, which allows you to load fonts from their CDN rather than your own website. Options like this can be faster and easier, but they also have some drawbacks.

@ font-face is a robust and reliable way to change fonts on a website, giving you everything you need and forcing you to rely on the services of other companies.

A typewriter with the word News printed on it

Align things with CSS Text Align property

Get that text squared with CSS text-align.

Read more

About the Author


Leave A Reply

Your email address will not be published.