[Resolved] custom font class

[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;
}

[Elvin]

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.

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

A wise man once said:
"Have you cleared your cache?"

[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>

[DM]

I got it! just took the dot off!

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

[Elvin]

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;
}

A wise man once said:
"Have you cleared your cache?"

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[DM]

Thanks! 🙂

[Elvin]

Awesome, no problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts