如何在PHP中加载本地字体替代Google字体(GDPR合规)
替换Google Fonts为本地加载的实现步骤
1. 准备本地字体文件
- 下载Open Sans对应字重和样式的字体文件:300(正常)、300italic(斜体)、400(正常)、400italic(斜体)、600(正常)、600italic(斜体),优先选择woff2和woff格式(兼容性最优)。
- 在你的WordPress主题根目录下新建
fonts文件夹,将下载好的字体文件放入其中。
2. 创建本地字体样式文件
- 在主题根目录下新建
css文件夹,创建local-fonts.css文件,写入以下@font-face规则(注意替换文件名和路径,确保与实际字体文件匹配):
/* Open Sans 300 常规 */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), url('../fonts/open-sans-v34-latin-300.woff') format('woff'); } /* Open Sans 300 斜体 */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('../fonts/open-sans-v34-latin-300italic.woff2') format('woff2'), url('../fonts/open-sans-v34-latin-300italic.woff') format('woff'); } /* Open Sans 400 常规 */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), url('../fonts/open-sans-v34-latin-regular.woff') format('woff'); } /* Open Sans 400 斜体 */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'), url('../fonts/open-sans-v34-latin-italic.woff') format('woff'); } /* Open Sans 600 常规 */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), url('../fonts/open-sans-v34-latin-600.woff') format('woff'); } /* Open Sans 600 斜体 */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url('../fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), url('../fonts/open-sans-v34-latin-600italic.woff') format('woff'); }
3. 修改PHP变量指向本地CSS
找到你提供的那段PHP代码,将Google字体的URL替换为本地local-fonts.css的URL:
原代码:
$open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets&display=fallback";
修改为:
// 指向主题目录下的本地字体样式文件 $open_sans_font_url = get_stylesheet_directory_uri() . '/css/local-fonts.css';
4. 额外注意事项
- 如果你使用子主题,务必把字体文件和CSS文件放在子主题目录下,避免主题更新时被覆盖。
- 清除浏览器缓存后测试,通过开发者工具的「网络」面板确认:不再请求Google服务器的字体链接,而是加载本地的CSS和字体文件。
内容的提问来源于stack exchange,提问作者Ela
相关产品推荐
相关产品推荐

