如何设置你的网站字体?让你的网站格调UP UP!

📚 文章大纲

在网站优化过程中,网页的字体也是需要考虑的一个重要细节。

合适的字体风格,文字大小,行高,字体重量等等都可以给用户塑造更好的浏览体验,从而可以获得用户更长的停留时间(dwell time)

small font
small font
comfortable font
comfortable font
就比如上面这两张网页截图,你更喜欢看哪个?
肯定是下面的啊

合适的字体

所以,我们在制作网页内容的时候,要尽量做到:
  • 字体大小适中
  • 不要用奇奇怪怪的字体
  • 不要长篇大论
  • 分段要清晰
  • 最好用短句
这样的文章可读性强(easy to read),易于理解(easy to understand),手机端也要更友好。SEO优化处处都是细节呢
想象一下,你用手机看拥挤的文字的时候,你还有耐性看下去吗?所以,我们要考虑用户的浏览体验,让阅读轻松,才能更好的留住用户。 
Brain Dean的网站backlinko.com就可以作为范本,无论是网页样式的设计还是字体的设置都让人赏心悦目。如果你不知道字体到底多大合适,不妨就可以试试使用他的字体大小和样式。 
17px font
17px font

backlinko.com网站用的字体大小是18px,也就是18像素

WhatFont识别字体

what font
what font

有盆友找我建站,对字体的要求就是要非常奢华,有格调😂😂😂,让我设置成某某网站一样的字体,那么首先这个whatfont字体识别插件也就派上用场了。

如何copy和借鉴优秀网站的字体样式,这里我们可以用谷歌插件what font来识别

地址:https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
安装好了whatfont,在打开任何网页,只要点击whatfont就可以识别字体了
whatfont
whatfont
  • font 字体:Inter -400 
  • style 风格:normal
  • size 大小:18px
  • line height 行高:36px
  • weight 字重:400 
  • color 颜色:#000000 (色号)
有了whatfont插件,你就可以借鉴优秀网站的字体设计了,然后,你就在你网站跟着设置一样的参数就可以了,是不是很简单。

WordPress字体设置

wordpress font settings
wordpress font settings
那么网页字体大小怎么设置?
WordPress网站的后台,一般都可以在外观appearance,然后在个性化定制customize里对字体进行设置
如论你是使用什么主题theme(网站皮肤)里面找到 Typography
typography
typography

然后就可以设置自己喜欢的字体样式了。

typography settings
typography settings

对字体的样式进行个性化设置

Elementor字体设置

如果你的WordPress用了Elementor编辑器,字体设置也很简单
找到site settings
elementor site settings
elementor site settings

设置全站字体,找到global fonts就可以对全站字体进行设置

找到Typography

elementor typography
elementor typography

然后就可以设置了,H1,H2, H3等等字体都可以设置

elementor typography settings
elementor typography settings

当然了,还可以在制作的网页的时候对字体进行设置

elementor typography settings on page
elementor typography settings on page
在编辑字体模块的时候,找到style,找到Typography,就完成字体的设置啦

下载网站字体文件

如果你想要做和某某网站一样的字体,我们就可以想办法把他们的网站字体文件下载来

open google developer tools
open google developer tools

打开一个网站,然后点击谷歌浏览器右上角的三个竖点,然后“更多工具”,然后点击“开发者工具”

find font file
find font file

然后点击“network”,点击“font”,该网页的字体文件就在这里面。

鼠标悬停,就可以查看该字体的名称和文件格式。文件后缀为.woff2

copy font
copy font

然后点击字体文件,鼠标有点copy,点击copy Reponse

然后新开一个浏览窗口,把刚才复制的代码粘贴在新窗口,就可以直接下载字体文件了

woff2 font file
woff2 font file

下载的文件,需要重命名,加上.woff2的后缀,这个就是我们要用的字体文件了。

如何在Eelementor上传字体?

对于有些比较特殊的字体custom font,Elementor系统里找不到你想要的字体,你就需要去上传custom font定制字体文件。

点击elementor图标,找到Custom Font

elementor custom fonts
elementor custom fonts

然后点击上传你下载好的字体文件

upload custom font in elementor
upload custom font in elementor

这里可以上传的字体文件格式:WOFF, WOFF2, TTF, SVG, EOT 5种字体文件格式,尽可能这些格式都要上传,这样式为了更好的兼容。

然后呢,我就可以上传我开始下载的.woff2格式的字体文件

custom fonts elementor
custom fonts elementor

就这样字体就已经上传好了

然后,在使用Elementor的时候,就可以在custom font里面找到我们自己上传的字体啦。

custom fonts
custom fonts

就可以正常编辑你的custom font定制字体了

WordPress添加代码

当然了,也可以添加代码字段,来手动设置整站的字体。

通过网站FTP打开theme文件夹,然后找到wp-content/themes/fonts文件夹

@font-face {
font-family: ‘nameofnewfont’;
src: url(“/fonts/nameofnewfont.woff2”) format(“woff2”),
url(“/fonts/nameofnewfont.woff”) format(“woff”);
font-weight: normal;
font-style: normal;
}

然后nameofnewfont想要设置的字体就可以了

注:大家还是尽量用WordPress系统和Elementor字库里面现有的字体,除非有非常特别的需要,再去用custom font。

以上,赶快去设置你喜欢的网站字体吧。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

添加微信