Install and integrate custom fonts
You can add custom fonts of your choice in WordPress by applying below simple steps.
Step 1: Download your fonts zip file/folder and unzip it.
Step 2: Look for the font files which will have formats like: .eot, .ttf/.otf, .woff, .woff2, .svg
Step 3: Upload this font files into your theme’s folder “wp-content/themes/your-theme/assets/fonts/”
Step 4: Add below code to the style.css file under “wp-content/themes/your-theme/” folder
@font-face {
font-family: 'font name';
src: url('wp-content/themes/your-theme/fonts/font-file.eot');
src: url('wp-content/themes/your-theme/fonts/font-file.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/your-theme/fonts/font-file.woff') format('woff'),
url('wp-content/themes/your-theme/fonts/font-file.ttf') format('truetype'),
url('wp-content/themes/your-theme/fonts/font-file.svg#font-name’) format('svg');
font-weight: normal;
font-style: normal; }
Note : For every font file available, add the path inside of url() data type. If you don’t have one of the formats such as .svg, just skip that line.
url('wp-content/themes/your-theme/fonts/font-file.eot')
Step 5: Replace font-family with your new font name in the css classes like below to overwrite theme default font families. But in case if you want to use different font for different elements then you need to use your font family in that specific element css class selector.
body {font-family: 'font name', sans-serif !important;}
.alt-font {font-family: 'font name', sans-serif !important;}
.main-font {font-family: 'font name', sans-serif !important;}