• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Changing One Font in Navigation Link

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing One Font in Navigation Link

This topic is: not resolved

Tagged: css, custom navigation font

  • This topic has 3 replies, 3 voices, and was last updated 10 years, 1 month ago by marybaum.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 31, 2012 at 12:24 pm #8614
    LimiGuy
    Member

    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!

    December 31, 2012 at 2:23 pm #8625
    Chris Cree
    Participant

    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.

    January 2, 2013 at 10:54 am #8960
    marybaum
    Participant

    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. 😀

    January 2, 2013 at 6:40 pm #9080
    marybaum
    Participant

    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
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble