Museo Sans font in mobiles etc.

• 

  yogamarinella · Member · Feb 18, 2015 at 8:31 am

  • Copy link
  • Add topic to favorites

  Hi,

  I am using the Edin theme. I’ve set up Museo Sans font as my main title font, but it won’t show in mobile devices (it shows in navigation and footer but not titles). Is there anyway to fix this? Or should I just use an alternative?

  Thanks,
  Mervi

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Feb 19, 2015 at 1:44 pm

  • Copy link

  That is happening because you have referred to fonts incorrectly in your custom CSS:

  .wf-active {
  	font-family: Museo Sans, Gudea, Helvetica, "Helvetica Neue", Arial, Verdana, Tahoma, sans-serif !important;
  	font-variant: normal;
  }

  

  What you have done is added Museo Sans as part of a font stack, and doing it that way tells the browser to show the font if the viewer has that font installed on their computer locally. If you want to use the web font instead, then you need to use the names the web font service uses.

  So, the simplest way to customize fonts is to use the Appearance > Customize > Fonts settings instead of trying to customize them further in CSS.

  If for some reason you want to make additional font adjustments based on the selections you already made in the Appearance > Customize > Fonts panel, you can do that by looking in the page source after the font settings have been saved and copying the “font-family” rule used by the font service.

  For example, this is the rule used for Museo Sans that should work:

  font-family: museo-sans-1,museo-sans-2,"PT Sans",sans-serif;

  You can change out the things at the end of that list, such as “PT Sans” as those are just fallbacks in case the first two fonts don’t appear for some reason. Also, you don’t need to add that into your custom CSS because the Appearance > Customize > Fonts settings should already cover that.

  You might also like this page about how font stacks work:
  http://web.archive.org/web/20131010010610/http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

• 

  yogamarinella · Member · Feb 20, 2015 at 9:53 am

  • Copy link

  Thank you for clarifying this for me! It seems to have done the trick!

• 

  designsimply · Member · Feb 20, 2015 at 4:18 pm

  • Copy link

  Awesome!! Whew. :)