Adding Local FontsSometimes you may want to host a font locally, instead of using a service like Google Fonts. This article will take you through the steps to do this.
For the purpose of this article, we』ll be using Google Fonts. However, this process will work for any kind of font file you might have.
Downloading our font
So the first step is to download the font we want to use. For Google Fonts, this tool is incredibly useful.
At the top left, search for the font you want to download.
Once you click on your font, you』ll be taken to a page where you can choose your variants, and download the files.
When choosing variants, be sure to only check the ones you need. The more you check, the heavier your page will be.
The next step on the page is to copy our CSS, but we』re going to skip that for now, and head to step 4, which is downloading the files.
This will download a .zip file to your computer, which you can extract.
Uploading our font
Note: If you』re comfortable with uploading files to your server via FTP, you can skip this step and simply upload your font files to your child theme.
Now that we have our font files, we need to upload them to our server.
By default, the WordPress Media Library doesn』t allow us to upload font files. This is due to security concerns with some of these files.
However, we can temporarily allow these files to be uploaded by adding the below function to our website. Once we』re done, it』s best to remove this function.
add_filter( 'upload_mimes', function( $mimes ) {
$mimes['woff'] = 'application/x-font-woff';
$mimes['woff2'] = 'application/x-font-woff2';
$mimes['ttf'] = 'application/x-font-ttf';
$mimes['svg'] = 'image/svg+xml';
$mimes['eot'] = 'application/vnd.ms-fontobject';
return $mimes;
} );
Learn how to add PHP functions here.
Now we can upload our font files into the Media Library.
Now that our files are uploaded, let』s grab the File URL to one of them.
http://gp-test.local/wp-content/uploads/2019/02/open-sans-v15-latin-regular.woff2
Now, let』s remove the filename, and take note of the URL for the next step.
http://gp-test.local/wp-content/uploads/2019/02/
Using @font-face
Alright, we』re almost done! Now we need to reference our fonts in our CSS.
Let』s go back to our Google Fonts Helper website where we downloaded the font files, and head back up to step 3.
Under all of the CSS, you』ll see a field for the folder prefix. In there, we』re going to add the URL we took note of above.
Now above this field, copy all of the provided CSS, and add it to your website.
Learn how to add CSS here.
Take note of the font-family field in your CSS, we』re going to need this exact name below. You don』t have to keep what』s in there by default – you can change it to anything you want.
Adding Our font
Starting in GeneratePress 3.1, you can now add the local font in the customizer by inputting the font-family name without toggling on the Google Font option.
