A guide to using web fonts in Big Cartel
July 22, 2012
One of the coolest things to happen to web design in the last few years is the emergence of web fonts. In the past, the fonts that you could use were determined by what was already installed on users’ machines. Everyone had Arial on their Windows PC, so that became a safe font to use. Now, you’re no longer limited to Helvetica or Arial, Times or Georgia; you can go out and choose from thousands of fonts from services like Typekit, Fonts.com and Google Web Fonts.
Which font provider should you use?
Which service you choose might depend on a number of factors – personal taste, budget, ease of use. Different services offer different fonts – and the cost to you as a developer can vary significantly. We use Google Web Fonts on our Big Cartel themes because:
- The quality and choice of font is excellent
- It’s a free service
- Fonts are easy to install
- You don’t need to have an account
Unless you are looking to use a specific font belonging to another service, we don’t think you can go far wrong with Google Web Fonts.
Choosing your font
If you enjoy looking at different fonts, be prepared to spend some time on the Google Web Fonts site browsing the available fonts. The last time we checked there were over 500 font families offered by Google.
Find a font that is suitable for the job in hand. What does that mean? Well, maybe think about what you’re selling on your store. The right font will set the mood on your site as much as any lookbook or product image. Think about whether you should use a modern or traditional typeface, for example. Certain fonts and font styles are reminiscent of certain periods – if you’re selling vintage goods, think about a font that has a vintage feel. If you’re selling goods from the Far East, think about a font that has an Eastern influence.
If you choose a very distinctive display font, consider keeping it for headings or page titles only. You can easily overdo display fonts – the novelty quickly wears off and becomes irritating for the user. Choose a more standard font for the body text, even falling back to the good old favorites like Arial / Helvetica.
Above all, think of your users. Potential customers coming to your store don’t want to be overwhelmed by fancy fonts. They want to be able to read your copy, learn about your products, and hopefully start buying them.
How many fonts are you allowed?
Well, you can use as many fonts as you like but we strongly recommend you stick to one, maybe two at most. Too many different fonts are going to look confusing. Typically, a designer might use one font for headings and another for the main body content – though to keep it simple there’s no reason why you couldn’t use the same font for headings and body text.
The other reason to minimize the number of fonts you use is speed. Web fonts take time to load and the more fonts you use, the slower the experience for the user. It doesn’t matter how great the page will look if the user gets fed up waiting and clicks away.
Installing Google Web Fonts on Big Cartel
So once you’ve settled on which font you’re going to use, follow these steps for how to install a Google font on your Big Cartel store:
Select your font
When you’ve decided which font you’re going to use, click the Add to Collection button.
You’ll see a blue panel appear at the bottom of your screen. Click the Use button:
You’ll get some options for style and weight for that font. Typically, you might have an option to include bold and italic variants.
Do you need all these variants?
Does the content in your store make frequent use of bold and/or italic text? Could you do without one or both of these options? Again, this is a speed thing – the more options you include, the bigger the file that has to load for the user.
Character sets
If your store language is English, you’ll only need to use the Latin character set, see the screenshot above. On some fonts, you might not get a choice anyhow.
Add the code to your Big Cartel store
Once you’ve picked your options, you can copy the code from step 3 of your Google Web Fonts page:
You then need to toggle to your Big Cartel admin, click Advanced, and open the Layout tab. Take a look at the code (you may need to click the Custom button top left if you haven’t edited this page previously). Paste the code you just copied immediately under the <head> tag. You should find this near the very top of your page.
Click Done and Save.
Update your CSS
You need to specify where to use your new font. Toggle back to the Google Web Fonts page. In step 4 on the Web Fonts page, you’ll see the declaration you need to use to include your new font:
Copy this and return to your Big Cartel admin area.
From the Advanced section, click CSS to open your store’s stylesheet. A quick search through the CSS for the term ‘font’ or ‘font-family’ will quickly identify which elements dictate which font your store is currently using. Replace the existing CSS font declarations with the copied style from the Web Fonts page. For example, to replace all the existing fonts with your new font in the Sexy theme, you’ll find the font family specified in three places:
body {
margin: 20px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 11px;
color: #666;
background: #cfcfcf;
}
input,
textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 11px;
color: #666;
}
*
{font-family: {{ theme.font | font_family_for_group }};}
You’ll need to replace each font-family reference with the code you copied from step 4 of the Web Fonts page, for example:
body {
margin: 20px;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 11px;
color: #666;
background: #cfcfcf;
}
Click Done and Save.
Changing the font for certain elements
If you want to keep your main body text as standard sans-serif, like Arial or Helvetica, you can target certain elements in your CSS with your new font. For example, in the Sexy theme, you’ll find this declaration:
h2 {
margin-bottom: 1em;
font-weight: normal;
}
If you insert your copied CSS from Google, you’ll get something like this:
h2 {
margin-bottom: 1em;
font-weight: normal;
font-family: 'Lato', sans-serif;
}
All your H2 style headings will use your new font while the rest of your content will remain as standard.
Five Google fonts we like
With over 500 fonts, there’s a lot of choice. However, here is a selection of fonts that we like (and have even used some in our themes):
Dosis
Droid Sans
Lato
Lobster
Special Elite
