• 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

Change Header Font in Modern Portfolio Pro Theme

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 › Change Header Font in Modern Portfolio Pro Theme

This topic is: resolved

Tagged: change, font, header, Modern Portfolio Pro

  • This topic has 5 replies, 4 voices, and was last updated 7 years, 11 months ago by baileycom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 27, 2014 at 9:07 pm #121461
    dalebateman
    Member

    Hey everyone!

    Can someone give me some guidance on changing the font in the header at the top of the Modern Portfolio Pro Theme please?

    I want to change the font in the site title as well as the "monogram" within the black circle to the script font used in the "Scribble" theme (I think it's called Dancing Script, right?)

    I think it's within this section of code:

    .site-title {
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    margin: 0 0 8px;
    text-transform: lowercase;
    }

    .site-title a,
    .site-title a:hover {
    color: #222;
    text-decoration: none;
    }

    .site-title a::before {
    background-color: #222;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: 'Merriweather', serif;
    height: 48px;
    line-height: 2.1;
    margin-right: 12px;
    padding: 3px 4px;
    text-align: center;
    width: 48px;
    text-transform: uppercase;
    }

    Whenever I change the 'Lato' or the 'Merriweather' fonts, it doesn't change for me. Is there some reason why I couldn't use Dancing Script in this theme?

    Or is it something else entirely that I'm missing?

    Thanks in advance for the help!

    Dale

    http://lisamastersart.com
    August 27, 2014 at 10:05 pm #121467
    Anita
    Keymaster

    Did you add the "@import url(http://fonts.googleapis.com/css?family=Dancing+Script);" code for Dancing Script into your theme style sheet?? Or are you merely changing the words? You have to either add the fonts via CSS or enqueue them in your functions.


    Love coffee, chocolate and my Bella!

    August 28, 2014 at 5:23 am #121486
    dalebateman
    Member

    Thanks for the tip Anita.

    Yes, I am wanting to change the font itself to the script. Does the code you sent go in a specific place in order for my theme to recognize the new font?

    Thanks again, I appreciate your help!

    Dale.

    August 28, 2014 at 6:12 am #121488
    Brad Dalton
    Participant

    This may help http://wpsites.net/wordpress-tips/free-google-web-fonts-for-wordpress/


    Tutorials for StudioPress Themes.

    August 28, 2014 at 6:53 pm #121599
    dalebateman
    Member

    Thanks braddalton. That worked like a charm!

    Have a great day!

    Dale.

    April 14, 2015 at 2:12 pm #147919
    baileycom
    Member

    I am also wanting to change the font style for the site title (the header) on the home page (I'm using the Executive Pro theme). So, if I understand what's written above correctly, I need to follow the directions provided by braddalton, and then afterwards, find code that starts with " .site-title { ... font-family... etc." and add the desired font to that list? I am not a coder, so it makes me nervous, but I'm willing to try. Please let me know if that's correct. (OR, if there's a plugin, such as Easy Google Fonts, that will allow me to easily change the site title font on Home page.)
    Thanks in advance for your help!
    Cindy

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change Header Font in Modern Portfolio Pro Theme’ is closed to new 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