Gentlemen,
I’ve run across several topics on changing Global CSS, but unable to find one that will solve my problem.
My entire site uses the “Schoolbell” font, but I’m afraid it may not come across as professional looking for a checkout page.
Is there a code that can fix this? Again, I just want to address the checkout page and would prefer a simple font, such as Arial.
Your help is appreciated,
Orlando
Hello Orlando,
Thanks for asking. 
You can add following CSS under Pro > Theme Options > CSS to change font size in checkout page:
.woocommerce-info, .woocommerce-billing-fields h3, label, input, button, select, textarea, strong, table th, table td, h3, p {
font-family: Arial, Helvetica, sans-serif !important;
}
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Thanks.
Hi,
Thanks for the quick reply. The code is working fine for the checkout page now thank you:
I’m wondering though - is there a way to isolate the font change to only certain pages, such as checkout, cart, and shop?
It appears to have changed the font on other pages and posts, such as descriptions:
Post Before CSS
Post After CSS
There are other examples too, such as the first sentence or paragraphs of each web page.
I’m not sure this has any bearing, but I noticed my editing pages now have the “Pro” tab. And I haven’t had the time to fully explore Pro features.
Question is…has the conversion to Pro affected the way my fonts are acting now?
Thank you,
Orlando
Hi Orlando,
You can target your CSS only to the WooCommerce pages. Could you please try updating your code with the following.
.woocommerce .woocommerce-info, .woocommerce .woocommerce-billing-fields h3, .woocommerce label, .woocommerce input, .woocommerce button, .woocommerce select, .woocommerce textarea, .woocommerce strong, .woocommerce table th, .woocommerce table td, .woocommerce h3, .woocommerce p {
font-family: Arial, Helvetica, sans-serif !important;
}
Hope that helps.
Hi Mldarshana,
Worked!
I replaced the code, purged cache pages, cleared browsing image cache and files, and refreshed. Looks great!
With the exception of product description bulleted sentences, the css code targets the woocommerce areas just fine.
It seems to not like “bulleted” sentences because I removed bullets and it took the Arial font:
With bullets
<img src="//tco-forum-uploads.s3.amazonaws.com/original/3X/a/1/a16d74cb64e5e3f6f1a2f2032f2d1258ef001a80.png" width=“690” height=“388”>
Without bullets
If you have any idea why this is, please advise. Otherwise, I’ll live with it.
Thank you,
Orlando
Hi @incywincies,
I believe that the font for bullets are not change. Add this to the code also so that it will be changed.
.woocommerce li, .woocommerce ul{
font-family: Arial, Helvetica, sans-serif !important;
}
Hope it helps. Let us know how it goes.
Thanks.
Hi Nico,
Yes, that worked great!
Much appreciated,
Orlando
You are most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.