Return to previous page

Google Font - by Fantasia - on WordPress WooCommerce support

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

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

#88663 Copied Theme version: WooPress 4.2.2.

16 Answers
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.
#88856 Copied
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

#89023 Copied

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.

#89049 Copied

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.

#99957 Copied Theme version: WooPress 2.5. WooCommerce version: 2.4.10
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.
#100070 Copied
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

#100172 Copied

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

#100180 Copied

Robert Hall

Participant

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.

#100293 Copied

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

#100297 Copied
Robert Hall

Participant

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.
#100303 Copied
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
#100322 Copied
Robert Hall

Participant

November 19, 2015 at 13:29
Please try this code

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

Regards,
Robert Hall.
#100326 Copied
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

#100650 Copied
Eva Kemp

Participant

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.
#100675 Copied
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; }
#100707 Copied
Eva Kemp

Participant

November 23, 2015 at 11:34

Hello,

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

Regards,
Eva Kemp.

#100827 Copied
Viewing 17 results - 1 through 17 (of 17 total)