2,183 total views, 3 views today
字体在网站设计当中是一个很重要的角色，Shopify网站模板自带的字体可能不太够用，所以，很多卖家都想要尝试使用Google font。Google目前提供977种字体，应该算是很全面，很够用了。所以今天我们就来研究下如何在Shopify网站中使用某一种Google font。
小贴士
1. 在进行代码修改之前记得先去确认下模板编辑器中有没有相关功能的设置项，如果有的话，就没必要额外开发代码来实现了；
2. 在做任何大的代码修改之前，一定要记得备份模板，这样即使把模板改乱了后面也可以轻松回滚代码；
3. 需要懂一些基本的HTML、CSS、JS和liquid代码知识。
操作很简单，我会截图示意，无需进行任何编程，你所要做的就是：
1、在HTML中的<head>…</head>标签中引用一个特殊的样式表链接；
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">2、然后在CSS样式表中引用该字体。
.css-selector {
font-family: 'Font Name', serif;
}操作步骤：
1、在Google字体官网选取某一种字体，配置具体参数，然后点击添加按钮；
2、获取安装代码，以Roboto字体为例，对应刚刚讲的两个方面；
3、登陆到Shopify店铺后台, 找到Online Store > Themes；
4、选择要编辑的模板，然后点击Actions > Edit Code；
5、找到theme.liquid文件，单击打开；
6、按照图3中位置粘贴样式表链接；
7、打开css文件，在最下面按照下图图4位置给目标元素应用此字体，我们以给整站的body应用为例；
8、保存文件后前往店铺前台，刷新页面，查看该元素字体。
到这里Shopify网站引用Google字体就已经完成了，你学会了吗？==》不会的罚你再看一遍！
说明：
如果您从我们的推荐链接注册SHOPIFY店铺并且最终付费订阅了套餐，我们将会从SHOPIFY官方获得一定的返利。这也会支持我们一直为中国的独立站卖家提供最优质而且免费的SHOPIFY教程，感谢您的支持。
建站咨询