Custom fonts not displaying on certain page

  • Resolved aidanww

    (@aidanww)


    3 years, 6 months ago

    Hello!

    Sorry to bother again, but there’s a weird error I’m experiencing in relation to a custom font. On my website linked you can see that I have no problem with this apart from on one page – https://staging.uniqueteambuilding.com.au/team-building-events/.

    The custom font is https://staging.uniqueteambuilding.com.au/wp-content/themes/utb/assets/fonts/indieflower-regular.woff.

    This is defined as 

    @font-face{
	font-family: indieFlower;
	src: url(https://staging.uniqueteambuilding.com.au/wp-content/themes/utb/assets/fonts/indieflower-regular.woff) ;
}

    And when you look at Inspect Element, #test is used to apply this font-family to text. For example;
    <h3 id="test">Real Outcomes Tailored for You</h3>
    (in the inspect element) which works all across the site, apart from /team-building-events/. And even the sub-pages of this work fine.

    And the reason I’m reporting this issue here is because it only occurs when FVM is enabled, even when all the settings are deactivated.

    Hope this all makes sense to you! Let me know if anything needs explaining.

    All the best,
    Aidan

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter aidanww

    (@aidanww)

    Update: after changing around a few things and moving all my changes to our live site (from the staging site), this error now only appears (on the live site) when CSS processing is enabled.
    Everything involving fonts is actually done with CSS within PHP files (with the style tags of course), as opposed to simply in CSS files. Perhaps this is the issue?
    You can see the live site at https://www.uniqueteambuilding.com.au

    Many thanks!
    Aidan

    Thread Starter aidanww

    (@aidanww)

    Update II: this has been fixed, and fairly simply too. As I guessed, it was because of the styling being in the PHP files and not a stylesheet – moving it to a file sheet, and then ignoring that CSS file (in the FVM settings) fixed this.

    Plugin Author Raul P.

    (@alignak)

    Hi,

    There should be no need for any of that.
    The issue is how you are creating the font-face and also typos on your code.

    For example:

    View post on imgur.com

    Your CSS file urls start with double quotes but end with single quotes. This is not valid markup, so FVM may not be able to read it. Also, you need to enqueue the css files properly, with absolute url’s.

    The font face is incorrect, you are not declaring the format and it needs quotes for the url. Here is an example of hot it should look like.

    @font-face{
	font-family:"Astra";
	src:url("/wp-content/themes/astra/assets/fonts/astra.woff") format("woff");
	font-weight:400;
	font-style:normal;
	font-display:fallback
}

    If you select “Merge Fonts and Icons separately” this will appear on a separate CSS file as well. If it doesn’t, or if the path is incorrect, then there may be some issue, either with your code or FVM.

    But doing what you did will also work. Just fix the quotes on the CSS files. Enqueue them properly, instead of inlining them on the header.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom fonts not displaying on certain page’ is closed to new replies.

Tags