Change Header Font in Modern Portfolio Pro Theme

[dalebateman]

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

[AnitaC]

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.

---

Need help with customization or troubleshooting? Reach out to me.

[dalebateman]

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.

[Brad Dalton]

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

---

Tutorials for StudioPress Themes.

[dalebateman]

Thanks braddalton. That worked like a charm!

Have a great day!

Dale.

[baileycom]

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