如何在HTML/CSS中调用本地字体Gotham Light Regular？
2026-5-13
解决自定义字体加载失败的问题
我来帮你梳理下代码里的问题，几个小细节没处理好导致字体没生效，咱们一步步修正：
问题分析
你的代码存在三个核心问题：
- CSS规则位置错误：
.name的样式写在了<style>标签外面，浏览器不会解析这部分规则； - 路径与格式处理不严谨：带空格的文件名/路径最好用引号包裹，同时建议明确字体格式，帮助浏览器识别；
- 样式继承优先级：直接给
.name设置字体的话，h1/h2的默认浏览器字体可能会覆盖它，最好直接指定目标元素或者确保继承生效。
修正后的完整代码
<!DOCTYPE html> <html> <head> <style> /* 先定义自定义字体，放在所有样式规则前面 */ @font-face { font-family: 'myFirstFont'; /* 路径加引号避免空格解析问题，同时指定字体格式 */ src: url('fonts/Gotham Light Regular/Gotham Light Regular.otf') format('opentype'); /* 明确字重（Light对应300）和样式，方便后续扩展多字重字体 */ font-weight: 300; font-style: normal; } /* 给目标元素应用字体，同时添加fallback字体防止加载失败 */ .name h1, .name h2 { font-family: 'myFirstFont', sans-serif; } </style> </head> <body> <div class="name"> <h1>Hello</h1> <h2>Bye</h2> </div> </body> </html>
额外注意事项
- 路径验证：确认你的HTML文件所在目录下，确实存在
fonts/Gotham Light Regular/Gotham Light Regular.otf这个文件。如果HTML在子文件夹（比如pages/index.html），路径要改成../fonts/Gotham Light Regular/Gotham Light Regular.otf； - 浏览器兼容性：OTF格式虽然主流浏览器都支持，但如果要兼容更旧的浏览器，建议同时提供WOFF/WOFF2格式的字体，补充到
src里：src: url('fonts/Gotham Light Regular/Gotham-Light.woff2') format('woff2'), url('fonts/Gotham Light Regular/Gotham-Light.woff') format('woff'), url('fonts/Gotham Light Regular/Gotham Light Regular.otf') format('opentype'); - 字体名规范：如果后续要使用多个字重的Gotham字体，建议统一字体族名，通过
font-weight区分，比如都叫Gotham，Light用300，Regular用400，这样切换字体更方便。
内容的提问来源于stack exchange，提问作者Mark
