Have you ever entered a font name into a MuseThemes widget, just to find that the font shown in the browser preview isn’t the font you defined in the widget’s option panel? If so, you’re not alone. Questions regarding this phenomenon are some of the most commonly received by our support team. This article will explain why it happens, and how to fix it.

Follow along with our tutorial video:

The Dilemma 

The issue can be seen in almost any Toolbox widget that offers the ability to define a font name in the option panel. Take the Sidebar Navigation Menu for example; there are two areas in the menu controller option panel for entering font names – one for the menu, and one for the links. The problem occurs when the font seen when previewing in the browser differs from the font defined in the option panel. 

Why Does it Happen?

The reason this occurs is the widgets themselves do not actually load fonts into the browser. Fonts are loaded when text is placed into a page within a Muse project, and a font is assigned to the text. This process in turn prompts Muse to write code that tells browsers what font(s) to load when previewed or published.

If a Muse page already contains text with the same applied font that is defined in a widget’s option panel, then the browser will display the correct font in the widget. In some cases, however, a widget may be the only thing on an entire page in a website. An example of this would be the MuseThemes Scrolling Thumbnail Gallery. Since this widget is built to operate in a fullscreen format, there is not much use in placing text on the page. This would be a common situation where the font defined in the option panel would not display in the widget.

What Do We Do About It? 

The solution is simple. As you have probably gathered, all that needs to be done is to ensure that the font(s) you define in the widget’s option panel are included as text somewhere on the page. This is easy on a page with a lot of existing text copy. If your page has no text, or the desired font is not in use, employ this easy fix: drop a bit of text anywhere onto your page, and assign the same font you wish to use in the widget. Next, assign the same color to the text that is in use as the page background color. This will hide the text so that it is “invisible” to viewers, but will still prompt the browser to load the desired font. Just a single character of text, such as a period, is enough to do the trick. 

One More Thing...

Another common snag seen when attempting to publish fonts in widgets is unknowingly using the wrong CSS style name for particular fonts. Every font has a very specific CSS style name used by web browsers. Sometimes that style name does not match the one in the Muse text panel’s font area. Annoying, right? 

For example, although the widely recognized Comic Sans font is referred to as  “Comic Sans” in the web safe fonts section of your Muse text panel, the actual CSS style name used by web browsers is “Comic Sans MS.” This means that if you are entering the font name into a widget option panel, it is necessary to use the actual CSS style name in order to be recognized by browsers. The correct CSS style names for fonts can be found by inspecting a web page’s source code, or often with a basic web search. Lastly, if you have a font that you just can't seem to get to work when you enter it into the widget panel, try hyphens between words. A few fonts such as Source Sans Pro, must be entered as "Source-Sans-Pro" (not case sensitive).

And That’s It!

Hopefully this helps to clear up some mystery if you’ve ever encountered this issue. As always, please contact us if you have any questions on this or any other topic. We look forward to hearing from you!