如何在shopify网站中添加自定义字体

时间:2017-04-07 06:52:58

标签: html css fonts shopify

我添加了字体代码

    @font-face {   font-family: 'Gotham-Book';   src:url('{{ "Gotham-Book.eot" | asset_url }}');   src:url('{{ "Gotham-Book.eot"
    | asset_url }}#iefix') format('embedded-opentype'),
    url('{{ "Gotham-Book.woff" | asset_url }}') format('woff'),
    url('{{ "Gotham-Book.ttf" | asset_url }}') format('truetype'),
    url('{{ "Gotham-Book.svg | asset_url }}#Gotham-Book') format('svg');      font-weight: normal;   font-style: normal; }

还在资产文件夹中上传了字体文件。

  

问题:如何使用字体为所有标题,我的主题使用sass       变量,

1 个答案:

答案 0 :(得分:1)

  

在资源文件夹中上传字体文件

     

如果您的字体有多个文件,则必须为每个文件重复此过程。

enter image description here

  

在CSS中链接字体

     

打开主题的CSS文件。在大多数主题中,这称为theme.scss.liquid

@font-face {
    font-family: 'your-font';
    src: url('./your-font.eot');
    src: url('./your-font.eot?#iefix') format('embedded-opentype'),
         url('./your-font.woff2') format('woff2'),
         url('./your-font.woff') format('woff'),
         url('./your-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
  

在您的theme.scss.liquid中替换字体家族