What is "Alternative Font" in Font Manager? And what's with the extra backup fonts in Index CSS?

Wondering what the purpose of “Alternative Font” is, and where that font gets used.

Not sure if it’s related for not, but I also noticed that there are numerous backup fonts for the main body font I’ve chosen. When Inspecting with Dev Tools it shows “Optima,Segoe,“Segoe UI”,Candara,Calibri,Arial,sans-serif”. Where can I change this?

My iPhone is showing the body in Candara I believe, which I really don’t like.

Hi There,

Thank you for writing in, in X and PRO you can assign fonts under X > Theme Options > Typography and you can declare fonts under X > Fonts (Font Manager)

To answer your main question, the “alternative Font” or list of fonts is prioritized from left to right, it will use the first value if it’s available, or go to the next one until the end of the list. The default font family is defined by the browser preferences.

Websites will be viewed on a different machine/browser and there is no guarantee that machine/browser will support your custom font, so you need the alternative generic fonts in those cases.

Hope this shed some lights,

No, that’s not what I was asking. I’m very aware of all of those things you just stated.

When you’re INSIDE of the FONT MANAGER (X > Theme Options > Typography) there are 3 font choices - body, header, and “alternative font”. What is that “alternative font” used for?
I ask because the “alternative font” is not in that list of backup fonts.

I also did not choose that list of backup fonts and I know that’s not a browser default because I’ve never seen a browser show anything other than “serif” or “sans-serif” for the backup font. Not to mention that the dev tools states that those fonts are coming from the index CSS - it’s not the browser choosing those fonts.

What’s the best way to change the list of backup font families that are showing in my Index CSS?
{font-family:Optima,Segoe,“Segoe UI”,Candara,Calibri,Arial,sans-serif;}

Hey @a_buzon,

By “Alternative Font”, you mean you’re seeing an extra font like the screenshot below?

What comes out of the box in X is only Body Copy and Headings. It looks like you or a colleague of your set that font up.

Optima is a system font and if it is not available in your system, it will load up Segoe as you already know. Since you see Candara in your phone, that means the fonts before it are not available. There’s no option to change the sequence moreover that the fallback is carefully designed. You will need custom CSS to change that which is not recommended as you would need to create your own class and apply to each of the elements or you would need to target a lot of elements and also defeating the purpose of the Font Manager.

For cross-browser consistency, you will want to choose a Google Font so the font will come from Google’s servers.


Yes, the “Alternative Font” in Font Manager, hence the title of this topic “What is “Alternative Font” in Font Manager?”.

Are you saying that the Alternative Font is NOT a backup font?

I’ve set up this entire site from the ground up and I can assure you that the “Alternative Font” option was included “out of the box” with X. While yes, I did choose a font-family in the Alternative Font, the actual option for adding an Alternative Font was not something that I “set up”.

It’s so strange that there is so little knowledge about a feature that came standard in the version of X I purchased.

It’s also strange that all these backup fonts are pre-selected and cannot be easily changed. Candara is nothing like any of the other fonts in that string.

Also, I purposely did not want to use Google fonts as to keep the number of scripts running to an absolute minimum.

Hi a_buzon,

Yes, alternative font isn’t a backup font. As Christian stated by default you shouldn’t have this “Alternative Font” item in the Font Manager and I’ve no idea where this item came from. I’ve confirmed that with a fresh install of X theme this item in Font Manager doesn’t exist.

These backup fonts are defined in this file:

which -unfortunately- can’t be overwritten in a child theme. The only way would be adding Custom CSS codes in (X > Theme Options > CSS) but also as Christian stated it will be a bunch of selectors to add, for example this one for the body:

body, input, button, select, textarea {
    font-family: Optima,"Segoe UI",Segoe,Candara,Calibri,Arial,sans-serif;

I altered the order of the fonts in the code above.


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.