如何在SHOPIFY网站上使用GOOGLE字体

未分类 linwenzhi1314 141次浏览 0个评论
Google-font-cover-Shopify外贸建站-yunecommerce

字体在网站设计当中是一个很重要的角色,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字体官网选取某一种字体,配置具体参数,然后点击添加按钮;

Google font设置-Shopify外贸建站-云跨境
图1.选取一种Google font

2、获取安装代码,以Roboto字体为例,对应刚刚讲的两个方面;

google font-获取代码-Shopify外贸建站-yunecommerce
图2. 获取安装代码

3、登陆到Shopify店铺后台, 找到Online Store > Themes
4、选择要编辑的模板,然后点击Actions > Edit Code
5、找到theme.liquid文件,单击打开;
6、按照图3中位置粘贴样式表链接;

Google-font-代码安装示意图1-Shopify外贸建站-yunecommerce
图3. 引用样式表link

7、打开css文件,在最下面按照下图图4位置给目标元素应用此字体,我们以给整站的body应用为例;

8、保存文件后前往店铺前台,刷新页面,查看该元素字体。

到这里Shopify网站引用Google字体就已经完成了,你学会了吗?==》不会的罚你再看一遍!


本文标题:如何在SHOPIFY网站上使用GOOGLE字体
转载请保留页面地址:https://www.linwenzi.com/7149.html
扫码加微信,邀您入群分享交流。
虚席有限,满员即止噢!

目前100000+人已关注加入我们

喜欢 (0)
分享 (0)