嵌入网站的Google Sheet字体显示异常，Lekton字体无法生效如何解决？

iframe属于独立的跨域文档，浏览器同源策略默认禁止父页面CSS直接修改iframe内部元素样式，你之前修改外部CSS不生效就是这个原因，可按以下优先级尝试解决：

• 先确认Google Sheet内部字体全局统一
  打开源Google Sheet，全选所有单元格，在顶部工具栏字体选择栏手动指定为Lekton，确保没有零散单元格设置了其他字体，修改完成后重新生成嵌入代码替换你页面中的旧代码即可，大部分场景下是表格内部字体未全局统一导致嵌入后fallback到Arial。
• 给嵌入URL添加字体加载参数
  在你使用的Google Sheet嵌入URL末尾追加参数&font=Lekton，该参数会强制嵌入页面提前加载Lekton字体资源，避免因为字体资源未加载完成触发字体fallback。
  参考修改示例：
  原嵌入URL：https://docs.google.com/spreadsheets/d/你的表格ID/embed
  修改后URL：https://docs.google.com/spreadsheets/d/你的表格ID/embed&font=Lekton
• 代理场景下强制覆盖字体规则
  如果你通过后端代理将Google Sheet内容代理到和你网站同域的路径下（可规避跨域限制），可以在你的全局CSS中添加如下规则：

  /* 先引入Lekton字体资源 */
  @import url('https://fonts.googleapis.com/css2?family=Lekton:wght@400;700&display=swap');
  /* 覆盖iframe内部的docs-lekton字体映射 */
  .grid-table td, .grid-table th, * {
    font-family: 'Lekton', 'docs-lekton', sans-serif !important;
  }
  

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