custom font in wordpress genesis child theme

How to Use Custom Font In WordPress Genesis Child Theme

Genesis child theme comes with its own font type. If you want to change it, you can use any other free or paid custom fonts. In this tutorial I have added the steps for setting up custom font in WordPress genesis child theme.

Custom Font in WordPress Genesis Child Theme

Before getting started with the configuration, you need to do the following.

  1. First you need to find the font type that you want to use it with you theme.
  2. Download the font. The font file will have a .tff extension (eg: georgia.tff)

Once the font is downloaded to your local system, you need to upload it to your genesis child theme directory. You can do this via FTP or the wordpress theme editor.

Once you uploaded the file, the font url structure would look like the following.

In the above URL, you need to replace example.com with your website name, genesis-sample with the child theme directory name. By default its genesis-sample. If you changed the directory name then change the url structure accordingly. And replace custom-font.tff with your actual font name.

You can verify the font upload by visiting the full URL. If the url is correct, the font will be downloaded from the URL.

Next, in your style.css file, you need to add the following @font-face entry as shown below. It will load the font when you browse the website. You should replace font-name with your font name and the URL with your font URL.

Now the font is accessible through your website. You can use this custom font anywhere in your stylesheet.

ALSO READ:  Five Types Of WordPress Hosting For Beginners

For example, you could use it for h1 tag as follows. your-font will be replace by your custom font.

Once you update the css, make sure you purge your website cache and CDN cache if you use any. Also check your website for changes after clearing your local cache. Hope this tutorial helps.

3 Comments

  • Richard

    Very sincerely appreciated. Your instructions are clear, case-specific, and perfectly concise. While many others shroud such a straightforward task behind paywalls and plugins, your instructions were just what I needed to put my font files in the right place and reference them in the stylesheet with no fiddling around.. Thank you very, very much!

Leave a Reply

Related

Types Of WordPress Hosting For Beginners

WordPress is one of the most popular platforms for hosting websites, especially blogs, since the website owner…

Read more
High-Performance Wordpress on cloud

High-Performance Wordpress is a must have for bloggers who have substantial income from their blogs.. People who cannot…

Read more
wordpress author post lists

WordPress is packaged with features and functionalities that can easily create a 'wow' factor for your…

Read more

Have some content ideas! We will help you publish it!

About

Cloud Computing Tutorial Blog

Navigation