AARFIE SUPPORT

Some of Aarfie’s themes will include drop-down selectors in your basic options for easily changing your fonts. If you do not have these drop-down selectors, it is because unique fonts have been used for your theme. In this case, you can easily edit your theme fonts using the following instructions.

Edit Fonts

In your Big Cartel shop admin area, navigate to your Design > Basics section, and click the CSS button at the top right of the Basics controls.

Scroll towards the bottom of the CSS code and locate the fonts area.

Locating the Font area of your theme's CSS code

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 font may be set to Merriweather as follows:

/* - - - - - - - - - - - - - - - - Shop Title */
h1#header_logo,
#header_logo {
font-family: Merriweather, Helvetica, Arial, sans-serif;
font-weight: normal;
}

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 */
h1#header_logo,
#header_logo {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: normal;
}

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”.

You can also include additional text styling. For example, if you want your Shop Title to be right-aligned and all lower case:

/* - - - - - - - - - - - - - - - - Shop Title */
h1#header_logo,
#header_logo {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: normal;
text-align: right;
text-transform: lowercase;
}

Click the Save button 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 basically two steps to using a Google Web Font.

STEP 1

The first step is to embed the link to Google’s font CSS file in the head of your shop. For example, if we select the font Cabin, Google will provide the following code for your shop head:

<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>

To add this code to the head of your shop, navigate to the Design > Pages section of your shop admin and click the page title Layout.

Accessing the Layout page code

On the following page, scroll through the text box content until you find the external font file area, which will be marked with the tags:

{{ START EXTERNAL FONT FILES }}

{{ END EXTERNAL FONT FILES }}

If your theme already includes Google Web Fonts, there may be existing code within the tags:

Locating the font area in the Layout page code

To add your new font code, create a new line within the external font file area and paste the code provided by Google:

Adding Google Web Font code to the external font file area

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

STEP 2

You can now navigate to your CSS code and use your new Google Web Font in your fonts area as described at the beginning of this article. Refer to the Google Use this font instructions for the exact font-family to include, for example:

/* - - - - - - - - - - - - - - - - Content */
#page_main {
font-family: 'Cabin', arial, serif;
}

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

Themes Without An External Font File Area

If you can not find the external font file tags in your Layout page, you may have an earlier version of Aarfie’s themes. Instead, locate the the assets_url or the theme stylesheet tags:

<link rel="stylesheet" type="text/css" media="all" href="{{ assets_url }}/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{ theme | theme_css_url }}" />

and paste your Google font code JUST BEFORE the first of these two stylesheet tags:

<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="all" href="{{ assets_url }}/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{ theme | theme_css_url }}" />

Font Size

The font size of elements can be adjusted simply by adding a font-size style:

font-size: 14px;

Where 14 can be replaced with the desired font size in pixels.

Important: Never add the font-size to a group of elements including more than one of the h tags (i.e. h1, h2, h3, h4, etc.). These tags need to be different font-sizes to maintain proper typography.

To avoid issues with applying font size to elements beyond those intended, it is strongly recommended that you only add font-size styles to single elements. Where elements are grouped you should create a new style for just the elements you are focusing on.

For example, our CSS fonts area may include the group:

/* - - - - - - - - - - - - - - - - Page Titles */
h2#page_title,
h2.extra_title,
#product_details h3.sale_title,
#product_details h3.entry_title,
h1, h2, h3, h4, h5, h6 {
font-family: Merriweather, Helvetica, Arial, sans-serif;
}

We can not apply a font-size style to this group because it contains a mix of h tags. We want to change the font size of the main page titles, so we create a new group following the existing one:

/* - - - - - - - - - - - - - - - - Page Titles */
h2#page_title,
h2.extra_title,
#product_details h3.sale_title,
#product_details h3.entry_title,
h1, h2, h3, h4, h5, h6 {
font-family: Merriweather, Helvetica, Arial, sans-serif;
}
h2#page_title,
h2.extra_title {
font-size: 24px;
}

Ensure that each element is on a new line and ends with a comma, except the last one.

General Examples

Changing the default font size of page content:

#page_main  {
font-size: 13px;
}

Changing the font size of the product page description area:

.info {
font-size: 11px;
}

Changing the font size of the top-most navigation area:

#top_slim,
#top_slim form#gift_cert_form,
#top_slim form#gift_cert_form button {
font-size: 13px;
}

Click the Save button when you have finished editing your CSS code.