Home/ Problems/Q 4043
Next
Need More Solution
Anonymous
  • 0
Asked: 2023-04-05T07:47:36+00:00 In:

How to fix custom font not loading on WordPress site?

  • 0

I am trying to use a custom hosted font on my WordPress site, but it does not load properly. I have downloaded the font files (ttf, woff and woff2) and uploaded them to a folder called “fonts” in my theme directory. Then I added this code to my theme’s style.css file:

@font-face {
  font-family: "Courier Prime";
  font-weight: normal;
  font-style: normal;
  src: url("fonts/Courier_Prime/CourierPrime-Regular.ttf") format("truetype"),
       url("fonts/Courier_Prime/CourierPrime-Regular.woff") format("woff"),
       url("fonts/Courier_Prime/CourierPrime-Regular.woff2") format("woff2");
}

I also created a custom class called “courier” and applied it to the elements that I want to use the font:

.courier {
  font-family: "Courier Prime", monospace !important;
}

However, when I view the site, the font does not change and it still uses the default font. I have checked the browser console and there are no errors or warnings. I have also cleared the cache and tried different browsers, but nothing works.

What am I doing wrong? How can I make the custom font load correctly on my WordPress site? Any help or suggestions would be greatly appreciated.

wordpress
Share

    1 Solution

    1. This answer was edited.

      One possible reason why your custom font is not loading properly on your WordPress site is that you are using a relative URL for the font files in your CSS code. This means that the browser will look for the font files in a different location depending on which page you are viewing. For example, if you are viewing a page with the URL https://example.com/blog/post-1/, then the browser will look for the font files in https://example.com/blog/fonts/Courier_Prime/, which does not exist.

      To fix this issue, you need to use an absolute URL for the font files, which starts with https:// and includes your domain name. For example, if your WordPress site is hosted at https://example.com/, then you need to change your CSS code to:

      @font-face {
      font-family: “Courier Prime”;
      font-weight: normal;
      font-style: normal;
      src: url(“https://example.com/fonts/Courier_Prime/CourierPrime-Regular.ttf”) format(“truetype”),
      url(“https://example.com/fonts/Courier_Prime/CourierPrime-Regular.woff”) format(“woff”),
      url(“https://example.com/fonts/Courier_Prime/CourierPrime-Regular.woff2”) format(“woff2”);
      }

      This way, the browser will always look for the font files in the correct location regardless of which page you are viewing.

      Another possible reason why your custom font is not loading properly on your WordPress site is that you are using a theme that does not support custom fonts or overrides them with its own fonts. To check if this is the case, you can try switching to a default WordPress theme like Twenty Twenty-One and see if your custom font works. If it does, then you need to either find a different theme that supports custom fonts or use a plugin like Google Fonts Typography or Elementor to add custom fonts to your WordPress site.

      These plugins allow you to easily upload and use custom fonts on your WordPress site without editing any code. They also provide options to choose different fonts for different elements of your site, such as headings, paragraphs, menus, buttons, etc.

      I hope this helps you solve your problem and make your custom font load correctly on your WordPress site. If you have any further questions or issues, please let me know.

      • 0

    You must login to add an answer.

    Need An Account,