Archived

This topic is now archived and is closed to further replies.

  • 0

font change on hover in main navigation bar


Question

Posted · Report post

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 http://www.pjodwyer.com/pjwp/

 

Thanks in advance for your help!

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

http://www.font-face.com/

 

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

Share this post


Link to post
Share on other sites