难以获得适用于 Plotly Dash 应用程序的自定义 Google 字体

Question

我有一个 dash 应用程序，想使用自定义 google 字体。我无法让它正常工作。根据 google 说明，我将以下内容添加到资产文件夹中的 CSS sheet。

@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');
body{
   font-family: 'Poiret One', cursive
}

这会更改字体，但会更改为通用的破折号草书字体，而不是所需的字体。我尝试将外部样式 sheets 设置为字体 URL 无济于事。还有其他提示吗？

FA = "https://fonts.googleapis.com/css2?family=Poiret+One&display=swap"
external_stylesheets = [FA, dbc.themes.SLATE]

Answer 1

您可以尝试添加 app.css.config.serve_locally = True，这应该确保 CSS 样式表已加载到浏览器中。

app.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc

external_stylesheets = [
    'https://fonts.googleapis.com/css2?family=Poiret+One&display=swap',
     dbc.themes.SLATE
]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.css.config.serve_locally = True

app.layout = html.Div([

    html.Div(
        children='Almost before we knew it, we had left the ground.',
        style={
            'font-size': '200%',
            'margin': '2vw 0vw 0vw 2vw',
        }
    ),

])

if __name__ == '__main__':
    app.run_server(host='127.0.0.1', debug=True)

styles.css

body{
    font-family: 'Poiret One', cursive;
}

难以获得适用于 Plotly Dash 应用程序的自定义 Google 字体

Difficulty getting custom Google font working for Plotly Dash app

google-font-api

plotly-dash