Menu fonts unexpectedly changing
-
Hello,
After a recent change to menu structure, the way the menu font displays on the website has unexpectedly changed. In the site builder, the menus display more or less how I want them to, except that capital A’s are displayed in a somewhat larger, sans serif font than the one I have selected. When I view the published version of my website, the capital A’s remain displayed in this unexpected way, while the rest of the menu text has changed to a serif font which is not the one that I have selected for my menus. Can you provide any insight about why this has occurred and how I can possibly fix it?
Best regards,
TimothyThe page I need help with: [log in to see the link]
-
It sounds like you’re encountering a unique issue with your menu fonts, especially after making adjustments to your menu structure. To help you more effectively, it’s essential to understand the specific changes you made to the menu structure. Could you provide details on what was modified? This information will help pinpoint the cause of the font discrepancies you’re observing.
Regarding the issue with capital “A”s appearing differently, this might be related to HTML encoding issues. Sometimes, characters like “” can appear due to encoding problems, where the browser misinterprets special characters or symbols. This can result in unexpected font styles or sizes being displayed.
To address HTML encoding issues, here are a few steps you can take:
- Review HTML Code: Check the HTML code of your menu items for any unusual characters or encoding. Ensure that your website’s encoding is set to UTF-8, which is the most widely used character encoding for the web.
- Font Consistency: Ensure the font you’ve selected is applied consistently across all CSS files. Sometimes, specific CSS rules might override your menu font settings, leading to inconsistencies.
- Clear Cache: After making changes, clear your browser and website cache. Caching issues can sometimes cause old styles to persist even after updates.
- Use Web-Safe Fonts: If the issue persists, consider using web-safe fonts or ensure the font files are correctly loaded and accessible by your website.
If these steps do not resolve the issue, please provide further details about the changes you made to the menu structure and any other relevant information. This will help us offer more targeted advice to fix the problem.
Hello Brad, thanks for the reply. The only change I made to the menus was to introduce a submenu below one item. I had not had any submenus before. After creating the submenu, the fonts changed in the way I described above. The menu items only contain regular English words typed in typical Latin characters. I have introduced some custom CSS to my theme (Crio) but none of it should affect the menus. I did attempt to clear the cache without results. The font I had been using was Inter, which I believe should be a web safe font? However, acting on your suggestion I did change the font for the menus. A different font (Inconsolata) displayed exactly as intended. Upon changing the font back to Inter, the same display issues returned. I feel confident now that I will be able to find a font that displays my text the way I would like it, but it is interesting why a certain font such as Inter will not behave appropriately.
Hi @tmerkel1,
It would be super helpful if you could link us to your site so that we can inspect the issue directly using our browser tools. If you’re not comfortable linking to your site in the forum here you can start a new forum topic and include your link in the URL section which will hide it in the public thread.
Thanks so much! We’re looking forward to assisting you further!
My apologies, I thought I had included a link with my original post. The website is: http://www.timothystours.ge
Thanks for your assistance!
My apologies @tmerkel1 it looks like you did include the link in your original post and I overlooked it. Thanks for that! So just viewing the link from my end your capital “A”s don’t stand out to me as being a different font type right away.
I know that some browser types support extended font types and other do not. Are you using a custom page header on your website? If so, does the font appear correctly inside of the custom page header editor?
If would also be helpful to know if are you incorporating custom font’s somehow on the site or are these fonts sourced directly from the Crio/Post & Page Builder fonts selector?
Sorry to bombard you with questions but hopefully if we can get enough information we can try setting this up and testing the fonts in our own dev environment.
Thank you, we’re looking forward to your response!
Hello there,
The header style I’ve chosen is one of the presets available (the icon for it says LOGO with three boxes beneath it). While editing in the page editor, the font appears normally, as it should, except that the capital A’s appear somewhat larger and bolder, as if they were perhaps a different font. However, when I go to the published version of the website, the font displays as a serif font (probably Times New Roman) rather than the selected sans serif Inter. This appears on both browsers I have installed on my system, Firefox and Brave.
I’ve chosen the font Inter from the Crio/Page Builder selector. However, tinkering with it just now, I seem to have isolated the problem further. When, in the Appearance>Design>Menus>Fonts tab, I switch “variant” from “regular” to a different number, the Inter font displays correctly in the menus of the published version of the website. For my purposes, 300 weight appears too thin and 500 weight appears too thick, so “regular” is what I would prefer. However, the “regular” variant seems to be the one that is bugged on my end. Hopefully this information is useful to you!
-
This reply was modified 2 years, 3 months ago by
tmerkel1. Reason: more specific information
Thanks a lot @tmerkel1, this item is so particular its hard to tell if it’s the browser or the font item itself. I’ve set this up using the Inter font type with a font weight of 400 and it doesn’t seem to be giving me the same results. It could just be a matter of continuing to adjust the font variation and perhaps your font color.
See my screenshots below:
– Editor View – https://snipboard.io/M8pg4Q.jpg
– Live View – https://snipboard.io/K6XD3d.jpg
– Customizer View – https://snipboard.io/zuRjFb.jpg
OK, thanks for the help. I checked one more browser on my system (Edge) and on Chrome on my girlfriend’s laptop and it still displays incorrectly on both. Then I checked on mobile (Safari) and it displayed correctly. Pretty odd – seems like there must be something particularly affecting how the site displays that particular font on desktop.
However, I’m reasonably confident that if this is the only font item that is bugged (at least for some viewers) then I should be able to find another font whose look I like which will work. I’ll accept that as a solution for now and if I start to notice issues, I will make another post. Thanks for the assistance!
You’re very welcome,
We’ll continue to test on our end as well in various browser types and if we can find an issue I’ll be sure to submit a bug request on your behalf to have it patched as soon as possible.
You can always reach back out to the thread here for updates and let us know if there’s anything else that we can help you with!
Thank you!
Hello there,
I’m experiencing a similar problem to what I had earlier on this thread. I’m not even sure what I might have done to trigger it – I hadn’t worked on my site in a day, but when I refreshed a page, the body text of the site had converted from my choice to a bold sans-serif font and the title of the site had converted to a serif font. When I went to check on the settings, it was the same as before – I was able to get everything to appear normal in the page editor, but after publishing, the correct font was not displayed. I was able to display other weights of my chosen font correctly for the body text, but not for my title text. I’ve temporarily switched to other fonts so the site doesn’t look bad, but there’s now three fonts which don’t work correctly on my website (I checked if the Inter regular weight font from earlier would work, and it still doesn’t work). The fonts which are now affected are Public Sans (regular weight) which I used for the body text and Cousine (all weights) which I used for the title text. I tried clearing the cache on the website; no luck.
Hi @tmerkel1,
I’m sorry to hear you’re experiencing this issue again. May I ask if anything has changed on your website that could have caused this? Something like an update to WordPress Core, your Crio theme, or Post and Page Builder or another plugin perhaps?
We’re unable to replicate this same behavior on our end but if you could set up a test page and add fonts in question we can have a look.
Thanks @tmerkel1, and we’re looking forward to hearing back from you.
Hey there Brandon, I’m not sure how to set up a test page with different fonts than the rest of my site. I did update my theme and page builder recently, but not immediately before this loss of functionality.
My guess is that since the fonts I’m using are Google Fonts, they might not be locally stored on my website, and the link to them might be getting broken or corrupted after some time. I saw while searching around for information on this problem that sometimes this can be caused by font names being called from a http:// link versus an https:// link. I don’t have any font management plugins installed at the moment – just have been using the fonts as the page builder gave them to me. Do you think installing the Custom Fonts plugin could help with this issue? I am going to try that anyways in a day or two, I just want to finish working on a few pages and then take a backup before I go into that.
Hi @tmerkel1,
I do apologize for the delay we were out of office for the weekend and had our usual influx of tickets yesterday. We have identified and patched a bug that I think directly relates to your issue.
In this case you should make sure that your Crio WordPress Theme and Crio Premium plugin are up to date. You should also clear all cache associated with your website. That includes browser cache and any server side caching agents you might be running. It may also be helpful to log in to your site from a completely different browser type or incognito window and view both the editor version and live site so that you can compare.
If that doesn’t work let us know so that we can investigate further but all other reports of this seem to have been resolved in the new update.
Thank you!
Hello there,
Great job! All the fonts which hadn’t been working are now working. Looks like you caught the problem. Thanks for the effort! Cheers.
Hey @tmerkel1!
That’s fantastic news! I’m glad to hear the update to BoldGrid Post and Page Builder resolved the issue and everything is working as expected now, including the fonts. It’s great when an update smooths out those bumps. If you have any more questions, need further assistance, or just want to explore more ways to enhance your site with BoldGrid tools, feel free to reach out.
Cheers and happy building with BoldGrid!
The topic ‘Menu fonts unexpectedly changing’ is closed to new replies.