Сложность получения пользовательского шрифта Google, работающего для приложения Plotly Dash

#plotly-dash #google-font-api

Вопрос:

У меня есть приложение dash, и я хотел бы использовать пользовательский шрифт Google. У меня проблемы с тем, чтобы заставить его работать. В соответствии с инструкциями Google я добавил следующее в свой CSS-лист в папке «Ресурсы».

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

Это изменяет шрифт, но на общий шрифт курсивной черточки, а не на нужный.
Я попытался установить внешние таблицы стилей на URL — адрес шрифта, но безрезультатно. Есть еще какие-нибудь советы?

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

Ответ №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 Oneamp;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)
 

стили.css

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