英文字体设计怎么选怎么装：免费可商用字体装进 WordPress 和设计工具

做英文站，字体是最容易被忽略又最容易翻车的一块。不用花钱买，OFL官方明确允许用于Logo和网站，不用署名。OFL1.1的许可全文日期是2007年2月26日，这套规则从2007年到现在没改过，你查到的条款就是现在生效的条款，不会出现去年能用今年不能用的情况。猎者出海做英文独立站，这块的规矩我一直是先弄清再动手。

字体是落地页和Logo给人的第一眼。这里容易出两种问题：买来的字体授权说不清，或者只在自己电脑上好看，用户那边打开变成别的字形。做英文站的人，这两件事都会实打实影响信任。Google Fonts在你这边的网络环境下能不能正常打开，以官方为准，本文不展开。

• 这是什么：从免费可商用的英文字体里选一套，装进设计工具和WordPress，避开版权和跨平台显示两个坑。
• 官方怎么说：OFL字体能用在书籍、海报、艺术作品、Logo和网站上，能打包进应用或软件但受条件约束。
• 怎么做：在Google Fonts选字体，在WordPress用theme.json的settings.typography.fontFamilies注册。
• 踩坑点：slug用当前字体名、用px做字号、用按设备隐藏放私密内容。

本文讲从选一套免费可商用英文字体，到装进设计工具和WordPress，再到避开版权和跨平台显示两个坑。

英文字体设计到底是什么：typeface和font差在哪

typeface是你看到的，font是你用的

这两个词中文里都翻成「字体」，英文里分工很清楚。typeface指的是设计本身，字母的骨架、笔画粗细、收笔形状。font指的是承载这套设计的文件，.ttf、.otf、.woff2这些都是。你从Google Fonts下载到的是font文件，装进软件能看到的是它里面那套typeface。

Google Fonts知识库把这句话写得很干脆：「A typeface is what you see; a font is what you use.」你看到的是一套字形，你用的是文件。分清这个，后面看主题代码里的fontFamily、fontFace就不会晕。

字体家族和超家族：一套字体为什么能配出衬线加无衬线

字体家族指的是一组明确相关、共享同一骨架结构的字体；超家族是更大的分组，跨更多样式。

超家族通常至少包含一个衬线体和一个无衬线体的搭配，也可能扩展到板衬线体或等宽伴随字体，还会包含多种宽度甚至光学样式。一个超家族在画的时候就把比例、重心、x高度统一了，所以你拿它的衬线体做标题、无衬线体做正文，放在一起不别扭。这也是为什么选一套超家族，比你自己从两个不相干的家族里硬凑一对要省事。

出海场景里这套概念对应哪三件事

落地页。主标题和正文通常用两个角色。标题可以带点个性，衬线体有辨识度。正文要小字号屏幕好读，无衬线居多。

Logo。Logo里字是图形的一部分，看的是字母本身的形状，能不能单独拿出来放大、缩小、反白。正文排得好不好，跟Logo合不合适是两回事。

社媒图。图片尺寸大，同一套字体放到图里，字重和字距要重新看。网页上十六像素好看的字体，放到宽幅封面里可能显得太细。

免费可商用的英文字体去哪找：Google Fonts和OFL能给你什么

Google Fonts目录：开源字体和图标整合进网站和产品

Google Fonts提供开源字体和图标目录，官方的说法是便于把字体和图标整合进网站和产品。目录里的字都是开源的。

Google Fonts的知识库是Google Fonts团队和全球字体专家合作做的原创排版指南，写给不同水平的设计师和开发者。选字体之前翻一翻，比在目录里一个个点要强。

OFL允许什么

OFL官方页写得很清楚：「You can use them in books, posters, artwork, logos, and on websites, even make 3D objects with the outlines—no acknowledgement is required」

翻成人话：书、海报、艺术作品、Logo、网站都能用，用它的轮廓去做3D物体也行，不用在页面底下写一行「字体来自某某」。这是OFL跟很多商业授权最大的区别，你省掉的不只是钱，还有一层说不清的授权扯皮。

OFL的边界：打包和改名

能用在成品里，不代表什么都能干。

打包进应用或软件是可以的，但受一定条件约束。做软件分发的人，要把OFL全文和OFL-FAQ读完再动手，不能只拿「免费可商用」几个字当通行证。

修改和再分发是允许的。部分项目修改后可能需要改名，为的是尊重已经声明的保留字体名（RFN）。你改完还叫原名，就可能碰到这条。

选字体的两份官方指南

Google Fonts知识库里有《Choosing web fonts: A beginner's all-in-one guide》和《A checklist for choosing type》。前一篇讲网页字体怎么选，后一篇是可以逐条对的清单。另外还有《Self-hosting web fonts》《Using web fonts from a font delivery service》《Installing & managing fonts—including variable fonts》，自托管、用字体分发服务、装和管理字体三个方向各有对应文章。

指南是英文的，读起来慢。落地页正文排完，用Grammarly英语写作检查过一遍英文用词，把拼写和搭配问题先清掉，再回来看排版。

英文字体设计教程：从选到装进WordPress的分步做法

下面七步按顺序来，前三步在设计工具里完成，后四步进WordPress。

第1步 定用途和调性，先缩范围

动作：写下三行。落地页主标题要什么调性，正文要什么调性，Logo要什么调性。然后按四个大类先划范围：衬线、无衬线、板衬线、等宽。

理由：分类先定，后面才不会在几百个字体里一个个翻。翻到最后眼睛花了，选出来的东西跟品牌没关系。

出问题回查：选不出来，回到前面那两份选字体指南，一条一条对。

第2步 在Google Fonts选定字体家族，记下名字和字重

动作：在Google Fonts目录里定下一个家族，把家族名、可用字重记下来。

理由：第4步的theme.json要用这些信息。字重不全，后面调标题粗细的时候就没得选。

出问题回查：字重不全，先看同家族里有没有别的样式可用，没有就换家族。

第3步 装进设计工具，做Logo和社媒图

动作：把字体文件装到本机的设计软件里，在软件里排版Logo和社媒图。

理由：设计工具里要先能看到字形，才能判断这个字母放大到Logo尺寸好不好看。

出问题回查：显示不对，先确认装的是同一字重。装的是Regular，用的却是Bold，软件会自己模拟一个假粗体，字形就变形了。

设计稿做完要做演示，素材交给Descript音视频剪辑处理一遍。

第4步 在WordPress注册字体家族

动作：在theme.json的settings.typography.fontFamilies里，给每个字体传name、slug、fontFamily三个属性。系统字体（访客电脑上本来就有的）和网页字体（随主题打包的）都支持。官方允许注册任意数量的字体家族。

出问题回查：fontFamily一般填字体栈，也就是浏览器会依次尝试的字体列表，别只填一个名字。

第5步 网页字体加fontFace

动作：如果是随主题打包的网页字体，给字体家族对象加fontFace，src用 "file:./path/to/file.ext" 这种相对theme.json的路径去引用打包的字体文件。官方示例是把Open Sans转成.woff2格式，放进主题的/assets/fonts文件夹，再注册。

理由：只有打包自定义网页字体时才需要fontFace。用系统字体不用写这一段。

出问题回查：想用打包字体但页面上没生效，先看fontFace是不是漏了。

第6步 在区块编辑器里套用并检查

动作：选中区块，打开区块设置侧栏的Typography分区。点三点菜单展开默认隐藏的排版设置，选Font，打开字体家族下拉。改坏了，点三点菜单里的Reset All，一次清掉所有改动。

理由：下拉里能选到哪些字体，取决于主题注册了哪些。

出问题回查：看不到区块设置侧栏，先选中区块，再点保存/发布按钮旁边的设置图标。

第7步 用CSS变量统一引用

动作：注册之后WordPress会在编辑器和前台生成 --wp--preset--font-family--{$slug} 格式的CSS自定义属性。theme.json的样式里写 var:preset|font-family|$slug，CSS里写 var( --wp--preset--font-family--{$slug} )。

理由：全站改字体只改一处，不用去找哪个区块单独设过。

数字和限制：OFL版本、字号档位、行高这些数要记住

这张表里最要紧的是第一行和第三行。OFL1.1从2007年2月26日到现在没变，你按这一版去判断就行；自定义字号超过5个，界面从按钮组变成下拉选择，预设堆太多用户反而要翻半天。

字号单位可在px、em、rem之间切换。字距单位能从默认的px改成%、em、rem、vw、vh。官方示例里Open Sans的fontWeight写 "300 800"，一个区间覆盖多个字重，可变字体可以这么写。

英文字体设计里5个坑，出错按这个顺序查

坑一 slug用当前字体名

slug不要写成当前字体的名字，官方明确建议避免。你哪天把Inter换成别的字体，slug还叫inter，全站引用这个slug的地方要么看着没换，要么直接失效。语义化命名才耐用，换主题、换样式变体都不受影响。

坑二 把所有排版设置都开给用户

只开主题受众真正需要的几项，官方说的是取决于受众，只启用他们需要的功能。侧栏里塞满选项，用户每次调字都要在一堆开关里找，反而挡住事。设置多不等于好用。

坑三 用px做字号

字号用rem或em，别用px。px是绝对单位，不随用户浏览器设置缩放，用户把默认字号调大，px写的文字不动。用相对单位，文字和间距会一起放大，这是无障碍的基本要求。

坑四 首字下沉

保留这个功能就要一个字体一个字体去测。官方明说这个功能在不同字体家族、字号、行高下问题很多，可能要加自定义CSS。另外dropCap只对段落区块有效，别的区块没有这一项。

坑五 用按设备隐藏放私密内容

不要用设备隐藏来放私密或敏感内容。按设备隐藏的区块仍然在页面代码里，只是在选中的设备尺寸下看不见，翻一下源码就露了。

排查顺序

1. 先看对比度警告。文字颜色跟背景对比度不够，界面会弹警告，先换色。
2. 再确认这个区块支不支持这项设置。不是每个区块都支持每一项排版设置，部分只对单一区块生效。
3. 最后确认fontFace是不是只在打包网页字体时才该出现。用系统字体却写了fontFace，就是多写了一层。

字体文件动辄几MB，要传给协作者，用国外大文件网盘传，别塞聊天窗口。

品牌和Logo场景：一套英文字体怎么定规范

先用超家族减少搭配数量

一套超家族里，至少有一个衬线体和一个无衬线体可以做搭配，有的还能扩展到板衬线或等宽。品牌规范先从这里起步，比自己去凑两套不相干的字体稳。

具体定：标题一套，正文一套，正文里如果再要代码块或数据，用等宽那套。三个角色定完，剩下的都不往规范里加。

Logo用OFL字体合规

OFL写了可以用在Logo里。这条对独立站很实用：Logo直接在矢量软件里打字转曲，授权上没有额外动作要补。

要注意的是Logo一旦定下来不轻易换。转曲之后字体文件跟设计稿脱钩，后面别人要改，得找回同一套字形。

中英文混排时注意

拉丁字体那套分类，衬线、无衬线、板衬线、几何、人文，不能直接套到中文字体上。Google Fonts知识库对CJK的说明是：中国的衬线类设计叫宋体，无衬线类叫黑体。

做中英混排的页面，英文用一套，中文用一套，两套的字面高度和重心要对齐，不然一行字看过去忽大忽小。

AI能帮英文字体设计哪几步，人要核什么

AI能帮的4步

第一步，把落地页、Logo、社媒图三处的用途和调性说清楚，让AI按Google Fonts知识库的分类给候选搭配。衬线、无衬线、板衬线、等宽四个大类，让它每组说清为什么这么配。

第二步，让AI把选定的字体家族整理成theme.json的fontFamilies结构，name、slug、fontFamily三项先排好。

第三步，让AI检查字体栈写法，确认fontFamily里放的是浏览器依次尝试的字体列表，不是单个名字。

第四步，让AI把OFL的允许用途和限制条件整理成一张对照表。这活偏整理资料和对照官方文档，可以让猎者出海的AI Agent先跑一版，你最后拿官方页对一次。

人必须自己做的3件事

第一件，在WordPress后台选中区块，打开区块设置侧栏的Typography分区，点三点菜单确认这次要开哪几项排版设置。开多了用户会乱，开少了不够用，这个判断只能在后台做。

第二件，在theme.json里亲手填name、slug、fontFamily三项。网页字体再加fontFace的src路径。这些值要你一项项对进去。

第三件，改完去前台看实际效果。对比度警告出现就换色。首字下沉效果不对，就决定保留还是关掉。

3条可照抄的提示词

这三条是本文给的示例，不是官方模板。

• 「我在做出海落地页，主标题要衬线、正文要无衬线，请按Google Fonts知识库的字体分类给我3组搭配，每组说明为什么这样配。」
• 「帮我把这套字体写成WordPress theme.json的settings.typography.fontFamilies结构，slug用语义化命名，不要用字体名。」
• 「根据SIL OFL官方页的说明，列出OFL字体能用在哪些场景、打包进软件有什么条件、修改后什么情况要改名。」

常见问题

英文字体设计免费用在Logo和网站上要署名吗

不用。OFL明确允许用在Logo和网站上，不需要署名。页面底部不用加字体来源那一行。

OFL字体能打包进软件里卖吗

可以打包进应用或软件，但受一定条件约束。卖之前把OFL全文和OFL-FAQ里的条件读完，别只看「免费可商用」四个字。

改了OFL字体还能不能商用，要不要改名

能修改也能再分发。部分项目修改后需要改名，为的是尊重保留字体名（RFN）。原项目声明了RFN，你改的这套就不能继续用原名。

WordPress里font-family该填一个字体名还是字体栈

一般填字体栈。fontFamily属性映射到CSS的font-family，浏览器会按列表依次尝试。只填一个名字，这个字体加载失败就没有回退。

网页正文字号为什么建议用rem不用px

WordPress给出的单位建议是用rem或em，不用px。px是绝对单位，用户调大浏览器字号时它不动，正文用相对单位，文字和间距会一起缩放。

中英文混排时英文字体能直接套中文字体的分类吗

不能直接套。拉丁的衬线、无衬线这些分类跟中文的宋体、黑体不是一一对应。混排时两套字体的字面高度和重心要对齐。

相关文章：Paperpal学术写作辅助和AISEO英文写作工具，写完英文内容可以配合用。

字体这件事，选的时候花半天，装的时候按步骤走一遍，后面基本不用再动。真正会返工的是命名和单位这两个小地方，早定好省事。OFL条款隔一阵会让猎者出海的AI Agent对照官方页整理一遍变动，比自己翻省时间。