Prose and Google Fonts

Community Forums Forums General Discussion Prose and Google Fonts

This topic is: not resolved

This topic contains 5 replies, has 3 voices, and was last updated by  cspowers 1 year, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #22824

    Jim Goodrich
    Participant
    Post count: 3

    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.

    #22993

    David Chu
    Participant
    Post count: 1371

    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

    #23015

    Jim Goodrich
    Participant
    Post count: 3

    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.

    #23020

    David Chu
    Participant
    Post count: 1371

    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

    #23025

    Jim Goodrich
    Participant
    Post count: 3

    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. :-)

    #39802

    cspowers
    Participant
    Post count: 8

    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

    • This reply was modified 1 year, 5 months ago by  cspowers.
    • This reply was modified 1 year, 5 months ago by  cspowers.
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.