Before you ask please READ THIS

How to use different fonts for a text logo and the menu headings

edited March 2013 in Hypershot Posts: 39
Hi there!

Thanks to Air's awesome reply to this question: I was able to change my problematic image logo for a text one, which I like much better (thank you!).

My question now is the following: Is it possible to have the 'logo' in one font, and the menu headers/ navigational bar menus (HOME, blog etc) in a different font? Right now I have them in different sizes (thanks to copying and pasting the adjustments suggested above), but is there a way to also have them in different fonts?

I am attaching a couple of screen shots. I would love the logo to be in the bolder font, while the menus (Home, BLOG etc) are in the ultra-light font):

Both fonts will be google fonts.

Thank you so much!


  • Posts: 39
    Found the answer! adding a simple line there :-) :

    #logo {
    color: #000000;
    font-family: 'GFS Didot';
    font-size: 40px;
    font-weight: normal;
    height: 40px;
    line-height: 40px;
    padding: 10px;
    white-space: nowrap;

    ... but I do have a related question! Is there a way to get rid of the blank space underneath the navigational bar menus (see screen shot, the part highlighted in green). The thing is the navigational menus are kind of floating above this white line. I would love for them to be aligned with the logo (or central in respect to it).

    Thank you so much!
    menu alignment.jpg
    497 x 311 - 59K
    menu alignment.jpg
    497 x 311 - 59K
  • AirAir
    edited March 2013 Posts: 10,000

    Yup using font-family is what I would suggest :-)

    About your second question - please show me live link and I will then tell you what needs to be adjusted.

    With regards.
    Post edited by Air on
  • Posts: 39
    Hi Air,

    Thank you so much! Here is the live link:

    Basically I would just like the headings 'Blog' Home' etc. to be lower (aligned with the text logo OR central with respect to it) so that it looks better as a whole. Getting rid of the blank space underneath it (shaded in green in the screen shot above), would seem to do the trick.

    Thank you so much!


  • Posts: 39
    Ugh! I thought I was done with my original question above, but I do have a follow up/ qualification:

    I would like to use a specific font *only* for the text header (it looks so much better than any graphic I put there), but not elsewhere on the site. The thing that I am finding is that unless I select that font as one of the options under 'font settings' (for either normal text, headers or nav bar), I cannot have the font I specify in the custom css show up. It is as if the 'font settings' were the ones that made the font be loaded in the site and only once that is done, I can call it to be the font of the text logo.

    I love a certain font for the logo, but dislike it very much anywhere else in the site (I happen to only like the font in capitals). Is it possible to somehow make that work?

    Thanks so much!
  • Posts: 39
    I solved my 1:21 post :-). Added this to the section as advised by google fonts:

    Now I just need to find out how to know how to solve the 12:10 post (how to align headers nicely) to make it work :-)
  • Posts: 39
    Hmmm... the above doesn't seem to work anymore :-( I want the Logo in Vidaloka and the Nav bar menu in Lato 100 :-(
  • AirAir
    Posts: 10,000
    I think I am getting lost :-)

    For line height try using this CSS(experiment with values if needed)

    .top-menu {
    height: 55px;
    .top-menu > li > a {
    line-height: 70px;
    If you selected your desired fonts in Hypershot theme->Fonts you don't have to add any code to page:-)
    Now you need to only use it to desired elements.

    If you wish to use font Lato with weight 100 for menu we will have to:
    1. Select it in fonts menu(Third font chooser)
    2. tell CSS about it(about font weight)

    .top-menu li a{
    font-weight: 100 !important;
    For logo I can see you have added use of Vidaloka but you have not added this font from google. In this case I think best would be to add code from google fonts like you did previously.
    <link href='' rel='stylesheet' type='text/css'>

    By the way: I think you should switch social icons set to dark cause icons are now invisible :-)

    With regards.
  • Posts: 39
    Yes! You are a genius, Air! :-) You could solve the problem even though I almost lost you :-). It looks great now! Thank you!

    Thank you so much for the tip on the social icons too. After much debating, I think I'll end up not having them because they clash a little bit with such an angular logo I picked. I will just make page linked from the menu linking to all of that.

    Thank you so much!
  • AirAir
    Posts: 10,000
    That is great! Good luck with your site:-)
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion