How to use @font-face/TypeKit and how to change wrapper color

Home Pootlepress Academy Support Forums Academy Support Forum WordPress themes How to use @font-face/TypeKit and how to change wrapper color

Viewing 1 post (of 1 total)
  • Author
  • #7221
    Kim Young


    I am building a site in Canvas. The designer has specified Adobe Garamond for the primary font, so I have to use @font-face and TypeKit, and I have never used either, before.

    I have signed up for TypeKit, and was given some javascript to put in the Head of my site. Is this something I can put in the custom.css file, or do I have to go into a template page – I am still trying to learn about the template pages,etc.

    Once the javascript is installed, I also have to chose the selectors for the site.

    Here is copy from a pop-up in TypeKit regarding selectors – but I’m not sure how to implement to be sitewide.
    Using font family names in your CSS
    In addition to using the Selectors setting to tell Typekit where to apply this font, you can use the font directly in your CSS rules with the following font-family value:


    Here’s an example:

    h1 { font-family: "garamond-premier-pro"; }

    You can also include a fallback font for older browsers by listing it after the Typekit font-family value. Here’s an example of that:
    h1 { font-family: "garamond-premier-pro","Times",serif;

    And, another question I have is regarding how to make the wrapper/background
    - am finding it called different things - a different color than the container/site.
    I found some conflicting things on the web, and so I asked WooThemes, and the answer I got back
    was to add this to the custom.css file - body {background: #hexnumber;}

    When I did that it turned everything the same color - the background/wrapper and the container/site!
    So, I went and deleted it, updated the file, cleared the browser cache, and re-started the browser, but the site/wrapper still are all the same color!

    I also went into "Styling" in Canvas and looked at the hex# for background and it was #ffffff - white, but the site is not showing up that way.

    Soooooo, any assistance the Pootlepress community can offer will be GREATLY appreciated!

    Thank you very much in advance!


Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.
Scroll to Top