Changing the menu font in autofocus

• 

  stillunique · Member · May 13, 2014 at 8:42 pm

  • Copy link
  • Add topic to favorites

  How do I change the font style and size for my menu bar in autofocus?

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

• 

  allancollins23 · Member · May 13, 2014 at 8:54 pm

  • Copy link

  Hi stillunique,

  You can open up your theme customizer (Appearance->Customize), go to CSS and insert the following:

  div.menu ul li.page_item a{
  	font-size:18px;
  	font-family:Arial;
  }

• 

  stillunique · Member · May 13, 2014 at 9:13 pm

  • Copy link

  Thanks, however, I must be missing something because I couldn’t get it to work.

• 

  allancollins23 · Member · May 13, 2014 at 9:15 pm

  • Copy link

  Sorry,

  Can you try this?

  #menu li a{
  	font-size:18px;
  	font-family:Arial;
  }

• 

  stillunique · Member · May 15, 2014 at 7:51 pm

  • Copy link

  Yes, thank you that worked. Is arial my only option? When I try another font the menu reverts back to default.

• 

  thesacredpath · Member · May 15, 2014 at 11:34 pm

  • Copy link

  @stillunique, with fonts, you have to either use one that is common to all computers since that is the main location that the browser will pull from, or use one of the custom fonts you have set at Appearance > Customize > Fonts. I see you have Open Sans set for both body and headings. The following sets the menu to Open Sans and sets the font weight back to normal (was bold). Currently you can only use a Custom Typekit font if it is one that you have set at Appearance > Customize > Fonts.

  #menu li a {
      font-family: open-sans-1,open-sans-2,"Hoefler Text","Baskerville old face",Garamond,"Times New Roman",serif;
      font-size: 20px;
      font-weight: normal;
  }

  If you wish to use something different, here is a listing of 10 web safe fonts and it includes typical font stacks you can use.