排版在网页设计中发挥着重要作用,影响着网站的外观和用户体验。作为 WordPress 开发人员或有抱负的开发人员,您应该了解创建具有视觉吸引力和吸引力的网站的重要性。本文旨在指导大家如何在不使用插件的情况下为 WordPress 添加自定义字体。我们还将探讨在本地加载 Google 字体的好处,以确保效率并符合 GDPR 法规。
在本指南中,我们将为你提供一个清晰的分步过程,告诉你如何在不使用任何插件的情况下在 WordPress 中添加自定义字体。我们将涵盖从选择自定义字体、为 WordPress 准备字体到使用 CSS 启用字体的所有内容。此外,我们还会讨论在本地托管 Google 字体的优势,并提供常见问题的故障排除技巧。
本文结束时,您将掌握如何增强 WordPress 网站排版的知识,为访客提供更好的浏览体验。让我们开始在 WordPress 中以简单明了、内容丰富的方式集成自定义字体的旅程吧。
1. 了解自定义字体
自定义字体是现代网页设计的一个重要元素,它允许网站所有者摆脱标准网络安全字体的限制,为网站注入独特的个性。与人们熟悉的 Arial 或 Times New Roman 字体不同,自定义字体提供了多种风格和美感,有助于创造令人难忘、具有视觉吸引力的用户体验。
为什么添加自定义字体很重要?
- 品牌和形象:定制字体使网站所有者能够通过排版来强化其品牌形象和个性。通过选择与其品牌价值产生共鸣的字体,企业可以创建一致且可识别的视觉形象。
- 增强用户体验:字体设计会对网站的可读性和整体用户体验产生重大影响。经过精心挑选的定制字体可以提高内容的可读性,使用户更容易接触到网站信息。
- 独特的视觉吸引力:独特的字体设计可以增加网站的视觉吸引力,使其从竞争对手中脱颖而出。精心选择的定制字体能给访问者留下深刻印象,并有助于获得更难忘的浏览体验。
- 差异化和记忆性:在拥挤的数字环境中,使用定制字体可以帮助网站脱颖而出,让目标受众更容易记住。正确的字体选择可以唤起情感、唤起专业感,或与网站的特定利基相匹配。
- 设计的一致性:在网站的不同部分使用自定义字体可以确保设计语言的一致性。这种一致性有助于保持专业的外观,并强化整体主题和品牌。
- 补充网站主题:自定义字体在使排版与网站主题保持一致方面具有灵活性。设计人员可以选择与内容和设计相协调的字体,从而创造出具有凝聚力和美感的体验。
谷歌的 GDPR 政策
谷歌字体(Google Fonts)是一种流行的网络字体资源,因其丰富的字体库和易用性而备受青睐。不过,在将 Google 字体集成到 WordPress 网站时,必须注意《一般数据保护条例》(GDPR)。GDPR 是由欧盟(EU)颁布的一项数据保护和隐私条例,旨在保护欧盟公民的个人数据和隐私。在使用谷歌字体时,用户的浏览器可能会向谷歌服务器发出请求,从而有可能向谷歌传输 IP 地址等用户数据。
为遵守 GDPR,建议在服务器上本地托管 Google 字体。通过在本地托管字体,可以确保用户数据不会被发送到外部服务器,从而更好地保护隐私和遵守数据保护法规。在清楚了解自定义字体的意义以及使用 Google 字体等外部资源时遵守 GDPR 的重要性之后,让我们来探讨一下在不依赖第三方插件的情况下为 WordPress 网站添加自定义字体的逐步过程。
2. 查找和选择自定义字体(Google Fonts)
说到获取各种高质量的自定义字体,Google Fonts 是网页设计师和开发人员的首选。谷歌字体提供了一个庞大的网络字体库,这些字体不仅视觉效果吸引人,而且还针对网络性能进行了优化。让我们来探讨一下从 Google 字体中查找和选择自定义字体的过程,以提升 WordPress 网站的排版效果。
2.1 访问 Google 字体
2.2 使用 Google 字体
<head>
部分。这将确保所选的 Google 字体加载到网站的 CSS 中。2.3 确保符合 GDPR(可选)
如果 GDPR 合规性是你的网站需要考虑的问题,可以考虑在本地托管 Google 字体,而不是依赖 Google 的服务器。通过从 Google Fonts 下载字体文件并将其托管在自己的服务器上,可以减少向外部服务器传输用户数据的情况,从而遵守数据保护规定。
有了 Google Fonts 提供的各种网络字体,找到与网站主题和内容相匹配的完美排版就成了一种令人愉悦的体验。通过深思熟虑地使用 Google Fonts,您可以提升 WordPress 网站的视觉吸引力和可读性,为访客提供引人入胜、令人难忘的浏览体验。
3. 为 WordPress 准备字体
要将来自 Google Fonts 的自定义字体整合到 WordPress 网站中,有几个必要的准备步骤。从下载字体文件到将其转换为适当的格式,再到最后将其添加到托管面板(hPanel),请按照本指南的步骤进行操作,以确保整个过程无缝、高效。
3.1 从 Google Fonts 下载字体文件
3.2 将 TTF 文件转换为 WOFF(或 WOFF2)格式
3.3 在 hPanel 中添加 Google 字体
- 登录 hPanel:访问主机提供商提供的主机控制面板(hPanel/cPanel)(注:如果你使用 LNMP 或者 LAMP 或者宝塔面板等管理服务器,添加 Google 字体与示例步骤可能稍有不同,但大同小异。)。
- 文件管理器:在 hPanel 中找到 “File Manager” 部分并打开。导航到 WordPress 安装的根目录,即 “public_html”。
- 创建新字体文件夹:从根目录转到 “wp-content” 文件夹,然后创建一个名为 “custom-fonts”(或任何你喜欢的名称)的新文件夹来存储你的自定义字体文件。
- 上传字体文件:在 “fonts” 文件夹中,上传之前从 Google Fonts 下载的 TTF 和转换后的 WOFF(或 WOFF2)字体文件。
- 创建 include_font.css:在同一文件夹,即 “custom-fonts” 中,创建名为 include_font.css 的 CSS 文件
/* Font: Poppins */ /*Regular*/ @font-face { font-family: "Poppins"; src: local("Poppins-Regular"), local("Poppins-Regular"), url("Poppins-Regular.ttf") format("truetype"), url("Poppins-Regular.woff") format("woff"); font-weight: normal; font-style: normal; } /*Bold*/ @font-face { font-family: "Poppins"; src: local("Poppins-Bold"), local("Poppins-Bold"), url("Poppins-Bold.ttf") format("truetype"), url("Poppins-Bold.woff") format("woff"); font-weight: bold; font-style: normal; } /*Black*/ @font-face { font-family: "Poppins"; src: local("Poppins-Black"), local("Poppins-Black"), url("Poppins-Black.ttf") format("truetype"), url("Poppins-Black.woff") format("woff"); font-weight: 900; font-style: normal; } /*Semi-Bold*/ @font-face { font-family: "Poppins"; src: local("Poppins-SemiBold"), local("Poppins-SemiBold"), url("Poppins-SemiBold.ttf") format("truetype"), url("Poppins-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; } /*Extra-Bold*/ @font-face { font-family: "Poppins"; src: local("Poppins-ExtraBold"), local("Poppins-ExtraBold"), url("Poppins-ExtraBold.ttf") format("truetype"), url("Poppins-ExtraBold.woff") format("woff"); font-weight: 800; font-style: normal; } /*Light*/ @font-face { font-family: "Poppins"; src: local("Poppins-Light"), local("Poppins-Light"), url("Poppins-Light.ttf") format("truetype"), url("Poppins-Light.woff") format("woff"); font-weight: 300; font-style: normal; } /*Medium*/ @font-face { font-family: "Poppins"; src: local("Poppins-Medium"), local("Poppins-Medium"), url("Poppins-Medium.ttf") format("truetype"), url("Poppins-Medium.woff") format("woff"); font-weight: 500; font-style: normal; } /*Extra-Light*/ @font-face { font-family: "Poppins"; src: local("Poppins-ExtraLight"), local("Poppins-ExtraLight"), url("Poppins-ExtraLight.ttf") format("truetype"), url("Poppins-ExtraLight.woff") format("woff"); font-weight: 200; font-style: normal; } /*Thin*/ @font-face { font-family: "Poppins"; src: local("Poppins-Thin"), local("Poppins-Thin"), url("Poppins-Thin.ttf") format("truetype"), url("Poppins-Thin.woff") format("woff"); font-weight: 100; font-style: normal; } /*Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-Italic"), local("Poppins-Italic"), url("Poppins-Italic.ttf") format("truetype"), url("Poppins-Italic.woff") format("woff"); font-weight: normal; font-style: italic; } /*Medium-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-MediumItalic"), local("Poppins-MediumItalic"), url("Poppins-MediumItalic.ttf") format("truetype"), url("Poppins-MediumItalic.woff") format("woff"); font-weight: 500; font-style: italic; } /*Semi-Bold-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-SemiBoldItalic"), local("Poppins-SemiBoldItalic"), url("Poppins-SemiBoldItalic.ttf") format("truetype"), url("Poppins-SemiBoldItalic.woff") format("woff"); font-weight: 600; font-style: italic; } /*Bold-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-BoldItalic"), local("Poppins-BoldItalic"), url("Poppins-BoldItalic.ttf") format("truetype"), url("Poppins-BoldItalic.woff") format("woff"); font-weight: bold; font-style: italic; } /*Extra-Bold-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-ExtraBoldItalic"), local("Poppins-ExtraBoldItalic"), url("Poppins-ExtraBoldItalic.ttf") format("truetype"), url("Poppins-ExtraBoldItalic.woff") format("woff"); font-weight: 800; font-style: italic; } /*Light-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-LightItalic"), local("Poppins-LightItalic"), url("Poppins-LightItalic.ttf") format("truetype"), url("Poppins-LightItalic.woff") format("woff"); font-weight: 300; font-style: italic; } /*Extra-Light-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-ExtraLightItalic"), local("Poppins-ExtraLightItalic"), url("Poppins-ExtraLightItalic.ttf") format("truetype"), url("Poppins-ExtraLightItalic.woff") format("woff"); font-weight: 200; font-style: italic; } /*Thin-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-ThinItalic"), local("Poppins-ThinItalic"), url("Poppins-ThinItalic.ttf") format("truetype"), url("Poppins-ThinItalic.woff") format("woff"); font-weight: 100; font-style: italic; } /*Black-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-BlackItalic"), local("Poppins-BlackItalic"), url("Poppins-BlackItalic.ttf") format("truetype"), url("Poppins-BlackItalic.woff") format("woff"); font-weight: 900; font-style: italic; }
给出的 CSS 代码代表 @font-face
规则,它允许网页开发人员在网站上定义和使用自定义字体。在本例中,定义的自定义字体是 “Poppins”。让我们分解一下代码:
@font-face
:这是用于定义网页上使用的自定义字体的 CSS 规则。font-family: "Poppins";
: 指定自定义字体系列的名称,本例中为 “Poppins”。该名称将用于在整个网站中引用字体。src
:指定字体文件的来源。local()
函数用于检查用户设备上是否已安装字体。如果是,将使用本地安装的版本。随后的url()
函数将提供不同格式字体文件的路径。format
:指定字体文件的格式。本例中使用了两种格式: TrueType (TTF) 和 Web Open Font Format (WOFF)。font-weight: normal;
:定义 “Poppins” 字体系列与正常文本一起使用时的字体权重。在这种情况下,它被设置为默认字体权重,即 “normal”。font-style: normal;
:定义 “Poppins” 字体系列与正常文本一起使用时的字体样式。这里,它被设置为默认字体样式,即 “normal”(非斜体)。
总之,这条 @font-face
规则确保了自定义字体 “Poppins” 的正确定义,并可用于不同 HTML 元素的 CSS 样式中。有了这种设置,网站开发人员就可以轻松地将 “Poppins” 字体应用到网站的各个部分,使其具有独特的、视觉上吸引人的排版风格。
- 编辑 Functions.php(可选):如果您想使用 functions.php 来调用自定义字体,请访问 WordPress 主题的 functions.php 文件并添加相应代码来注册和调用自定义字体。
function add_custom_fonts() { wp_enqueue_style( 'my-styles', WP_CONTENT_URL . '/custom-fonts/include_font.css', array(), '1.0.0' ); } add_action( 'wp_enqueue_scripts', 'add_custom_fonts' );
按照这些步骤,您就成功地将自定义字体整合到了 WordPress 网站中。字体文件现在已存储在服务器上,随时可以访问并加载到网站上。下一部分将指导您使用 CSS 启用这些自定义字体,确保您的网站显示出所需的排版,以获得吸引人的用户体验。
4. 使用 CSS 启用字体
现在,您已经通过下载和转换准备好了自定义字体,是时候使用 CSS 将它们整合到 WordPress 网站中了。有了提供的 “include_font.css” 文件和 “function.php” 文件中的相应代码,您就可以将自定义字体应用到网站的不同元素中了。
4.1 为特定元素应用自定义字体
要为网站上的特定元素自定义字体样式,请按照以下步骤操作:
h1, h2, h3 { font-family: "Poppins", sans-serif; }
4.2 全局自定义字体样式
您也可以使用 “*”(星号)选择器,将自定义字体全局应用到所有相关元素。这样可以确保整个网站的一致性。为此,请在 “额外 CSS” 部分添加以下 CSS 代码:
*{ --fontFamily: "Poppins", sans-serif; }
该代码将 “Poppins” 字体设置为整个网站正文的默认字体。
4.3 备用字体:在自定义字体无法加载的情况下,必须提供一种后备字体。后备字体应为常用字体,以确保一致的用户体验。例如:
body { font-family: "Poppins", sans-serif; }
在本例中,如果 “Poppins” 字体不可用,浏览器将使用默认的无衬线字体。
有了这些 CSS 指南,您就可以灵活地在 WordPress 网站上有选择性地或全局性地应用自定义字体。通过为网站的设计和内容选择完美的自定义字体,您可以尽情发挥创造力,打造独一无二、引人入胜的用户体验。
5. 在本地加载 Google 字体的好处
与依赖外部服务器加载字体相比,在 WordPress 网站上本地集成 Google 字体有几个优势。通过在服务器上托管字体文件,而不是从谷歌服务器上获取字体文件,你可以享受到以下好处:
以下是本地加载 Google 字体与不本地加载 Google 字体的比较表:
参数 | 本地加载 Google 字体 | 不在本地加载 Google 字体 |
---|---|---|
页面加载速度 | 更快 | 较慢 |
网站性能 | 增强型 | 可能会受到影响 |
隐私与安全 | 提高隐私保护 | 可能将数据传输到外部服务器,可能会引发隐私问题 |
遵守 GDPR | 符合要求 | 可能在遵守数据保护法规方面带来挑战 |
离线访问 | 可用 | 不可用 |
控制和自定义 | 完全控制字体文件和自定义选项 | 有限的自定义和控制,依赖于外部服务器 |
对外部服务器的依赖 | 风险降低 | 出现影响字体可用性的中断或变更的风险较高 |
CORS 问题 | 避免 | 从外部域加载资源时可能出现的 CORS 相关问题 |
面向未来 | 确保 | 易受外部字体服务潜在变化或中断的影响 |
总之,本地加载 Google 字体可以加快页面加载速度,提高网站性能,增加隐私和安全性,符合 GDPR 要求,实现离线访问,提供更好的控制和自定义选项,最大限度地减少对外部服务器的依赖,避免 CORS 问题,并提高面向未来的能力。另一方面,不在本地加载谷歌字体可能会导致加载时间变慢、潜在的隐私问题、遵守数据保护法规方面的挑战、有限的定制选项、对外部服务器的依赖、可能的 CORS 相关问题以及易受外部字体服务变化的影响。
6. 排除常见问题
虽然在 WordPress 网站上添加自定义字体可以大大增强网站的视觉吸引力和用户体验,但在此过程中遇到一些问题并不少见。在此,我们将讨论一些常见问题,并提供故障排除技巧,以帮助您解决这些问题。
6.1 字体不显示
问题:您的自定义字体在网站上无法显示。
故障排除技巧:
@font-face
规则和 CSS 代码中的字体族名称与 “include_font.css” 文件中指定的名称一致。6.2 页面加载速度慢
问题:集成自定义字体会影响网站的加载速度。
故障排除技巧:
6.3 跨浏览器兼容性
问题:自定义字体在不同网络浏览器上的显示效果不同或完全不显示。
故障排除技巧:
6.4 CORS 问题
问题:从外部域加载字体资源时,遇到跨源资源共享 (CORS) 问题。
故障排除技巧:
6.5 混合内容错误(针对 HTTPS 网站)
问题:如果您的网站使用 HTTPS,但字体文件是通过 HTTP 加载的,则可能会出现混合内容错误。
故障排除技巧:
6.6 字体许可和版权
问题:有关字体许可和版权的法律问题。
故障排除技巧:
通过解决这些常见问题并应用所提供的故障排除技巧,您可以确保将自定义字体顺利集成到 WordPress 网站中,从而为访问者提供具有视觉吸引力的无缝用户体验。
小结
自定义字体在提升 WordPress 网站的视觉吸引力和用户体验方面起着至关重要的作用。通过在本地添加自定义字体,您可以提高页面加载速度、增强性能,并在维护用户隐私的同时确保符合 GDPR 要求。本地托管提供了更多的控制和自定义选项,减少了 CORS 问题,并使您的网站免受潜在字体服务变更的影响。如果遇到问题,请按照我们的故障排除技巧克服常见的障碍,享受为网站创建独特迷人的排版所带来的好处。欢迎使用自定义字体,让您的网站与众不同、令人难忘。