Prose and Google Fonts

[Jim Goodrich]

Hi all,

I'm trying to use Google fonts with the Prose theme on Bluehost. I've found that only the @import has any effect that I can see, although I have tried all four methods listed (including the enque method Brian Gardner wrote about). Here is my import statement found in the custom code page at the top:

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic,700italic,400,700);

and here is my a copy of some of my css calling the font:

#header .widget-area {
color: #000000;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
font-style: italic;
font-weight: 700;
letter-spacing: 0.13em;
line-height: 1.3em;
text-indent: 10%;
text-shadow: 3px 1px 4px #DDDDDD;
padding: 63px 0 0;
}

That works here on my Dev site hosted at GoDaddy:

http://sp.jamesgoodrich.net/about/

And it doesn't work at all on the Production site (not live yet) at Bluehost:

http://69.195.124.85/~samuelt2/

It works across 4 browsers on the Dev site (Chrome, Firefox, Safari and IE) and I'm on Windows.

Any ideas would be greatly appreciated.

[David Chu]

I can see the font just fine on Bluehost on the top navigation and the header widget area.

If you're not seeing it, I do see one difference.  The Bluehost site's CSS is minified, maybe that's giving you some issue, as well as the Total Cache.  You could try a hard refresh, or disable those babies and see what happens.

I can't break it, and I looked at it in a couple browsers, Chrome and FF on Win.

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Jim Goodrich]

Thank you for getting back to me. I was working on it most of the day today and wasn't sure at which point, it started showing, so I have no idea what fixed it.

I'm now experiencing a bout of FOUT with Firefox that's been quite disturbing to me. That's why I minified the CSS and tried Total cache, to see if either would resolve it. It may be the version of FF that I have.

 

Thank you for gtetting back to me on this. I really appreciate it.

[David Chu]

Jim,

Glad it's working now!  Hard to say what would cause that exactly.   I have acquaintances on Safari, which has its own iron cache from Hell, but you're on Windows, so that wouldn't be it.  (My Mac design colleague uses FF Mac instead).

Also, in my experience, Bluehost is clearly better than Godiddy, so I wouldn't point to that, either.   🙂

One of those mysteries!  btw, I learned a new word, thanks!  I've seen FOUT but never had a name for it.

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Jim Goodrich]

Thank you, and I agree with your host assessment, I'm a bit mired in the dev area, but not the folks for whom I build sites, hence, the hosting difference.

I just learned of FOUT (the term) today myself... I've also seen FOUC now too, so cheers for acronym vocabulary enhancement. 🙂

[cspowers]

Hey, I'm having a similar problem customizing my fonts on the prose theme.

What I want to do is use Oswald for my heading font, especially the H1 tags on post titles.

I'm on Genesis Version: 1.9.2 · Released: April 10, 2013

I'm using the Prose theme Version 1.5.2

I added the following code to the customs function in the genesis settings

add_filter('prose_font_family_options', 'custom_prose_font_family_options');
/**
* Edit a Prose font stack option.
*
* Ensure that double-quotes wrap the font stack variable, with single quotes
* wrap multi-word fonts.
*
* @param array $options Font options ( 'Display Name', 'font stack' ).
*
* @return string
*/
/** Load Google fonts */
add_action( 'wp_enqueue_scripts', 'custom_load_google_fonts' );
function custom_load_google_fonts() {
wp_enqueue_style( 'google-fonts', 'http://fonts.googleapis.com/css?family=Oswald|Merriweather|Open+Sans', array(), PARENT_THEME_VERSION );
}

I modified the h1 field as follows:

h1,
h2,
h3,
h4,
h5,
h6 {
color: #222;
font-family: Oswald, Arial, Helvetica, sans-serif;
font-weight: normal;
line-height: 1.25;
margin: 0 0 10px;
padding: 0;
}

When I load the page, the post title (an h2 tag) is unchanged. It's not using Oswald.

When inspect the post title with Google Chrome's inspect tool, it shows me two rules for h2

h1,h2,h3,h4,h5,h6{color:#222;font-family:Oswald,Arial,Helvetica,sans-serif;font-weight:normal;line-height:1.25;margin:0 0 10px;padding:0;}

h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-weight:bold;text-transform:none;}

It shows that the second rule  is overriding the first. Weird thing is, both rules are in the generated file

/wp-content/uploads/prose/minified.css?ver=1367970488

I have no idea what the ?ver=1367970488 means but I see that the there is a file by that name and it has a comment up at the top indicating that it is "generated"

The rule with Oswald in it matches the edits I made in style.css. I have no idea where the other rule came from. But it's the one overriding

Also, what the heck is this minified.css file in the uploads/prose directory? Based on the comment thread above, I got the impression that this file is created when you make changes to the Genesis settings and save them. Sure enough. I deleted the minified.css file, hit the same button and it regenerated the minified.css file.

The crazy thing is. If I delete the minified.css file, the Oswald font appears in the post title! And it appears to stay that way until the next time I make a change in the Genesis settings and theminified.css file gets regenerated.

That's as far as I've been able to get with it.  Also, in case it matters, I'm on Bluehost.

Any recommendations?

Calvin

[Author]

Posts