Back to Top

How do I edit my Big Cartel theme fonts?

Filed in Fonts

Edit Fonts

Locate your CSS edit controls and scroll to the FONTS section – as detailed in the support article How do I locate and use my theme's CSS?

Edit the font-family values in the fonts area to suit your preferences. Refer to the w3schools Fonts article provided and their Web Safe Font Combinations for details on how to edit fonts.

For example, your Shop Title (i.e. Header) font may be set to Helvetica Neue as follows:

/* - - - - Shop Title */
h1#header_logo,
#header_logo {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 60px;
	font-weight: bold;	
	}

To change your Shop Title font to the Trebuchet MS font combination (as listed in the Web Safe Font Combinations), edit this code to:

/* - - - - Shop Title */
#header_logo {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 60px;
	font-weight: bold;	
	}

Ensure you end your combination with a semi-colon and, if a font name contains spaces, wrap the font name in quotes as above, i.e. “Trebuchet MS”.

Make sure you include the quote mark before and after the name. Leaving out one of these double quotes and mixing double and single quotes is one of the most common causes of broken CSS code.

Note that double quotes and single quotes are interchangeable in this context, as long as the same is used either side of the name. So the following is also correct:

/* - - - - Shop Title */
#header_logo {
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	font-size: 60px;
	font-weight: bold;	
	}

You can also include additional text styling. For example, if you want your Shop Title to be all lower case in a smaller font size of 30px:

/* - - - - Shop Title */
#header_logo {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 30px;	
	font-weight: bold;	
	text-transform: lowercase;	
	}

Don’t forget that each line must end in a semi-colon.

Click the Save link when you have finished editing your font families.

Google Web Fonts

Google Web Fonts is a great resource for applying non-standard fonts to your shop. The instructions for using a Google Web Font can be found by clicking the font you wish to use and then clicking the Use this font tab.

There are two steps to using a Google Web Font.

STEP 1

The first step is to import Google’s font CSS file into your custom style code area. For example, if we select the font Cabin, click the Quick-use link, select the font styles we want, and finally click the “@import” tab; Google will provide the following code for the custom style code area:

@import url(http://fonts.googleapis.com/css?family=Cabin);

IMPORTANT: Make sure that you selected and copied the @import code.

This code line must be copied and pasted in the IMPORT STYLESHEETS section at the beginning of your CSS area:

Import Stylesheet into Big Cartel

Your import code will not work if you paste it anywhere else in your custom style area.

STEP 2

You can now scroll back down to the FONT section of your custom style area and use your new Google Web Font as described at the beginning of this article. Refer to the Google Quick-use > Integrate the fonts into your CSS instructions for the exact font-family to include, for example:

/* - - - - Content */
#page_main {
	font-family: 'Cabin', sans-serif;
	font-size: 12px;
	}

Click the Save link when you have finished adding your Google font code.

3rd Party Fonts

If you have purchased fonts from a 3rd party font provider, you need to first discern whether your font provider hosts their fonts for you or not.

Fonts without hosting

If your 3rd party font provider does not provide web font hosting, you will need to download the purchased font files and upload them to a server that allows cross-site HTTP requests. You can not use your Big Cartel shop or cloud storage (like Dropbox) for this purpose.

If you upload the font files to a standard LAMP based web space (i.e. most standard web hosted spaces), then you can allow cross-site HTTP requests by creating/editing the .htaccess file in your font folder (or top-level folder) with the following lines added:

# BEGIN Allow access from all domains for webfonts
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
	<IfModule mod_headers.c>
		Header set Access-Control-Allow-Origin "*"
	</IfModule>
</FilesMatch>
# END Allow access from all domains for webfonts

If you are unsure about any of the above, please contact your 3rd party font provider and/or your web host for support. This service is not related to Aarcade and we can not provide you with further support.

Once fonts are hosted / uploaded

If your 3rd party font provider hosts the font files – or you have uploaded the font files to your own web space per section Fonts without hosting above – you will then need to follow their instructions for applying the fonts. In most cases this will be similar to the steps detailed in the section Google Web Fonts of this article.

Also be sure to note:

  1. If your 3rd party font provider instructs you to insert code into your HTML, always use the methods described in How do I insert code into my Big Cartel theme layout?
  2. Do not forget the final step of applying your font family to elements in your layout – see section Google Web Fonts > Step 2 of this article.

Please contact your 3rd party font provider if you require further support. This service is not related to Aarcade and we can not provide you with further support.

Related Articles

  1. How do I enable the Big Cartel admin colour and font pickers?

Related articles...