WordPress博客:子比主题设置自定义字体

WordPress博客:子比主题设置自定义字体

这几天晚上闲下来无聊折腾了一下网站,然后弄得差不多,感觉还是差点,网站字体不太协调,这几天网站看起来速度还行,就想着换个字体试试,之前因为怕太影响速度没上,先用一段时间试试吧。

查看我网站效果:

图片[1]-WordPress博客:子比主题设置自定义字体-滤镜色彩

开始准备:

1.首先下载自己喜欢的字体包 在这里我给大家推荐一款免费的字体下载站

100字体下载站

2.转换字体包格式

当我们下载字体之后会有一个压缩包 里面会有一个.ttf 的字体文件包
因为有些浏览器不支持这种字体的格式显示 所以我们需要对字体格式转换
如果不进行转换字体格式,有些浏览器会无法显示自己设置的喜欢的字体 如果你毫无技术不会转换字体格式不要怕,这里提供一个免费快捷的字体转换网站

在线字体格式转换

你只需要转换.ttf 文件为 eot,woff,woff2,svg,tff 以上格式随便一种,但是个人建议woff2

图片[2]-WordPress博客:子比主题设置自定义字体-滤镜色彩

字体调用

把你转换好的 5 个字体文件放在自己网站随便那个文件夹内,只需要记住地址就行

我放网站目录下,会自己走CDN加速:https://yowap.com/yunjian.ttf

如果是 WordPress 子比主题的话直接把下面的 css 代码放在自定义 css 样式中

@font-face {
    font-family: 'CustomFontName';
    src: url('https://www.ljpic.com/font/yunjian.woff2') format('woff2'); /* 替换为您上传的字体文件路径 */
    /* 可添加其他字体格式,用于不同浏览器兼容性 */
}

body {
    font-family: 'CustomFontName', sans-serif; /* 替换为您的字体名称 */
}

注:font-family 是自定义字体名称(自己修改),url 这是字体文件的地址(自己修改),*这是全局显示。

将以上代码添加你的主题文件 css 样式即可。子比主题路径:后台主题设置—>自定义代码—>自定义 CSS 样式代码把下面的代码添加到里面 然后刷新页面即可

另外,字体文件别太大,不然非常影响网站用户体验,就像我经常说的,用户网络不行,怪别人网站卡。

© 版权声明
THE END
喜欢就支持一下吧
点赞15赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容