Add custom fonts to your WordPress Website

Alex Heliopoulos

Website Designer & Full Stack Developer

July 9, 2020

In this article, we will explain how to add Custom Fonts to your WordPress Website manually.

Let’s say we want to download a custom font called “Impact”.

 

1.  Find a source and download the font to your computer.

2. Extract the .zip file if is necessary. The result will be a file with the name “Impact.ttf”.

3. Upload the file to your WordPress Media Folder. Go to WordPress Admin Panel, click on “Media” and select to upload a new file. Once the file is uploaded, open the file in WP Library and copy the file’s link.

4. Go back to WordPress Admin Panel. Navigate to Appearance > Customize > Custom CSS. Insert the following code:

@font-face  {
font-family: Impact;
src: url(../wp-content/uploads/fonts/impact.ttf) format(‘truetype’);
}

5. Choose which elements will use this font. For example, if you want to use the new font in your paragraphs then your code should look like this:

.p  { font-family: Impact, Open-sans, sans-serif; }

Note that we can add other fonts as fallback options in case Impact doesn’t load.

Σχετικά άρθρα…

How to build a website

How to build a website

In this post, we explain the necessary steps to build a website. Although these actions are technical, several times...