Change font of menu item on hover/ active link to a custom font: exhibit theme

I am playing around with exhibit theme and so far really liking it. I want to add some customisations to elevate the feel of the entire site: one that I would love is for the menu font to change to a custom font on hover or when active.

Right now; the menu item is underlined on hover or when that is the current page. I would like to change this to the item being in a custom font (or png image) instead. I will add screenshots of current and an example of what I am hoping to achieve (I just did a quick photoshop mockup).

Hello,

Could you please share the site URL where you’d like to make changes? Are you looking to change the font when hovering over the menu? Have you added a custom font already?

I look forward to your response so I can provide further feedback.

Hello! The website is

http://www.ramptramptrampstamp.com

However this is for a theme that isn’t live yet! I haven’t added the custom font to my theme as of yet; I want to know if it would be better to add it as a font or make the hover texts png images

And also of course the code to dd this custom function :slightly_smiling_face:

Hello,

It depends on how much text you need to change. If it’s just a few text elements, using images might be better. However, if there is a lot of text to change, using a font would be more efficient. A single font load can replace text anywhere on the site. If the image size is larger than the font file, it could negatively affect site performance.

Thank you.

Okay yes that makes so much sense. I think because it is only these 4 menu items the png is a better plan for now.

Thats great If you find our solution is helpful, like to post and market as solved, It will help other to find the anser.
Thank you

Oh I still need to know how to actually do it! can you provide me with instructions/ code?

If you share your site url with that theme activated it will possible. as different theme use different tag. Secondly the process with image is little bit tricky and in the long run difficult for manage.

We need to add a custom data-bg attribute in each menu element where the image URL will be, When hover over the mouse by read the data attribute we need to show the image.

After investigate , I found the easy way is to use custom font, and in hover state the font change is easy.

Let me inform is that worked for you