我可以将自定义字体上传到大卡特尔吗答案

【问题标题】：Can I upload a custom font to big cartel我可以将自定义字体上传到大卡特尔吗
【发布时间】：2014-06-27 20:13:34
【问题描述】：

我在名片上使用了某种字体，为了保持一致性，我想在我的网站上使用它们。我没有找到上传字体的方法，也无法在自定义菜单中找到它。非常感谢您的帮助！

【问题讨论】：

【解决方案1】：

是的，您可以使用 CSS 中的 @fontface 功能上传自定义字体，但您需要访问服务器才能存储和上传。我使用了 Luna 主题，这就像一个魅力：

将此代码插入您的 CSS 文件并将 URL 替换为字体的正确位置：

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

我选择将我的放在主题的“元素/共享”部分，距离 CSS 文件的开头稍远。

然后更改 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 }}; }

到这里：

/* 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; }

你应该已经准备好了，字体将在你的主题中改变。这仅在 Luna 主题上进行了测试，但我想这应该适用于所有主题。

bigcartel fonts custom

【讨论】：

你测试过这个跨浏览器吗？它似乎只适用于我的 Safari，因为我在其他浏览器上遇到错误：跨域请求被阻止：同源策略不允许读取@987654324 的远程资源@。（原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

【解决方案2】：

要使这项工作跨浏览器，您需要访问托管字体的服务器上的 .htaccess 文件并添加以下行：

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

这里的文档：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

【讨论】：