Change font of all blog elements individually

[Juliane_Cosenza]

How to use your own font for H2?

[Max]

Hi there, @Juliane_Cosenza

Do you mean this heading?

[Juliane_Cosenza]

Hi Max,

Yes I mean this heading, and if possible also the Sub Head and Text.

[Max]

Sure, here is the code that changes the font of all elements individually

/* Post title in the card */

[class*="card-content__CardContentTitle"] {
font-family: Times New Roman;
}

/* Post description in the card */
[class*="card-content__ClampedTypography-sc"] {
font-family: Times New Roman;
}

/* Post title in the popup */

[class*="post__Title-sc"] {
font-family: Times New Roman;
}

/* Post description in the popup */

[class*="post__Header-sc"] > [class*="typography__Container-sc"]:not([class*="post__Title-sc"]) {
 font-family: Times New Roman;
}

/* Author name */

[class*="post__Author-sc"] > [class*="typography__Container-sc"] {
font-family: Times New Roman;

/* Post text in the popup */

.es-post-content {
 font-family: Times New Roman;
}

[Juliane_Cosenza]

Yes!

[Max]

@Juliane_Cosenza Do I get it right that the code worked fine?

[Juliane_Cosenza]

This is a proprietary font that is on the web server. How can I integrate them?

[Max]

To apply this font, it should be installed on your website. Once it’s done, just replace Times New Roman in the CSS code with the name of your custom font

[Juliane_Cosenza]

The font is installed, but it doesn’t work. Do I have to specify a path?

[Max]

Could you please send me a link to the page, where your widget is installed?

[Juliane_Cosenza]

Here is the link: https://tonys-burger.de/

[Max]

milkstore01_textured font should be applied to the main heading and MyriadPro-Light to the other text, am I correct?

[Juliane_Cosenza]

YES, you are right!

[Max]

I’ve added the names of your fonts to the CSS code I’ve shared, added it to your widget and it worked fine:

Could you please check it?

[Juliane_Cosenza]

The heading in the header should not be bold and the text should be the same size as the text on the homepage. Thanks

[Max]

I’ve combined the codes for changing the font size and font family into one code. I’ve removed the bold effect from the title by adding font-weight: 400; value to the code:

And the font size is different from the size on your website because you’ve set custom sizes in the CSS code. If you’d like the font size to match the text on your website, please change these values in the code

[Juliane_Cosenza]

Perfect! Thank you for your help!!!

[Max]

It’s my pleasure!

Don’t hesitate to contact us here again if you have any questions. We’ll be happy to advise