How to Add Custom Fonts Using CSS3 Font Face

Step 1 – Navigate to the Media > Add New from the WordPress dashboard.

Step 2 – Upload font file to your site. For example: font-name.woff

Step 3 – Copy the file url after the upload is complete.

Step 4 – Navigate to the Apperance > Customize.

Step 5 – Open the ‘Additional CSS’ pane.

Step 6 – Add the CSS code below. With this code, we will add the font to the system.

@font-face {
	font-family: FontName;  
	src: url(http://www.siteurl.com/wp-content/upload/2022/FontName-Regular.ttf);  
	font-weight: normal;  
}

font-family: Enter font name. Example: Lucia.
src: Add the file url you copied in parentheses.

Step 7 – Add the CSS code below. With this code, you can select the classes, ids or elements you want to define the font.

.class-name, .header, .footer { 
	font-family: "FontName", Arial, sans-serif; 
}