Animated Image Rollover - Font Problems

Discussion in 'All Other Widgets' started by Jay Hash, Apr 18, 2016.

  1. Jay Hash

    Jay Hash Member

    Hey folks,

    Just curious about how to get different fonts, or what fonts are available in the animated image rollovers. I tried to add in some web fonts to use as the title, but the widget doesn't seem to be please with my formatting of the name. Is there a way to tell what each font should be called? Or even better can you integrate a drop down menu in an updated release to give us a font selection? Even if it is from our WebFont/Typekit menu? It's just really confusing and the default Arial looks atrocious on our site.

    Any help would be great!


    Jay Hash
  2. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    Jay, if you haven't, take a look at our blog post on using type in Muse. It covers things like naming and use with widgets.
    Muse's biggest issue is what the type is called. Unfortunately it's sometimes hard to find out. I've found my best source of names is to find what I want on a web site and then 'inspect' the code to see it's naming convention.
    Jay Hash likes this.
  3. Jay Hash

    Jay Hash Member

    Gotcha. Is there an easy way to apply font weights to this? For example, I'm using Helvetica Neue, but I want to use the bold version of the font. The font style is registered as Italic in the Inspect Element panel, but how can I apply that to the widget? Also, if you have multiple font names displayed in the font family (such as in the case of Helvetica neue where you get "font-family: Helvetica, Helvetica Neue, Arial, sans-serif"), which one do you use? Simply the closest one to the font name you are actually using, or always the second font in the list?

    Thanks for the help!
  4. Brandon

    Brandon Widgetsman Staff Member Advisory Group

    Hi Jay,

    This is the blog article that DJ referenced earlier:

    And yeah, using inspector to find the exact CSS style name is the way to know exactly what name to use. The quickest way would be to just publish or preview up a bit of the text yourself and inspect it in browser. And while you're at it, you will need to make sure you're publishing the font you want somewhere on the same page as the widget (you can hide it using font color).
  5. Jay Hash

    Jay Hash Member

    Yeah, I saw the blog article and was able to get the proper font names, but it doesn't really cover the questions in my second post. The CSS style sheet still lists about 3 fonts then "sans-serif" when it is published, and the video doesn't cover anything about bold or italic font styling.

Share This Page