Ensuring that your website matches your brand and house style is incredibly important for anyone working on their own website. Despite this, most DIY website builders and other website platforms come with limited font options, making it hard to achieve the consistent brand you have been dreaming of.

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

Why You Should Use CSS @font-face on Your Website

Before diving into the meat 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 an excellent choice for beginners 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 plugins or extensions.
  • Light and fast: Using @font-face doesn’t add another CDN connection to your website, with the font files being hosted on your own server. This means that your CSS rules and font files will be cached with the rest of your website.
  • Versatile: Just about any font can be used with @font-face, and it provides you with a huge range of options when it comes to controlling the way that your new font looks by default when it is used.

How to Use CSS @font-face to Load Custom Fonts

css font family

Using @font-face rules on your websites isn’t too hard at all. There are loads of tools around the web that can help you with this, and we’re going to show you each of the steps you will need to take to get a new font online.

1. Find Your Font

kaiju dafont page

This all starts with some font hunting. You need to find a font that you like and will work for your website, and there are plenty of places to look when you’re approaching this. Of course, though, you can skip this step if you already have a font picked out.

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

Alongside DaFont, there are loads of other free font websites on the web. If you have a font example but don’t know its name, you can use the font identification tool on Font Squirrel to find fonts inside an image. This doesn’t always work, but it can be a great way to find similar fonts around 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 Into a Webfont

font squirrel font downloaded

Once you have downloaded your font files, it will be time to convert your font into a format that your website will be able to display. Alongside being able to identify fonts, Font Squirrel also has a tool to convert fonts into webfont packs. Go to this page and follow the steps below to convert your font.

  1. Unzip your font.
  2. Click on Upload Font and select the font you are converting.
  3. Tap on the textbox to agree that you have permission to use the font.
  4. Click Download Your Kit and wait for the download to start.
  5. Unzip the new font file.
extract font file

3. Upload Your Webfont to Your Website

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

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

webfont webserver upload

Go to the root directory in your website’s files and find somewhere suitable for your font (for WordPress, we used public_html > wp-content > and created a file called Fonts). Then, upload the .woff and .woff2 files that came with your Webfont pack.

4. Add an @font-face Rule to Your Site’s CSS

This next step is possibly the trickiest element of this process. Font Squirrel provides a sample @font-face rule with the folder that you downloaded, and this can be found by opening the stylesheet.css file inside.

unchanged font face stylesheet

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

updated font face stylesheet

You can see what this makes the rules look like above.

add css code to website

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

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

5. Change Your Website Fonts With Font-Family CSS Rules

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

added css font rule

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

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

If your font hasn’t changed, you may have gotten your CSS class name wrong, or there could be another rule getting in the way. Using your browser’s development inspector can be a good way to determine what is stopping 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 libraries of fonts, enabling you to load fonts from their CDN rather than your own website. Options like this can be quicker and easier, but they also come with some downsides.

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