Big Cartel Theme Support

How do I use 3rd party fonts with my Big Cartel shop?

How do I use 3rd party fonts with my Big Cartel shop?

Your theme settings in your Aarcade admin allow you to choose from hundreds of font families in the Google Web Fonts library. This is the easiest way to use custom fonts. Refer to How do I edit my theme's styles and options?

Hosting 3rd party fonts

If you wish to use fonts from a source other than Google, you need to first discern whether your font provider hosts their fonts for you or not.

3rd-party-hosted

If your fonts are hosted by your font provider, you may need to specify domains that are authorised to access your font files. You will do this in your account admin area at your font provider’s site. You should authorise the following domains:

  1. The custom domain you have applied to your Big Cartel account (if applicable), for example: mycustomdomain.com
  2. Your Big Cartel shop domain, for example: myshop.bigcartel.com
  3. The domain for all of your Aarcade previews, entered exactly as *.preview.aarcade.net If your font provider doesn’t support the use of a * to indicate “any value” you can try preview.aarcade.net or a specific preview address, for example: f2a97ewtp-559.preview.aarcade.net

Self-hosted

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
<IfModule mod_headers.c>
	<FilesMatch "\.(eot|otf|tt[cf]|woff2?)$">
		Header set Access-Control-Allow-Origin "*"
	</FilesMatch>
</IfModule>
# 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.

Loading 3rd party fonts

To load your 3rd party fonts to your theme / shop, refer to the following instructions and examples in conjunction with your 3rd party font provider’s support resources.

Simple @font-face CSS

If you are hosting your own fonts, as detailed in the previous section of this article, you can typically import your fonts with simple @font-face CSS. Following is an example of the format of such CSS (although yours may differ):

@font-face {
	font-family: 'mycustomfont';
	src: url('//my-hosted-domain/my-font-files/mycustomfont.eot?dhfhf');
	src: url('//my-hosted-domain/my-font-files/mycustomfont.eot?#iefixdhfhf') format('embedded-opentype'),
			url('//my-hosted-domain/my-font-files/mycustomfont.woff?dhfhf') format('woff'),
			url('//my-hosted-domain/my-font-files/mycustomfont.ttf?dhfhf') format('truetype'),
			url('//my-hosted-domain/my-font-files/mycustomfont.svg?dhfhf#myfont') format('svg');
}

Note that we have removed the http: from the beginning of our URLs in the above example. In other words, we see this..

src: url('//my-hosted-domain/my-font-files/mycustomfont.eot?dhfhf');

..and not this..

src: url('http://my-hosted-domain/my-font-files/mycustomfont.eot?dhfhf');

This means our files will be retrieved via http:// or https:// as necessary. Your hosted web space may not support the latter secure protocol, so check first. However, if you do use http:// URLs, then your web browser may issue an alert, or simply not load your fonts, when you are viewing your shop inside your Big Cartel preview area (because the preview area is served over secure https://). This does not affect the public viewing of your shop.

Your simple @font-face CSS can be added to your custom style coding area — see Where do I add custom style code? — at your Big Cartel admin or in the Custom CSS section of your theme install settings at your Aarcade admin.

Imported style sheet

If your font provider’s instructions include a CSS-only (i.e. a non-JavaScript) option for loading their fonts, always select that option.

Your CSS-only option will provide you with an external style sheet tag to insert into the head of your site HTML. For example:

<link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/313a9f74-cbd2-499f-a567-502a50a3860a.css">

Copy the href value from this code and use it to create a CSS import statement in the format:

@import url("MyFontStyleHREF");

With our example, we get:

@import url("//fast.fonts.net/cssapi/313a9f74-cbd2-499f-a567-502a50a3860a.css");

Note that we have removed the http: from the beginning of our URL. Refer to the previous sub-section for an explanation. Most 3rd party font providers will support secure protocol.

Your simple @import CSS can be added to the Import Stylesheets section of your CSS theme file — see What is my Big Cartel CSS file? — at your Big Cartel admin or in the Custom CSS > Import style sheets section of your theme install settings at your Aarcade admin.

JavaScript

If your font provider’s instructions include a CSS-only (i.e. non-JavaScript) option use that option instead (see above).

If JavaScript is the only option given by your font provider, you will need to add the JavaScript at your Big Cartel admin area with the x-ic-head-code insert content method as follows:

1. Create a page, in the Customize design > Pages area of your Big Cartel admin, with the exact title:

x-ic-head-code

2. Important: Switch to HTML edit mode per How do I switch to HTML edit mode?

3. Add the font JavaScript to the content of the x-ic-head-code page. For example:

<script src="//use.edgefonts.net/abel;actor.js"></script>

Note that we have removed the http: from the beginning of our URL. Refer to the previous sub-section for an explanation. Most 3rd party font providers will support secure protocol.

4. Finally we click the Done button and then click the Save link to apply our changes.

Note that if we had already created an x-ic-head-code for another purpose, we would go to this existing page, create newlines at the end of the page content and then paste in our script tag. We can keep adding content, as needed, to our x-ic-head-code page in this way. For more information on the insert content method, refer to An introduction to the Insert Content method.

To get your JavaScript to load back at your Aarcade previews, you will need to refresh your shop data via the Licenses section of your Aarcade admin (this updates the x-ic-head-code page for your previews).

Applying 3rd party fonts

To apply your 3rd party fonts you can type the font names in front of your font family fields in your theme install settings at your Aarcade admin. Always enclose the name in double quotes and follow with a comma and space. For example:

How do I use 3rd party fonts with my Big Cartel shop? at Aarcade

Alternatively, you can apply your 3rd party fonts via custom CSS in your custom style coding area — see Where do I add custom style code? — at your Big Cartel admin or in the Custom CSS section of your theme install settings at your Aarcade admin.

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

Additional support

If you need further assistance, please contact your 3rd party font provider first to allow them to support their own service. This service is not related to Aarcade and we can not provide you with further support.

AarcadeHow do I use 3rd party fonts with my Big Cartel shop?