Big Cartel Theme Support

How do I edit fonts in my Big Cartel CSS file?

How do I edit fonts in my Big Cartel CSS file?

Editing your theme CSS file (as detailed in this article) is not the preferred method for changing your theme style.

Instead, wherever possible, use the tools provided at your Aarcade admin area per How do I edit my theme's styles and options?

Manually editing fonts

In some cases - e.g. adding extra font styling like underlines or all-caps - you may wish to manually edit your fonts in the CSS theme file at your Big Cartel admin area.

To do this, locate your CSS edit controls and scroll to the FONTS section - as detailed in the support article What is my Big Cartel CSS file? - to review and edit existing font styles. Note that the Theme custom styles section of your CSS may also include font styles you may wish to remove or edit.

For example, the Uptown theme has an uppercase style applied to the header title in the Theme custom styles section of the CSS as follows:

/* Site Title - uppercase
** delete this style to remove */
#header,
h1#header {
	text-transform: uppercase;
}

As noted in the CSS, you can delete this block of code to remove the uppercase style.

As another example, let’s say we want to display our prices in the product grid in italics. In the FONTS section, we locate the Product Thumbnails sub section and then the Price font style group:

/* - - - - Price */
.tile.product h2.price-wrap {
	font-size: 12px;
}

It is best practice to create all of our custom CSS in the custom style coding area — see Where do I add custom style code? — as this keeps it contained and easy to edit and copy later. So we copy the above code from the FONTS section, paste it further down the page in our custom style coding area and then add the italic style:

/*====================================================
CUSTOM SYLES - add and override styles below
====================================================*/

/* - - - - Price */
.tile.product h2.price-wrap {
	font-size: 12px;
	font-style: italic;
}

Click the Done button and then the Save link to apply your changes.

For more information on creating font styles and custom CSS, refer to:

AarcadeHow do I edit fonts in my Big Cartel CSS file?