Change the font of the category-text

juli312c replied

5 years ago

Customer Reply

It worked! Thank you so much :-)

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Maybe the inline CSS import not working correctly.

Please go to Appearance → Customize → Logo & Header → General, scroll down to Add Custom Code Inside <head> tag section, insert the code to this field:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

The code above will load Roboto font from the Google Font library.

Regards,
PenciDesign.

juli312c replied

5 years ago

Customer Reply

Hi

I've now published and cleared my site cache, but it still doesn't work.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Please press the Publish button, go to your page, clear the site cache then test again.

Regards,
PenciDesign.

juli312c replied

5 years ago

Customer Reply

Hi

It doesn't seem to be working either. See the attached photo.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

The problem is the Roboto is not currently available on your device, so please include this font on your site by adding an extra CSS file from Google Fonts.

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;1,400;1,700&display=swap');
.penci-featured-infor .cat>a.penci-cat-name,
.penci-standard-cat .cat>a.penci-cat-name,
.grid-header-box .cat>a.penci-cat-name,
.header-list-style .cat>a.penci-cat-name,
.overlay-header-box .cat>a.penci-cat-name,
.inner-boxed-2 .cat>a.penci-cat-name,
.main-typography .cat>a.penci-cat-name {
    font-family: Roboto;
}

You can find more fonts at: https://fonts.google.com/

Regards,
PenciDesign.

juli312c replied

5 years ago

Customer Reply

Hi and once again thank you for your fast reply.

When I post the code in my custom CSS nothing happens. I've attached a screenshot.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-featured-infor .cat>a.penci-cat-name,
.penci-standard-cat .cat>a.penci-cat-name,
.grid-header-box .cat>a.penci-cat-name,
.header-list-style .cat>a.penci-cat-name,
.overlay-header-box .cat>a.penci-cat-name,
.inner-boxed-2 .cat>a.penci-cat-name,
.main-typography .cat>a.penci-cat-name {
    font-family: Roboto;
}

Change Roboto to your font name.

Regards,
PenciDesign.

juli312c started the conversation

5 years ago

Conversation Start

Hi

How can I change the font used for the categories-text above the title, without changing the font on my body text in my blog posts?

Thank you.