Custom font issue on some computers and mobile

[mcostales84]

Hi thre, I have this site https://yaneiryscruz.com/ wich have a custom font to create the accent text behing the headlines, and on some desktops it looks good, but on others (including mobile) i shows a broken fonts, like an open sans.
I uploaded a wotf font, a ttf, same result.
How can I fix that?

[prakash_s]

Hello @mcostales84,

Thanks for writing to us.

In order to help you with your concerns we need to check your settings. I would request you, please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin-level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[mcostales84]

attached to previous post

[ruenel]

Hello @mcostales84,

You have added this custom CSS code:

[data-accent-text]::before {
    content: attr(data-accent-text);
    position: absolute;
    font-family: businesspenmanship;
    font-size: 20em;
    color: var(--color-accent);
    display: flex;
    z-index: -1;
    width: auto-fit;
}

Please make sure that the businesspenmanship font is loaded on your site. Only those who have this font installed on their machine can view the correct font.

Best Regards.

[mcostales84]

As you can see on the screenshots, the font is added to the site using the font-manager

[charlie]

I think you need quotes around “penmanship” or move “businesspenmanship” to “penmanship”. I could not find that custom CSS, but let us know if that helps and have a great day. Beautiful looking site btw.

[mcostales84]

I tried putting the “” and no luck, changing the font name, the same. I can see it fine because I believe I have that font installed, but on my phone I don’t see it. The font is installed using the font manager, not sure why is not loading. What format should I use? can i upload more than one format for he same font? Is there a 3rd party plugin I can use for that?
Just so you know, this is how the site should look

and thanks for the compliment!

[ruenel]

Hello @mcostales84,

Though you have added the “businesspenmanship” font in the Font Manager, it is still not loaded because none of the elements is using the font. You only use the font in a custom CSS as I indicated in my previous response. Still, it is not loaded into the page. I would highly recommend that you insert a Text element using that font and set the font size to 0 or just hide that Text element throughout all screen sizes. If this is not working, please provide us with your WP access to your site so we can investigate further.

Thanks.

[mcostales84]

Thanks, that did the trick, but that approach makes no sense, the font should load if I add it to the font manager

[ruenel]

Hello @mcostales84,

The fonts added in the Font Manager will only load if there are elements on the page using that font. Imagine, you have five fonts added in the Font Manager, and those five fonts are loaded all at once even if the page elements are only using 1 single font. It would affect the page’s loading performance.

Hope this makes sense.