Google Font - by Fantasia - on WordPress WooCommerce support

This topic has 17 replies, 5 voices, and was last updated 8 years, 4 months ago ago by Eva Kemp

  • Avatar: Fantasia
    Fantasia
    Participant
    September 22, 2015 at 17:00

    Hello,

    I’ve changed all of the fonts of my site to the Google Font: Josefin Sans, using the option in Theme Options / Typography. I’ve checked all checkboxes that was offered (font styles/weights and character sets). Fonts had changed, everything is OK, but when I try to make some of text to bold in an “Info Box” element, they don’t change, despite of the font has so much type of bolder styles. I’d like to make bold only a few words, not the whole text. In the single text editor it works, but in the description of the “Info Box” Element, doesn’t.

    Thank you for your help,
    Zsu

    16 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    September 23, 2015 at 16:00

    Hello,

    I’ve added this code in child style.css file:

    .aio-icon-description strong {
      font-weight: bold !important;
    }

    Please clear browser cache and check home page now.

    Best regards,
    Jack Richardson.

    Avatar: Fantasia
    Fantasia
    Participant
    September 24, 2015 at 10:34

    Hello Jack,

    thank you, it’s prefect now 🙂

    Could you tell me please, what is the difference between putting codes in the style.css and in the Custom CSS? Until now, every code went to Custom CSS. I’d like to understand it, to be better next time, and to be able to fix problems for myself.

    Thanks,
    Zsu

    Avatar: stan
    Stan Russell
    Participant
    September 24, 2015 at 13:30

    Hello Fantasia,

    Custom.css file has higher priority than style.css. In addition, style.css file may be overwritten on theme update. That’s why we always recommend to add any css customization to custom.css only.

    Regards,
    Stan Russell.

    Avatar: Fantasia
    Fantasia
    Participant
    November 17, 2015 at 20:35

    Hello,

    I have a new problem with fonts. I’d like to set Josefin Sans google font everywhere on my page, but on Product Pages there is an other font. It is very important problem, because in Hungarian language there are ő and ű characterts which aren’t there in most of the fonts.

    Also I’d like to change the default font size and color in description and short description, is it possible without html-coding every time?

    Thank you for your help,
    Zsu

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    November 18, 2015 at 10:54

    Hello,

    Please provide us with the direct link where you see the problem with fonts.
    As for description and short description I’ve added the css code in your child style.css:

    .product-information .short-description p {
       font-family: inherit !important;
       font-size: 20px !important;
       color: #000 !important;
    }
    
    .tab-content.tab-description p {
       font-family: inherit !important;
       font-size: 18px !important;
       color: #000 !important;
    }

    Set size and color values to your needs.

    Also I want to correct my colleague regarding the difference between the custom.css and child style.css files. As you are using child theme which has own style.css file where you place your customizations and it won’t be overrwritten after theme update. Stan meant that it’s not allowed to make any changes in parent style.css.

    Best regards,
    Jack Richardson.

    Avatar: Fantasia
    Fantasia
    Participant
    November 18, 2015 at 17:15

    Hello Jack,

    Thank you, colour and size is okay now.
    Here’s a product page.
    http://www.freshmood-design.hu/shop/freshmood-halo/freshmood_halo_egyedi_ekszer_endless/
    Since your modification, long description”s font became good. Short description’s font is still the original theme font.

    Regards,
    Zsu

    Avatar: Fantasia
    Fantasia
    Participant
    November 18, 2015 at 17:44

    Hello,

    addition: Now I set the custom tab in Theme Options > Single Product Page. On the page I linked in my latest post, the tab named “Garanciák”. And it’s also the original font instead of Josefin Sans. I’d like to change it, too.

    Thanks,
    Zsu

    Avatar: Robert Hall
    Robert Hall
    Support staff
    November 19, 2015 at 10:22

    Hello,

    As I see “Garanciák” has Josefin Sans font. See screenshot: http://prntscr.com/94g1xu
    Is your issue solved?

    Regards,
    Robert Hall.

    Avatar: Fantasia
    Fantasia
    Participant
    November 19, 2015 at 10:42

    Hello,

    sorry, I wasn’t clear, I mean the CONTENT of this tab 🙂
    See screenshot, I put together two variants, the wrong font first from the Garanciák tab, and the good font second from my Home page.

    Screenshot

    And also the short description is still not Josefin Sans on the product pages.

    Thank you for your help,
    Zsu

    Avatar: Robert Hall
    Robert Hall
    Support staff
    November 19, 2015 at 11:22

    Please try add this code in Global Custom CSS.

    .tabs .tab-content p{
    font-family: Josefin Sans;
    }

    Regards,
    Robert Hall.

    Avatar: Fantasia
    Fantasia
    Participant
    November 19, 2015 at 13:22

    Hello Robert,

    Thank you, tabs are OK now.

    To change short description font, I added this code, but font size doesn’t change.

    .product-information .short-description {
       font-family: Josefin Sans;
       font-size: 20px;
    }
    
    .product-information .short-description p {
       font-family: Josefin Sans;
       font-size: 20px;
    }

    Could you tell me, what’s wrong with it?

    Thanks,
    Zsu

    Avatar: Robert Hall
    Robert Hall
    Support staff
    November 19, 2015 at 13:29

    Please try this code

    .product-information .short-description {
       font-size: 20px !important;
    }

    Regards,
    Robert Hall.

    Avatar: Fantasia
    Fantasia
    Participant
    November 21, 2015 at 13:04

    Hello Robert,

    I’d like to change the font on Category pages too, because in list mode, the description is still not Josefin Sans.

    Also is it possible to set the “Sort by” part bigger (bigger height), to make the text fully visible?

    Screenshot

    Thank you,
    Zsu

    Avatar: Eva
    Eva Kemp
    Support staff
    November 21, 2015 at 17:52

    Hello,

    Please use this css code:

    .products-list .product .product-details .product-excerpt {
        font-family: Josefin Sans;
        font-size: 20px;
    }
    .filter-wrap .woocommerce-ordering select {
        height: 43px;
    }

    Regards,
    Eva Kemp.

    Avatar: Fantasia
    Fantasia
    Participant
    November 21, 2015 at 23:28

    Hello Eva,

    Font changing is successful, but unfortunately the select part is still the same.
    Tried to change the font size – smaller text also would be good-, and adding “!important” to the code (I don’t know exactly what it means, but sometimes works 🙂 ), but no results.

    .filter-wrap .woocommerce-ordering select {
        height: 43px !important;
        font-size: 14px !important;
    }
    Avatar: Eva
    Eva Kemp
    Support staff
    November 23, 2015 at 11:34

    Hello,

    I’ve added the code into child style.css file.
    Please check now.

    Regards,
    Eva Kemp.

  • Viewing 17 results - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.