[Resolved] custom font class

Home Forums Support custom font class

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1442889
    DM

    Hi there!

    I need to create a custom class ‘tgch1’ in my child theme css like H1, H2, H3 that will apply specific formatting to the custom class. I think that I am overthinking it. I have imported my Adobe fonts using a hook in the GP Elements. I added this to the child css:

    @font-face {
    font-family: ‘tgch1’, clarendon-urw, serif;
    font-weight: 600;
    font-size: 72px;
    }

    #1443128
    Elvin
    Customer Support

    Hi,

    @font-face {
    font-family: ‘tgch1’, clarendon-urw, serif;
    font-weight: 600;
    font-size: 72px;
    }

    @font-face needs a src: url(url link to font); to work but I believe you don’t have to add this CSS anymore.

    Assuming you’ve done the proper steps on importing Adobe Typekit/fonts to WordPress, you won’t have to @font-face importing of fonts as the embed code provided by will do that for you.

    I’ve checked your site and found this linked css. This css file is already importing clarendon-urw.
    adobetypekit

    You can read its contents here.
    https://use.typekit.net/rbc4ibz.css

    Since your site is already loading a CSS that imports the typekit fonts, you can try creating custom classes by doing something like this:

    .tgch1 { 
    font-family: "clarendon-urw",serif; 
    font-weight: 600;
    font-size: 72px;
    }

    Let us know if it works for you.:)

    #1443171
    DM

    I tried add this code to the child theme css file and it did not work. Unless I am calling it wrong. I used <tgch1>Sample Title</tgch1>

    #1443188
    DM

    I got it! just took the dot off!

    tgch1 {
    font-family: “clarendon-urw”,serif;
    font-weight: 600;
    font-size: 72px;
    }

    #1443199
    Elvin
    Customer Support

    I tried add this code to the child theme css file and it did not work. Unless I am calling it wrong. I used <tgch1>Sample Title</tgch1>

    You use css classes by doing something like this:

    <h1 class="tgch1">Sample Title</h1>

    I see that you’re using custom HTML tags rather than CSS classes.

    If you want to do CSS w/ custom HTML tags like (<tgch1>) instead of classes (<h1 class="tgch1">), you can do something like this.

    tgch1 { 
    font-family: "clarendon-urw",serif; 
    font-weight: 600;
    font-size: 72px;
    }
    #1443202
    Elvin
    Customer Support

    I got it! just took the dot off!

    tgch1 {
    font-family: “clarendon-urw”,serif;
    font-weight: 600;
    font-size: 72px;
    }

    Nice one. Good to know.

    Feel free to open new topics if you have any other questions that needs addressing.

    Cheers.

    #1443207
    DM

    Thanks! 🙂

    #1443213
    Elvin
    Customer Support

    Awesome, no problem. 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.