Change font of all blog elements individually

How to use your own font for H2?

2 Likes

Hi there, @Juliane_Cosenza :waving_hand:

Do you mean this heading?

1 Like

Hi Max,

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

2 Likes

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

/* 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;
}
2 Likes

Yes!

2 Likes

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

1 Like

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

2 Likes

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 :slightly_smiling_face:

1 Like

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

2 Likes

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

1 Like

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

2 Likes

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

1 Like

YES, you are right!

2 Likes

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?

1 Like

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

2 Likes

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 :slightly_smiling_face:

2 Likes

Perfect! Thank you for your help!!! :smiley:

3 Likes

It’s my pleasure!

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

1 Like