Using custom fonts with @font-face doesn't work in WordPress

I'm currently in the process of trying to incorporate custom fonts into a WordPress website, but I'm facing challenges getting the desired font to appear correctly. Interestingly enough, I've managed to successfully display the custom font locally on an HTML and CSS test document that I quickly put together, as well as through Firefox's web developer tools, confirming that the font is indeed loading. The specific font I'm working with is named "Indubitably" and was downloaded from Font Squirrel, utilizing the .woff format for testing purposes.

Below is the code snippet I've implemented:

@font-face {
    font-family: 'indubitably';
    src: url('fonts/INDUBITA-webfont.woff');
}

h1, h2, h3, h4, h5, h6 {
    color: black !important;
    font-family: 'indubitably' !important;
}

I believe I've placed the font file in the correct directory, which should be /home/"myUsername"/html/wp-content/themes/hestia(my current theme)/fonts...

Despite attempting various methods such as adding the code directly to style.css, using plugins like Simple Custom CSS, or even leveraging the native WordPress CSS editor, none have yielded the desired outcome so far.

Please bear with me if this seems like a beginner question, as this is my first experience delving into this aspect of web development 😉

htmlcsswordpressfontsfont-face

Answer â„–1

If you're experiencing issues with your font, consider replacing the local path with the complete URL. For example, change fonts/INDUBITA-webfont.woff to 

http://www.mywebsite.com/wp-content/themes/mytheme/fonts/INDUBITA-webfont.woff
(make sure to replace "mywebsite.com" with your actual domain).

Answer â„–2

Resolution 1:
If you encounter a section where the font is not displaying correctly, try right-clicking and selecting "Inspect Element" to view the source code. From there, you can identify the font-family causing the issue and modify it in the source file.

Resolution 2:
Consider adding static content to your header page when customizing your theme.

Resolution 3:
To fix font issues, consider replacing the new font with an older one that has the same name. Simply rename the new font file to match the old one and place it in the fonts folder: wp-content/themes/hestia/fonts

Answer â„–3

One tool that I really enjoy using is transfonter. It takes care of all the heavy lifting when it comes to creating your font-face from a font file. If you happen to make a mistake in your @font-face declaration, running it through this tool may help correct any errors.

This tool generates a font-face code similar to this:

@font-face {
    font-family: 'Indubitably';
    src: url('../fonts/Indubitably.woff2') format('woff2'),
        url('../fonts/Indubitably.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Additionally, make sure to verify the src URL.

Your CSS styles can be found in 

wp-content/themes/{project}/assets/css
, while your fonts are located in 
wp-content/themes/{project}/assets/fonts
.

Consider using 

src: url('../fonts/INDUBITA-webfont.woff');
. The use of ../ allows you to navigate back to the parent directory (in this case, the assets folder).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise in mobile Safari when attempting to load JavaScript files, resulting in

Encountering an issue with my Angular app on mobile Safari during the initial load, where it hangs on a blank page for nearly 2 minutes. Interestingly, the app functions perfectly on other browsers, including Mac Safari and iPad Safari. Initially, I suspe ...

javascriptjquerycssangularjssafari

Is a responsive mega menu with rollover effects available for Bootstrap?

Looking to develop a responsive megamenu for bootstrap 3, I recently came across one that caught my eye: I decided to implement it into my own project at However, I encountered a major issue with the menu functionality on desktop devices, as it requires ...

jquerycsstwitter-bootstraptwitter-bootstrap-3

Progress bar using jQuery inside a list of tree folders in CSS

I have a folder tree structure and I would like to include a progress bar alongside each folder name, which is also a clickable link. The progress bar will be created using jQuery UI. The pblabel element should appear on top of the progress bar. The bar e ...

jquerycsslisthtmltree

Disable text input in Flatpickr and remove the default iPhone calendar

We are facing an issue with the iPhone and iPad when using flatpickr for our calendars. When the calendar is opened, the cursor automatically focuses on the text box, triggering the default iPhone calendar to appear below. This problem does not occur on An ...

cssiphoneflatpickr

The min-height property in CSS appears to be ineffective on Jelly Bean

In my current project developing an Android application, I have incorporated Webviews in certain activities and fragments. However, I encountered a perplexing issue when running the app on Jelly Bean (api 16 and 18) emulator - the css property min-height ...

androidcssandroid-webview

Creating Dynamic Column Headings in PHP Using HTML

I have been using the following code to create an HTML table. I tried searching online for information on PHP get column headings, but I could only find information about rows. I was wondering if it is possible to use a while loop to dynamically print the ...

phphtmlsql

Facing challenges with parsing JSON files in an Angular 2+ application

Utilizing the Angular CLI, I have configured this project with the standard folder layout. My goal is to practice reading a JSON file from src/app/assets/items.json and then using it to display these items in the HTML. items.json: { "results": [ ...

htmlangularweb-applicationsdependency-injectionsingle-page-application

Tips on how to showcase up to 200 characters from a string

<?php include ($_SERVER['DOCUMENT_ROOT'].'/header.php'); include ($_SERVER['DOCUMENT_ROOT'].'/adtop.php'); if(mysql_num_rows($deals) > 0){ while($row = mysql_fetch_assoc($deals)){ echo '<div id= ...

javascriptphpjqueryhtml

Tips for enabling resize functionality on individual components one at a time

Check out my Codepen link for the resizable event While using Jquery UI resizable, everything is functioning correctly. However, I am now looking to have the resizable event activate one block at a time. When another block is clicked, the resizable event ...

javascriptjqueryhtmlcss

Guide on transferring three js variable to an HTML label element

For my project, I am looking to pass three js values to the label of a div. The desired output is: stWay: stProposer: stTime: hello John 2017-09-07 I have successfully programmed a button to make div1 a ...

javascriptjqueryhtmlcss

"Short-term" variation not appearing within the Material-ui Drawer component

I am attempting to create a responsive drawer component using material-ui, where it is toggleable on smaller screens and remains open on desktop. Following the mui documentation, I added the temporary variant to the drawer, but it does not display in desk ...

htmlcssreactjsmaterial-ui

How to modify checkbox and textarea values in a MySQL database with Jquery

In my MySQL database, I have a textarea and three checkboxes. By default, the textarea value is null and the checkbox values are set to zero (0). When I enter text into the textarea, I am able to update the text value in my database. However, I am facing ...

phpjqueryhtmlmysql

Customizing error messages to display validation errors instead of default text errors in the Django UserCreationForm

I'm encountering an issue with the registration form on my website. The form itself is straightforward, but I'm facing a problem where if a username is already taken or if the two password fields don't match, Django doesn't respond afte ...

pythonhtmlcssdjango

Discover the beauty and color of transforming markdown to HTML using Python

Is there a way to convert markdown text into beautiful, colorful HTML using Python? I've tried searching online, but all I can find are results related to the Markdown library. The code snippet provided only generates plain HTML with no color or styli ...

pythonhtmlcssmarkdown

Creating a dynamic overlapping image effect with CSS and JavaScript

My fullwidth div has an image that overlaps it. When the browser is resized, more of the image is either shown or hidden without resizing the actual image itself. I managed to get this effect for the width, but how can I achieve the same result for the hei ...

javascripthtmlcss

Having trouble changing font color using AngularJS - what am I missing?

I am currently working on a straightforward program where the user inputs text into a textbox, and that text is displayed below. However, I also want the font color to change based on what the user types in the "color" field. Why isn't this functional ...

cssangularjsstyles

$wpdb originating from a separate WordPress database

My challenge involves retrieving the database prefix from a separate WordPress database. In my current WordPress database, I utilize the following code: $db_prefix = $wpdb->base_prefix; Now, my objective is to obtain the database prefix from an extern ...

phpmysqlsqldatabasewordpress

The content within an inline-block element exceeds the boundaries of its parent <pre> tag and causes overflow

I'm currently exploring ways to incorporate line numbers into text within a <pre> tag, all while maintaining the ability for the text to wrap. This presents some unique challenges: Adding line numbers in a separate column of a table is not an ...

cssword-wrappre

Tips on attaching a click event listener to Nav.Link component in React Bootstrap

return ( <Navbar bg="dark" variant="dark"> <Navbar.Brand href="/">Instagram</Navbar.Brand> <Nav className="mr-auto"> <Nav.Li ...

htmlreactjsreact-bootstrap

What is the best way to select just the innermost row of a nested table for emphasis?

I am working on a project with multiple nested tables and I am looking for a way to highlight the innermost row below the mouse pointer. How can I achieve this? Just to provide some context, I am using nested tables to present recursive tabular data, with ...

javascriptjqueryhtmlcsshighlighting