Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2835593
Change the font of the category-text
Closed

Comments

  • juli312c started the conversation
    July 27, 2021 at 4:14pm

    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.

  •  2,613
    PenciDesign replied
    July 27, 2021 at 4:32pm

    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 replied
    July 27, 2021 at 4:37pm

    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.


  •  2,613
    PenciDesign replied
    July 27, 2021 at 4:39pm

    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
    July 27, 2021 at 4:43pm

    Hi 

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

  •  2,613
    PenciDesign replied
    July 27, 2021 at 4:45pm

    Hi,

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

    Regards,
    PenciDesign.

  • juli312c replied
    July 27, 2021 at 4:50pm

    Hi

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

  •  2,613
    PenciDesign replied
    July 27, 2021 at 4:58pm

    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
    July 27, 2021 at 5:13pm

    It worked! Thank you so much :-)