Home / Forums / DynamiX Support / How to enable Google Font Weights

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts

  • Steven Ready
    Participant

    Hi Guys,

    I have looked through your support documentation and the troubleshooting guide and was wondering if you could share some tips/advice on how to implement different weight variations of a Custom Google font?

    I have followed your steps on adding a Custom Google Font and I have successfully applied it to my Heading styles in the Appearance > Customize settings. I am using Oswald (http://fonts.googleapis.com/css?family=Oswald). This Google font comes in 3 different weights; Light (300), Normal (400) and Bold (700). I would like to utilise these weights throughout my Heading styles but I can’t seem to get it to work. I have tried adding custom css to the h2 tag (under Appearance > Theme Options > Customize) adding importance to the font-weight property [ h2 {font-weight: 300 !important; } ], but this doesn’t seem to work.

    I have also tried adding a second Custom Google Font with the URL Name: ‘Oswald:300’ and Css Name: ‘Oswald-Light’. And while this appears in the Customise Font list it doesn’t pull in the font when applied (just shows the headings in ‘Times New Roman’, as if the font is not linking). One would assume then that URL Name: ‘Oswald:300’ does not work. Oddly though, if I select the created ‘Oswald-Light’ option and apply it to the Navigation Menu, the menu font turns to ‘Times’ but the Heading 1 changes to Oswald-Light?? But not Heading 2 or 3?? So not sure what’s going on? It appears to be pulling in Oswald-Light but applying it to the wrong element?!

    Is there any way to specify and apply a particular font-weight to a Google font and if so, what’s the best way to go about it because {font-weight: 300 !important} isn’t working.

    Cheers,

    Bex

    Ps: I am developing in Chrome (V34.0.1847.116m) and the dev site is: http://amt.digitallamb.com.au


    Tom ( Support)
    Keymaster

    Hi Bex,

    You can do the following.

    Appearance > Theme Options > General > Google Font
    URL Name: Oswald:700,400,300
    CSS Name: Oswald

    Appearance > Theme Options > Customize > Custom CSS

    h2 { 
     font-weight: 700 !important;
    }
    

    Select the font within Appearance > Customize and it should be a heavier font weight.

    Kind regards,
    Tom

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

You must be logged in to reply to this topic.