Changing One Font in Navigation Link

[LimiGuy]

I would like to have a specific font (Algerian) for a tab in the navigation bar. Is there a way to custom change the font of one sub-tab while leaving all other tabs the same?

URL: http://www.corbinsteel.com/hay-express/hay-express-sidekick/

Thanks in advance!

[Chris Cree]

It sure is.

From your dashboard go to Appearance --> Menus
At the upper right part of the screen click on the "Screen Options" tab
In the screen options look under the Show advanced menu properties section
Click the checkbox for "CSS Classes"
Then go down to the menu item you want to have a different font
Add a CSS class like "algerian" (without the quotes)
Then add the class .algerian to your style sheet and define it with that font.

Note: I don't know if Algerian is a regular web font so you may need to add it to your site via Google fonts or whatever as well.

[marybaum]

Algerian is not. You'll need to find a way to use it with @ font-face; I would be fairly confident you can use it with the free account at fonts.com, which is a great source for moderately old typefaces. If you want to own a desktop copy and upload a webfont-formatted package to your own server, you might find it on Fontspring.com or fontsite.com. If you use fontsite, you'll just be downloading the .otf but you'll have the right to make a font-face kit at fontsquirrel.com or with a desktop converter.

Whatever you do, please don't just make your kit with a downloaded font from some site like Dafont. The files from sites like those are not necessarily free; a lot are pirated and uploaded. In the case of Algerian, your maximum exposure to buy the font for your site is under $20, so it's well worth it to go legit.

Hope that helps.

Mary Baum
http://wpstl-video.org

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

As I suspected, now that I'm no longer riding in a moving car:

The original Algerian from 20 years ago is available as a hosted webfont at fonts.com: http://www.fonts.com/search/web-fonts?searchtext=Algerian&SearchIn=web-fonts#product_top

Don't know of you can access in the free account or need to upgrade to the $10/month account.

An updated version is is for sale for $35 at Fontspring: https://www.fontspring.com/fonts/fontmesa/algerian-mesa

 

Mary Baum

http://wpstl-video.org

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[Author]

Posts