在Teachable平台使用自定义Webfonts遇加载问题求助

• 修正标签的rel属性：你当前使用的rel="preconnect"仅用于预建立与服务器的连接，并不会实际加载CSS文件。需要添加单独的<link>标签引入字体样式表：

  <link rel="preconnect" href="https://tablocreative.com/roo/webfonts.css" crossorigin>
  <link rel="stylesheet" href="https://tablocreative.com/roo/webfonts.css" crossorigin>
  

• 检查webfonts.css中的@font-face规则：

  • 确认font-family名称与你CSS中使用的'Avenir LT Pro'完全一致（包括大小写、空格、引号格式）。
  • 验证字体文件路径：如果用相对路径，要确保相对于webfonts.css的位置正确；建议改用绝对路径指向字体文件。
  • 核对font-weight和font-style：比如@font-face只定义了常规字重，但页面元素用了加粗样式，会自动 fallback 到系统字体。

• 验证字体文件的可访问性：
  直接在浏览器地址栏输入webfonts.css里字体文件的完整URL，看是否能正常下载或预览。如果无法访问，说明文件路径或服务器配置存在问题。

• 检查字体文件的CORS配置：
  打开浏览器DevTools的Network面板，过滤字体文件请求，查看响应头是否包含Access-Control-Allow-Origin且允许Teachable页面域名访问。字体文件的跨域限制比CSS更严格，缺少CORS头可能导致浏览器静默拦截加载。

• 确认Teachable代码注入位置：
  确保样式表链接和自定义CSS放在Teachable允许的<head>代码注入区域，避免因加载顺序问题导致样式未生效。

• 查看浏览器字体加载状态：
  在Chrome DevTools的Application面板中展开Fonts选项，检查是否有Avenir LT Pro的条目。如果没有，说明@font-face规则未被正确解析；如果有但未应用，可在Elements面板的Computed标签下确认元素最终生效的字体。

内容的提问来源于stack exchange，提问作者user1380540