Big Cartel - Product Page Font Type

Question

Here is a link to the site...http://johnathonpowers.bigcartel.com/. Trying to change the font type/face/style for the product pages.

So I tried what seems like everything. In my CSS area of big cartel, I went through and found every mention of font for "product", "products", "product page", etc and changed the font size on all of them. I changed the size in order to quickly see what exactly they were affecting. Only the product titles and prices could I pinpoint the code for. Many of them seemed to change nothing even when I put fonts up to 50 each time to easily notice the change.

So I am trying to get my product pages font type to calibri in order to match my FAQ page (which I spent hours creating over the weekend)...pretty happy with its outcome. For the FAQ I started using calibri and then a backup (I think) where I add ", serif" to the font style.

Anyway, any help or assistance is appreciated. Thanks so much.

Answer 1

You can change the font on every element in your page by adding this at the very bottom of your CSS:

* {
  font-family: 'Calibri' !important;
}

Keep in mind that your visitors will only see text displayed in this font if they have it installed on their computer, so it would be wise to include some fallbacks. Otherwise you could embed the font using a separate webfont service.

It would also be a good idea to take advantage of your browser's developer tools, so you can inspect elements on your pages and see what CSS rules are in control of their appearance. With the developer tools you'll be able to see stuff like the following:

.page_header.product_header h1 {
  font-size: 24px;
  text-transform: uppercase;
}

Instead of modifying the CSS classes directly in your stylesheet, I would also recommend always adding new rules to the bottom - this way if the theme is ever updated, you can copy and back up your code changes, revert to the theme defaults, and then paste them back in to have your customizations in place.