Hi there
Is there a possibility to set the basic font settings to a non-serif font? If no fonts are loaded on my website it shows a serif font like Times or so. i would like to change this basic font to a non serif font.
Thank you very much for your help!
Hi Felix,
Thanks for reaching out.
You can set the Basic Font from the Theme Options > Typography > Body and Content. Please find the screenshot describing the option.
Hope it helps.
Thanks
Hi Tristup
Thank you very much for your reply and your help!
I have set my “Body and Content” and “Headings” in the “Fonts” menu (see attachment), so in the Theme Options, I choose this font presets which works well.
But I have noticed that before loading this fonts (Poppins and Muli), the website shows the system fonts of the device which are Serif-Fonts like Times or so.
Sometimes, the fonts in the Pro-Menu where not loaded at all, which is the font “Montserrat”. Then the menu is displayed with a Serif-Font too (see attachment).
Is there a possibility to set the first choice of the system fonts to “sans-serif” if the webfonts are not loaded?
Thank you very much for your help!
…by the way, I have inserted the following CSS, which helps for the content, but not for the menu:
body {
font-family: “Muli”, Sans-Serif;
font-weight: 400;
}
Thanks again for your help!
Hello Felix,
It seems that you are using the Pro custom Header where you have used Navigation Inline element but the font family is been set as through the custom CSS code. I would suggest you remove the custom CSS code from the CSS box of theme option or Header CSS box
I would suggest you set the font from the Navigation Inline element
Hope it helps
Thanks
Hi Prakash
Thank you very much for this notice! I have removed the CSS and have set up a new Custon Font Set “Montserrat Menu” with a uploaded montserrat.woff font, which I have added to the Pro Custom Header (see attachment).
In most cases this works well, but I still have some older devices as iPads, which are displaying a serif-font in the menu. If I examine the menu-font with “WhatFont” tool, it says:
serif - regular
Family: Montserrat; serif (see attachment)
There must be somewhere a possibility to set this to “Family: Montserrat; non-serif”
Is there also a CSS for the Pro-Header, which can tell the priority of font settings?
Thank you very much for your help!
Hey Felix,
Regretfully, there isn’t a way right now to set a fallback font and also for the font priority. There’s a similar request like this already so I’ll add this case up so a feature for this might be added in the future.
For now, you will need to create your own CSS class and override the font family using CSS. I assume you already know CSS. If not, you need to learn CSS.
Thank you for understanding.
Hi Christian
Thank you very much for your reply! I have created this CSS, but the result on Apple Devices is still the same (see attachment):
.x-navbar .sub-menu {
font-family: “Montserrat”, Sans-Serif !important;
}
.x-masthead .x-anchor-text-primary {
font-family: “Montserrat”, Sans-Serif !important;
}
Thank sagain for your help!
Hi Felix,
I only see this CSS rule applied on your site, it’s almost identical to what you show, but no Sans-Serif fallback. Please try clearing all your caching features including your browser’s cache.
Thanks,
Hi Friech
Thank you very much for your reply!
Yes, you are right. I also see only the CSS rule without Sans-Serif fallback.
But I have applied the CSS with Sans-Serif fallback, see attachment:
Did I do something wrong?
Thanks again for your help!
Hi Felix,
I have checked your website and found the Sans-Serif font is added in the Fallback. If you are not seeing that, I would suggest you check once by clearing all types of cache and in incognito/private mode of the browser.
Hope it helps.
Thanks
Hi Tristup
Thank you very much for your reply. Yes in the meantime, I also can see the Fallback, and it is working. The problem now is, that in the Safari Browser, there are only Sans-Serif Fonts displayed. The uploaded “Montserrat” font and also “Muli” is not showing anymore (see attachment):
Also Slider Revolution in Safari Browser don’t show the uploaded “Muli” Font. Here a Serif-Font is displayed again (see attachment):
I have given the Custom Font-Sets including the uploaded Fonts unique names like “ShowMyProject Headline Font”, “ShowMyProject Body Font” and “ShowMyProject Menu Font”, to check, if the custom font-sets really are displayed. Even in Chrome browser I can only see “ShowMyProject Headline Font”, “Muli” and “Montserrat” are displayed, but not from the custom font-sets, otherwise the given names would show up in “What-Font” Tool (see attachment):
Any idea, why only the uploaded Font “Poppins” is showing up with the custom font-set but also uploaded “Muli” and “Montserrat” fonts are not displayed from my font-sets? The fonts are uploaded as .woff files.
Thanks again for yout help!
Hello Felix,
To better assist you with your font issues, kindly provide us access to your site so that we can check your site and font settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
To know how to create a secure note, please check this out: How The Forum Works
Best Regards.
Hello Ruenel
Thank you very much for looking into this. Of course you can access the website and make changes. Pleases tell me what the changes are, you have made.
As I said, the fonts problem appears only on Apple Devices with Safari Browser. In Chrome Browser, the correct fonts are displayed, but only “Poppins” Headline-font is displayed from my included font-set. “Muli” font and “Montserrat” font are displayed, but might be loaded from Adobe fonts or Google fonts.
Thanks again for your great support!
Kind Regards!
Hello Felix,
Does the issue happen on mobile devices only? When I tested your site as I compared it in Safari and Chrome, I am seeing that the fonts are working as expected.
In the screenshot above, the left side is Chrome while the right side is using the Safari browser. The issue could only happen on small devices. Please do clear the browser caches of your Safari or use private browsing mode and test the site again.
Thanks.
Hi Ruenel
Thank you very much for you reply. Your screenshots are showing Slider Revolution on the homepage. This fonts are not loaded from my custom font sets yet. I still have to figure out, how to load my custom font sets in Slider Revolution and in Essential Grid. In Slider Revolution, the title is in the correct font “Poppins” , but not from my custom font set “ShowMyProject Headline Font”. But the subline and the button are showing a Serfif-Font, which should be the font “Muli” (see attachment):
But this is not my main problem. I have set up three custom font-sets in X-Pro, one for my headlines (Poppins-font “ShowMyProject Headline Font”), one for the body-font (Muli-font “ShowMyProject Body Font”) and one for the top-menu (Montserrat-font “ShowMyProject Menu Font”).
If I check with “What-Font” Tool at the frontend, only “ShowMyProject Headline Font” is really showing up on the website (see attachment):
Any idea, why the other two custom font-sets with my given names for main-menu and body are not showing up?
Thanks again for your help!
Kind Regards!
Hi Felix,
Sorry, but what you’re doing makes the typography configuration on your site complicated. This will cause more trouble than good.
You should not use custom CSS to apply general typography on Headings and Body, this will cause a lot of conflicts. Body and Headings general typography can be set on Theme Options > Typography. If you have a certain Headline that will have a specific font, you can do that at the element level.
Montserrat and Poppins are Google Fonts, you don’t need to upload that on your library (uploaded) and set up a custom font in the Font Manager. The same thing with Muli as you already have it pulling from Adobe Fonts.
The Revolution Slider has its own Typography configuration for its layers if those need to be configured. If not, then it can inherit the Body and Headings fonts.
Sorry if this is sound troublesome, but this will save you on a lot of typography issues, please reset your Typography configuration, remove the custom CSS that applies typography and configure the Font Manager not using the custom-font from your library, since those already available on Google Fonts and Adobe Fonts.
The real issue is the “can’t set a non-serif fallback” which I and Christian already reported on our issue tracker, regretfully there is nothing we can do about this for now.
Thank you for understanding,
Hi Friech
Thank you very much for your reply and for your help! OK, I will remove the custom fonts, but I was shure, this was the reason, why this function was implemented in Pro.
The reason why I had uploaded the fonts Poppins, Muli and Montserrat is, that before, when loading the fonts from Google and Adobe, the request to their font servers caused a slow page- and font-loading, which resulted in a kind of text-flickering. The page loaded with the fallback fonts, then all the text dissappeared for a blink of a eye anr reappeaded in the loaded font. This was very anoying to browse rhrough the website, always this blinking of all the texts, it looked like a error when loading each page.
I am happy how the Headlnes are displayed. They work on all devices and my correct custom fonts are loaded. I would like to figure out, why this is not working with my custom body-font-set and with the menu-font-set. Maybe I will try with Muli and Montserrat files from a other Font supplyer or in a other data format.
I was thinking it will be much safer for displaying the right font and also quicker to load, If I use uploaded fonts from the website mediathek. Is this not the case?
Thank you very much for your help!
Kind Regards!
Hi Felix,
I understand, that issue is common in web development it is called “flash of unstyled text”, there is a font-display option at the bottom of Font Manager to remedy that. More details about the values of font-display here.
The truth is, the browser will still request/download the font file on your library, so there is no advantage of uploading that to the library. On contrary, there is a big chance that a viewer already visited a site that uses the same Google font as your site and those fonts are already cached on the viewer’s browser and that means you save a request from downloading those fonts.
I did not see the actual “flash of unstyled text” on your site, but it seems you describe it as extreme, there could be another factor on that. It could be a browser extension or an Internet security application on your computer. Did you test it on another computer on another network?
This is the kind of issue I want you to avoid, the Inline Menu Navigation top link is set up like this, but you also have this on Global CSS. The way you set up this, it is confusing for us to troubleshoot, and even if we resolve this one, it is more likely to cause more trouble for you after.
With that said, if you’re comfortable going the custom CSS path, I recommend you to learn how to use the Chrome browser Developer Toolbar.
Cheers,
Hi Friech
Thank you very much for your great help the helpful links and yout professional advice! I really appreciate your effort to help me in this matter!
I have removed all custom fonts on my development page, but as soon as they where gone, the “flash of unstyled text” was back again.
I see, what you mean with mixing custom font-sets and custom CSS. I didn’t do a consistent coding, which resulted in a lot of problems.
I did now configure three new custom font-sets for Headines, Body and Menu and have corrected the CSS according this font sets. Also Slider Revolution and Essential Grid got new CSS and I was able to include the custom font-sets also here. I have given this three font sets unique names, which I now can see with the “What-Font” Tool at the frontend. This gives me the security, that really the correct fonts, which I have uploaded, are displayed on my website.
I tested the website with several browsers, even on old iPads and I can not see any font missing. Also the “flash of unstyled text” is gone. Do you think i did everything right? 
Thanks again for your exceptional support!
Kind Regards!
