Menu/Navigation fonts

• 

  fjordaniv · Member · Dec 7, 2014 at 2:48 pm

  • Copy link
  • Add topic to favorites

  I have 2 questions. I’m looking for a way to use a serif Typekit font in my body text (I’m using the Harmonic Theme) while using a san-serif font for my primary and secondary navigation menus.

  Currently, I’m using “font-family” in CSS to achieve this. It works, but it’s obviously not an idea solution.

  The second is this: is there any way to add a bit of extra space between the masthead/navigation window the the page titles? I’m using the following code to fix the masthead in place:

  #masthead {
  position: fixed;
  }

  It works beautifully, but the code draws each page title about a centimeter close to the masthead.

  Thanks!

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

• 

  fjordaniv · Member · Dec 7, 2014 at 9:20 pm

  • Copy link

  I found a solution to the padding issue with the masthead. I’m still looking for a way to change keep the main and widget menus from displaying the body font.

  This is just a matter of personal preference; I prefer a san-serif font for the menus and a serif font for the main body.

• 

  thesacredpath · Member · Dec 8, 2014 at 8:59 pm

  • Copy link

  Hi there, which textual elements in a theme are include in the “headings” and “body” font selections under Appearance > Customize > Fonts varies from theme to theme, and you can only use the two typekit fonts you choose.

  CSS gives you the ability to override those. To specifically target the entry content area text, you can use the following CSS. The font stack you see in my example are all cross-platform fonts, so they should all show up in Windows, Unix and in Mac.

  .entry-content {
      font-family: "Times New Roman", Georgia, serif;
  }

  To be able to use a serif font from Typekit, what you would have to do is set that serif font for “body” and then override the other areas that you do not want that font used (sidebar, menu, and/or….).

• 

  fjordaniv · Member · Dec 9, 2014 at 7:21 pm

  • Copy link

  Thank you! I opted to stick with the Typekit fonts, but I used CSS to make some alterations to the text sizes in the widget menus.

• 

  thesacredpath · Member · Dec 9, 2014 at 8:15 pm

  • Copy link

  Super! Your site is looking awesome!

• 

  fjordaniv · Member · Dec 9, 2014 at 11:15 pm

  • Copy link

  Thanks!

  Here are some of the codes I’ve found that work well with the Harmonic Theme. I’m posting them in case others would like to modify their blogs using similar settings.

  To make the navigation bar static—and to leave extra space between the bar and the page titles:

  #masthead {
  position: fixed;
  }

  #content-wrapper {
  padding: 141px 0 0;
  }

  To modify the text in the sidebar widget areas:

  .widget_nav_menu {
  font-size: 90%;
  line-height: 100%;
  }

  Both of the above require the Custom or Premium upgrades.

  To add drop caps: <span style=”float:left;color:#ccc;font-size:300%;line-height:1em;padding-right:6px;”>(Word or letter you’d like to use)

  This will produce a gray drop cap.

• 

  thesacredpath · Member · Dec 9, 2014 at 11:42 pm

  • Copy link

  Many thanks for posting those. I’m sure users will find them valuable. :)