Jump to content


Photo
- - - - -

font change on hover in main navigation bar

navigation custom font change custom nav navbar

Best Answer rjltaylor , 02 March 2013 - 12:19 AM

Great! Thanks so much! The article helped a lot as well! Go to the full post


  • Please log in to reply
6 replies to this topic

#1 rjltaylor

rjltaylor

    Newbie

  • Members
  • 9 posts
  • LocationLas Vegas, NV
  • Country: Country Flag

Posted 28 February 2013 - 10:57 PM

Would like to make a font-family change (ChopinScript) on hover in the main navigation bar. I've made several attempts in the custom code area, but can't seem to get the correct formula or the find right section of the stylesheet to make the change.

 

Would kindly appreciate some assistance if you've done this before.

 

The site can be viewed at

Please Login or Register to see this Hidden Content

 

Thanks in advance for your help!



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 01 March 2013 - 12:32 AM

Hi there, how are applying the font? Is it part of googlefonts or via typekit/cufon etc.



#3 rjltaylor

rjltaylor

    Newbie

  • Members
  • 9 posts
  • LocationLas Vegas, NV
  • Country: Country Flag

Posted 01 March 2013 - 07:36 AM

Yes, I'm using the WP Googlefonts plug-in.

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 01 March 2013 - 09:12 AM

HI,

 

Unless my eyes are deceiving me I am unable to find that font in the Google webfonts service.

 

Therefore, you will most likely need to use the @font-face to include this font on your website, you can find more information on @font-face here.

 

Please Login or Register to see this Hidden Content

 

The add the font family to your custom CSS for the nav a:hover class.



#5 rjltaylor

rjltaylor

    Newbie

  • Members
  • 9 posts
  • LocationLas Vegas, NV
  • Country: Country Flag

Posted 01 March 2013 - 07:34 PM

Hi Danny,

Sorry, you are correct. I apologize for the confusion. From what I've found at font-face, it should look like this:

@font-face {
font-family: 'ChopinScript';
src: url('chopinscript-webfont.eot');
src: url('chopinscript-webfont.eot?#iefix') format('embedded-opentype'),
url('chopinscript-webfont.woff') format('woff'),
url('chopinscript-webfont.ttf') format('truetype'),
url('chopinscript-webfont.svg#chopinscript') format('svg');
font-weight: normal;
font-style: normal;
}

However, my brain is struggling the make the connection code to actually make it happen. How do I connect the a:hover class code to this? It feels like I'm missing steps and this is new and unfamiliar territory for me right now.

Your expertise would be greatly appreciated!

#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 01 March 2013 - 11:12 PM

Hi there, once you've added the @font-face code you can just call the font in the css.

 

Please Login or Register to see this Hidden Content

 

 

This site gives a good example -

Please Login or Register to see this Hidden Content



#7 rjltaylor

rjltaylor

    Newbie

  • Members
  • 9 posts
  • LocationLas Vegas, NV
  • Country: Country Flag

Posted 02 March 2013 - 12:19 AM   Best Answer

Great! Thanks so much! The article helped a lot as well!





Also tagged with one or more of these keywords: navigation, custom, font change, custom nav, navbar