Prose Not Displaying Google Fonts

Community Forums Forums Design Tips and Tricks Prose Not Displaying Google Fonts

This topic is: resolved

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

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

    NathanBWeller
    Participant
    Post count: 12

    I’m attempting to import a specific google font as my blog’s header title and header tagline by following the instructions in this post. Unfortunately it does not seem to be having any effect.

    Here is the css I’ve used:

    /* Import Fonts
    ———————————————————— */

    @import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC);

    #header .title-area {
    font-family: ‘Playfair Display SC’, serif;
    }

    Any help would be appreciated :)

    Thanks,

    Nathan

    http://nathanbweller.com/
    #49475

    dev
    Participant
    Post count: 457

    Turn off the minified CSS switch (not sure where it is, but it is somewhere in the theme settings) and we can help you.

    [editorial]
    Please folks. If you want help please not only give us a link to the site but make sure your CSS file is NOT minified. Many of us use Chrome’s “Inspect Element” tool to help debug a problem and we can’t read a minified CSS file.
    [/editorial]

    #49479

    NathanBWeller
    Participant
    Post count: 12

    Sorry about that. Turned off.

    #49502

    dev
    Participant
    Post count: 457

    Put this at the end of your custom.css:

    [css]
    .header-full-width #title-area,
    .header-full-width #title-area #title,
    .header-full-width #title-area #title a {

    font-family: Playfair Display SC;
    }
    [/css]

    Let us know if it works.

    Dev
    NewMedia Website Design

    • This reply was modified 1 year, 2 months ago by  dev.
    • This reply was modified 1 year, 2 months ago by  dev.
    #49504

    dev
    Participant
    Post count: 457

    Oh… and put this after the above:

    [css]
    #title-area #description {
    font-family: ‘Playfair Display SC’
    }
    [/css]

    OR… put it all in one override:

    [css]
    #title-area #description, .header-full-width #title-area,
    .header-full-width #title-area #title,
    .header-full-width #title-area #title a {

    font-family: Playfair Display SC;
    }
    [/css]

    (I prefer to keep areas separate most of the time, but to each their own!)

    Dev
    NewMedia Website Design

    #49526

    NathanBWeller
    Participant
    Post count: 12

    That worked, thanks!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.