Cursive Fonts Do Not Display
Hello, I have two websites that I've designed with cursive fonts in some headers. Whereas they display in other browsers, they do not display in Firefox. I asked this question years ago, and to date, no one has provided an answer.
Not only do the headers not display the cursive font: savoye let and allura, what they show are enlarged and bold letters that completely destroy the design. Surely, there is a reason for this.
Here is one of the sites (the other is still in design mode): https://summitlighthousephoenix.org
Chosen solution
Thanks for your patience with me. I did a lot of research based on what you told me and looked at some YouTube videos on self-hosting fonts. It's amazing that after all these years I didn't know about this.
Thank you so much.
Read this answer in context 👍 0All Replies (4)
I do not have the Savoye LET font installed and you do not provide it via @font-face, so I searched and installed this font and that works for me.
Do you have this font installed in a location that is whitelisted as on Mac we regularly see issues with fonts reported due to font installed by a third-party font manager?
You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Fonts tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.
You can check in Font Book for font issues like corrupted and duplicate fonts. Note that you shouldn't disable "Allow pages to choose their own fonts, instead of your selections above" as this will cause issues with iconic fonts used by webpages to display small icons (you may see text labels instead of icons).
You may find that it can be resolved by finding and removing duplicate fonts installed in the local ~/Library/Fonts folder, that are conflicting with standard system fonts.
This is way above my head. I'm not a web developer, I'm a designer. I use the fonts supplied by the wordpress theme I use. In this case, it's Elementor or the Wordpress Sela theme.
I have third party fonts on my computer for the design program I use, but they are not used on the websites. In fact, I have asked other people what they see when they go to the one site I indicated in Firefox, and they also don't see the font I had used in the design. Other browsers display the font I wanted.
So, I don't think the problem is anything "I'm" doing, unless I'm totally misunderstanding you, because the problem is replicated for friends who are just looking at the site.
You specify a specific cursive font but rely on having this font installed. If the visitor doesn't have this specific font (Savoye LET in your case) then Firefox falls back to the default font. You would normally supply this font via a @font-face rule like you do for other fonts like Source Sans Pro and Oswald Google fonts and custom fonts. You can't expect users to have a specfic font installed.
You can contact Wordpress for support if you do not know how to supply a specific font to visitors.
Modified by cor-el
Chosen Solution
Thanks for your patience with me. I did a lot of research based on what you told me and looked at some YouTube videos on self-hosting fonts. It's amazing that after all these years I didn't know about this.
Thank you so much.