Using Google Fonts / Custom Fonts in Dash Offline App

Dash Python
1

I have to deploy a Dash App in a completely offline setting, and I’m having difficulty adding custom fonts. Can someone help me understand how I can use Open Sans? I downloaded a .zip file of the font files, extracted it to assets and created a CSS file called open-sans.css referring to the font files.

My project directory looks like:

assets/open-sans.css
assets/open-sans-v15-latin/open-sans-v15-latin-regular.eot
assets/open-sans-v15-latin/open-sans-v15-latin-regular.svg
assets/open-sans-v15-latin/open-sans-v15-latin-regular.ttf
assets/open-sans-v15-latin/open-sans-v15-latin-regular.woff
assets/open-sans-v15-latin/open-sans-v15-latin-regular.woff2
app.py

Code for assets/open-sans.css:

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/open-sans-v15-latin/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('/assets/open-sans-v15-latin/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/open-sans-v15-latin/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/open-sans-v15-latin/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/assets/open-sans-v15-latin/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/open-sans-v15-latin/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Code for app.py:

import dash
import dash_html_components as html
 
app = dash.Dash(__name__)
 
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
 
app.layout = html.Div(
    [
        html.H1(
            'Hello World!',
            style={
                'textAlign': 'center',
                'fontFamily': 'Open Sans',
            }
        ),
       
    ],
)
 
 
if __name__ == '__main__':
    app.run_server(debug=True)
3

Unfortunately this doesn’t work. When I inspect element and look under “Computed”, the “Rendered Fonts” is still Times New Roman.

4

From the Sample Dash CSS Stylesheet (https://codepen.io/chriddyp/pen/bWLwgP.css), it says " The typography base is Open Sans served by Google, set at 15rem (15px) over a 1.6 line height (24px)." and it doesn’t require any font file.

44%20PM
Screen Shot 2018-10-22 at 2.24.44 PM.png1704×806 127 KB

Have you tried using this (copy and paste everything in https://codepen.io/chriddyp/pen/bWLwgP.css into a file in your assets folder)?

5

When I copy/pasted the css file, it worked!

I’m still curious to know how to serve custom fonts that aren’t built into Chrome when offline. Any suggestions on that issue?

2 Likes