Plotly Go导出图片时如何保留导入的自定义字体？

问题核心 #

使用Plotly Go指定非内置字体时，编辑器内图表能正常显示目标字体，但调用write_image导出图片时字体自动变回默认样式。尝试过以下方法均未解决：

• 引入GitHub上的远程.ttf字体文件
• Windows本地安装字体后指定文件路径
• 切换渲染引擎为Orca、更换不同版本的Kaleido

问题根源 #

1. 远程字体路径错误：你使用的GitHub链接是网页地址，而非字体文件的直接下载链接，Kaleido/Orca无法正确加载该资源
2. 本地字体识别逻辑问题：即使安装了字体，Plotly渲染引擎无法直接通过文件路径识别，需要指定字体的系统注册名称而非文件路径

可行解决方案 #

方案1：使用本地安装的字体（推荐）

1. 确保目标字体已在Windows系统中完成安装（右键.ttf文件选择「安装」）
2. 获取字体的正式名称：
   • 打开控制面板→字体→找到目标字体，右键→属性，查看「名称」字段（比如Inter字体的正式名称就是Inter）
3. 修改代码，直接指定字体名称：

import plotly.graph_objects as go

# 直接使用字体的系统注册名称，而非路径或网页链接
font_family = "Inter"
animals=['giraffes', 'orangutans', 'monkeys']
fig = go.Figure([go.Bar(x=animals, y=[20, 14, 23])])
    
fig.update_layout(font_family=font_family, font_color='#4b9cb9', font_size=20)
fig.show()
fig.write_image("barchart_example.png", scale=1)

方案2：正确加载远程字体

若必须使用远程字体，需替换为字体文件的直接下载链接（GitHub上点击字体文件的「Raw」按钮获取），并通过模板注入字体加载规则：

import plotly.graph_objects as go

# 替换为字体的直接下载链接
font_url = "https://raw.githubusercontent.com/google/fonts/main/ofl/inter/Inter%5Bslnt%2Cwght%5D.ttf"
animals=['giraffes', 'orangutans', 'monkeys']
fig = go.Figure([go.Bar(x=animals, y=[20, 14, 23])])

# 注入自定义字体的CSS加载规则
fig.update_layout(
    template=go.layout.Template(
        layout=go.Layout(
            font=dict(family=f"'Inter', sans-serif"),
            hoverlabel=dict(font=dict(family=f"'Inter', sans-serif")),
            annotations=[dict(
                text=f"<style>@font-face {{font-family: 'Inter'; src: url('{font_url}');}}</style>",
                showarrow=False,
                x=0, y=0, xref="paper", yref="paper",
                xanchor="left", yanchor="bottom", font_size=1
            )]
        )
    ),
    font_color='#4b9cb9',
    font_size=20
)

fig.show()
fig.write_image("barchart_example.png", scale=1)

方案3：配置Kaleido强制使用本地字体

若上述方法无效，可手动修改Kaleido的配置文件：

1. 找到Kaleido配置文件路径：通常在~/.kaleido/config.yaml或虚拟环境的Lib/site-packages/kaleido/config.yaml
2. 添加本地字体路径到配置：

fonts:
  - path: "C:/Windows/Fonts/Inter.ttf"
    family: "Inter"

3. 重启Python环境后重新运行代码

验证方式 #

导出图片后，放大文字区域对比编辑器内的字体样式，确认是否生效。

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