Question

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

Answer 1

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

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

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

我选择将我的内容放入＆Elements;共享＆＃39;我的主题部分，从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

Answer 2

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

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

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

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

2 个答案: