WordPress Flatsome 主题使用 Google 字体提升网站品牌形象

“创建一个具有独特风格和品牌形象的网站时,字体选择非常重要。Flatsome主题为用户提供了灵活的选项来自定义网站的外观和感觉,包括字体。通过更改网站字体,您可以让网站更准确地传达您的品牌价值观和风格。

要在WordPress Flatsome主题中更改网站字体,有两种主要方法可以选择。第一种方法是使用Flatsome的定制选项,其中提供了一组可选的字体。第二种方法是通过自定义CSS来应用所需的字体。无论您选择哪种方法,下面将为您介绍如何做到这一点。

这次分享如何使用代码来自定义Wordpress网站的字体显示

实现效果

步骤一:选择Google字体

这是Google Fonts官方网站,您可以在这里浏览和选择各种免费字体。

https://fonts.google.com/

WordPress Flatsome 主题使用 Google 字体提升网站品牌形象-大可建站

步骤二:选择字重

您可以使用Google Fonts网站的加号按钮来选择字体的自重(或称字体的粗细)。以下是详细的步骤

WordPress Flatsome 主题使用 Google 字体提升网站品牌形象-大可建站

在右侧可以看到已经选择的字重,通常选择300-900之间即可。

步骤三:选择引入方式

选择@import即可,随后我们复制代码,注意不要复制<style></style>

WordPress Flatsome 主题使用 Google 字体提升网站品牌形象-大可建站

步骤四:粘贴字体代码

进入网站后台,依次点击 外观-》 主机文件编辑器=》style.css,css的第一行粘贴css,如图所示:

WordPress Flatsome 主题使用 Google 字体提升网站品牌形象-大可建站

步骤五:复制字体名称

在Google字体的列表内,复制字体的名称。

WordPress Flatsome 主题使用 Google 字体提升网站品牌形象-大可建站

步骤六:粘贴代码

只需要把第二行的font-family: ‘Roboto’, sans-serif  !important; 替换即可,需要保留!important;

body,h1, h2, h3, h4, h5, h6, .heading-font, .off-canvas-center .nav-sidebar.nav-vertical > li > a,.nav > li > a {
	font-family: 'Roboto', sans-serif !important;                    
}