The Complete Self-Hosted Font Guide

The Complete Self-Hosted Font Guide

1. Install plugin

To get started on installing your custom fonts, we recommend installing a plugin called WP Extra File Types so you can easily upload and get file paths for custom fonts in Wordpress. 

To install, go to Plugins > Add New and search for "WP Extra File Types" and install and activate the plugin. You can now upload font files right in Wordpress!

To get started on installing your custom fonts, we recommend installing a plugin called WP Extra File Types so you can easily upload and get file paths for custom fonts in Wordpress. 

To install, go to Plugins > Add New and search for "WP Extra File Types" and install and activate the plugin. You can now upload font files right in Wordpress!

Note: You will need to enable all the filetypes you want to upload by going Settings > Extra File Types and enabling .eot, .woff, .woff2, .svg and .tff (use the search feature in your browser to find each filetype).

custom-fonts-step-1

You will need to enable all the filetypes you want to upload by going Settings > Extra File Types and enabling .eot, .woff, .woff2, .svg and .tff (use the search feature in your browser to quickly find each filetype).

To get started on installing your custom fonts, we recommend installing a plugin called WP Extra File Types so you can easily upload and get file paths for custom fonts in Wordpress. 

To install, go to Plugins > Add New and search for "WP Extra File Types" and install and activate the plugin. You can now upload font files right in Wordpress!

Note: You will need to enable all the filetypes you want to upload by going Settings > Extra File Types and enabling .eot, .woff, .woff2, .svg and .tff (use the search feature in your browser to find each filetype).

enabling-filetypes

2. Upload your fonts

2. Upload your fonts

To upload a font, go to Media > Add New in the Wordpress dashboard and select your fonts to upload.

Protip: In order for your font to load on most browsers, we recommend installing three or more file formats for a single webfont. Your font vendor can provide these for you, or you can use a service like this one to get additional file formats for your LICENSED webfont.

To upload a font, go to Media > Add New in the Wordpress dashboard and select your fonts to upload.

Protip: In order for your font to load on most browsers, we recommend installing three or more file formats for a single webfont. Your font vendor can provide these for you, or you can use a service like this one to get additional file formats for your LICENSED webfont.

uploading-self-hosted-fonts

3. Retrieve font paths

3. Retrieve font paths

Once your font file is uploaded, you can click Edit and retrieve the font path URL directly in Wordpress.

Note: If you delete these files, your fonts will stop working.

Once your font file is uploaded, you can click Edit and retrieve the font path URL directly in Wordpress.

Note: if you delete these files, your fonts will stop working.

getting-file-urls

4. Install your fonts

4. Install your fonts

With your font URL paths on hand, you can now navigate to Semplice > Customize > Webfonts to install your custom web font.  Click 'Add Resource' and set the Resource type to 'Self-Hosted' 

Paste in the CSS code required to load your font (you should receive this from your vendor), replacing the font path URLs and System Name with your own font path URLs.

3. With your font URL paths on hand, you can now navigate to Semplice > Customize > Webfonts to install your custom web font.  Click 'Add Resource' and set the Resource type to 'Self-Hosted' 

Copy this CSS code, replacing the font path URLs with your own:

Adding-Font-Resource

If your font vendor did not provide CSS for your font, you can use this tool to generate the CSS for you.

3. With your font URL paths on hand, you can now navigate to Semplice > Customize > Webfonts to install your custom web font.  Click 'Add Resource' and set the Resource type to 'Self-Hosted' 

Copy this CSS code, replacing the font path URLs with your own:

Important: when using this tool, be sure to set 'Path' to the file directory folder where your custom fonts are uploaded on your server. Make sure 'Fontfile' is the actual filename of your font.

3. With your font URL paths on hand, you can now navigate to Semplice > Customize > Webfonts to install your custom web font.  Click 'Add Resource' and set the Resource type to 'Self-Hosted' 

Copy this CSS code, replacing the font path URLs with your own:

generating-CSS

5. Add fonts to your tray

5. Add fonts to your tray

With your Self-Hosted font resource added, next click 'Add Webfont'. 

Add in your webfont with the corresponding system name and font weight. You will need to add a separate webfont for every font weight you intend on using.

Important: make sure the System Name matches EXACTLY what you specified in your CSS code under the 'font-family' property. In the example below, 'Miedinger (Bold)' is the internal display name and ('Miedinger Bold') is the system name.

custom-font-add

And you're DONE!

You can go ahead and celebrate now.

If you need to upload additional font weights, you will need to repeat these steps and for each individual font weight.

And you're DONE!

You can go ahead and celebrate now.

If you need to upload additional font weights, you will need to repeat these steps and for each individual font weight.

Troubleshooting Tips & Checklist:

Here are some steps you can take to double check that your self-hosted fonts are installed correctly.


  1. Ensure your URL prefix is set correctly.

    Try with and without the 'www' in the URL prefix.

    If SSL security is installed, be sure your URL path includes the "https://" prefix and not just the "http://" prefix.



  2. Ensure your fonts are uploaded correctly.

    Be sure your fonts are actually located at the URL paths you have set in the CSS code. A good way to test this is to paste the font URL path into your browser. If you get a 404 error page, the font is not actually located at that path. We recommend grabbing the exact URL paths inside of the Wordpress Media library if you are uploading fonts through Wordpress to avoid a missing filepath.

    Lastly, if you used FTP to upload your fonts, be sure permissions are set correctly on the font files.



  3. Ensure your font files are compatible for web.

    Webfont filetypes are either .eot, .woff, .woff2, .ttf or .svg. We recommend installing all of these to ensure your font loads on most browsers.

    If you do not have these filetypes, try contacting the font vendor you purchased the font from to get a web ready format. You can also use a service like Transfonter to convert your LICENSED fonts to a web-ready format.



  4. Ensure your System Names match.

    Make sure the "font-family" system name listed for your font in the CSS and the System Name option under your Webfont settings match exactly (this is case sensitive!).

    If you are using several font weights, you will need to list each font weight as a separate font with it's own system name. For example, if you add Avenir Medium you will need add a Webfont with 'Avenir Medium' as the System Name. If you add an additional weight of Avenir Light, you will need to add another Webfont with 'Avenir Light' as the System Name.



  5. Ensure your CSS code syntax is correct.

    Even the smallest typo such as using an incorrect apostrophe can render the CSS invalid. We recommend using the CSS generator in Step 4 to ensure your CSS has no syntax issues.

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise

Built with pride. Made with Semplice. Copyright 2010-2019 by Semplice™

Built with pride. Copyright 2010-2018 by Semplice™

Resources Dropdown

Warped Universe

A curated pack of abstract illustrations for your work.

Supply

Carefully and exclusively crafted resources for creatives.

Semplice X

A premium customization service for studios.

Video tutorials

Your introduction to the Semplice admin and features.

Looking for help?

Find guides or talk with our support team.

Resources Dropdown - Mobile

close

Go