This topic has 17 replies, 5 voices, and was last updated 8 years, 4 months ago ago by Eva Kemp
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
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.
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
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.
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
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.
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
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
Hello,
As I see “Garanciák” has Josefin Sans font. See screenshot: http://prntscr.com/94g1xu
Is your issue solved?
Regards,
Robert Hall.
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.
And also the short description is still not Josefin Sans on the product pages.
Thank you for your help,
Zsu
Please try add this code in Global Custom CSS.
.tabs .tab-content p{
font-family: Josefin Sans;
}
Regards,
Robert Hall.
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
Please try this code
.product-information .short-description {
font-size: 20px !important;
}
Regards,
Robert Hall.
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?
Thank you,
Zsu
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.
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;
}
Hello,
I’ve added the code into child style.css file.
Please check now.
Regards,
Eva Kemp.
You must be logged in to reply to this topic.Log in/Sign up