Can I upload a custom font to big cartel

Question

I have a certain font which I use on my business cards and for the sake of consistency I would like to use them on my site. I am not finding a way to upload the font and cannot find it in the customization menus. Help would be greatly appreciated!

Answer 1

Yes you can upload a custom font using the @fontface feature in CSS, but you'll need to have access to a server to store and upload it from. I used the Luna theme and this worked like a charm:

Insert this code into your CSS file and replace the URL with the proper location of your font:

@font-face {
    font-family: CustomFontName;
    src: url(http://yourserver.com/fonts/customfontname.ttf); 
}

I chose to put mine in the 'Elements/Shared' section of my theme, a little ways down from the beginning of your CSS file.

Then change this section of your CSS:

/* Body Font */
body,
.product_header h3,
.product_header h5,
#product_inventory li h5,
#cart_items li .item_option,
#cart_summary li h3,
#social_links li h4,
.standalone .canvas p
{ font-family: {{ theme.body_font | font_family }}; }


/* Header Font */
h1, h2, h3, h4, h5, h6,
.button,
#error li,
#site_footer ul,
#site_footer #search input,
#main_nav li,
#cart_items li dt,
#cart_items li dd,
#cart_options #cart_discount p,
#cart_summary li span,
.standalone .canvas h1, input,
#cart_items li .quantity_input input
{ font-family: {{ theme.header_font | font_family }}; }

To this:

/* Body Font */
body,
.product_header h3,
.product_header h5,
#product_inventory li h5,
#cart_items li .item_option,
#cart_summary li h3,
#social_links li h4,
.standalone .canvas p
{ font-family: CustomFontName; }


/* Header Font */
h1, h2, h3, h4, h5, h6,
.button,
#error li,
#site_footer ul,
#site_footer #search input,
#main_nav li,
#cart_items li dt,
#cart_items li dd,
#cart_options #cart_discount p,
#cart_summary li span,
.standalone .canvas h1, input,
#cart_items li .quantity_input input
{ font-family:CustomFontName; }

And you should be all set, the font will be changed throughout your theme. This has only been tested on the Luna theme, but I imagine this should work universally across all of the themes.

bigcartel fonts custom

Answer 2

To make this work cross browser you need to access your .htaccess file on the server where the font is hosted and add the following line:

Header set Access-Control-Allow-Origin "*"

Docs here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin