如何在shopify站点添加自定义字体
How to add custom font in shopify site
我添加了字体代码
@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; }
同时在 Assets 文件夹中上传了字体文件。
Question: How to use font for all headings, My theme using sass
variables,
Upload font files in assets folder
If your font has multiple files, you will have to repeat this process for each one.
Link The Fonts In Your CSS
Open your theme’s CSS file. In most themes, this is called 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;
}
Replace font-family in your theme.scss.liquid
我添加了字体代码
@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; }
同时在 Assets 文件夹中上传了字体文件。
Question: How to use font for all headings, My theme using sass variables,
Upload font files in assets folder
If your font has multiple files, you will have to repeat this process for each one.
Link The Fonts In Your CSS
Open your theme’s CSS file. In most themes, this is called 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;
}
Replace font-family in your theme.scss.liquid