Use externally hosted fonts and fallbacks to customize your font

Streamlit comes with Source Sans as the default font, but you can configure your app to use another font. This tutorial uses variable font files and is a walkthrough of Example 3 from Customize fonts in your Streamlit app. For an example that uses self-hosted variable font files, see Use variable font files to customize your font. For an example that uses self-hosted static font files, see Use static font files to customize your font.

This tutorial uses inline font definitions, which were introduced in Streamlit version 1.50.0. For an older workaround, see Use externally hosted fonts and fallbacks to customize your font (streamlit<1.50.0).

Prerequisites

This tutorial requires the following version of Streamlit:

streamlit>=1.50.0
You should have a clean working directory called your-repository.
You should have a basic understanding of working with font files in web development. Otherwise, start by reading Customize fonts in your Streamlit app up to Example 3.

Summary

The following example uses Google-hosted instances of Nunito and Space Mono.

Here's a look at what you'll build:

Complete config.toml fileexpand_more

Directory structure:

your_repository/
├── .streamlit/
│   └── config.toml
└── streamlit_app.py

.streamlit/config.toml:

[theme]
font="Nunito:https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000, sans-serif"
codeFont="'Space Mono':https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap, monospace"

streamlit_app.py:

import streamlit as st

st.write("Normal efg")
st.write("*Italic efg*")
st.write("**Bold efg**")
st.write("***Bold-italic efg***")
st.write("`Code normal efg`")
st.write("*`Code italic efg`*")
st.write("**`Code bold efg`**")
st.write("***`Code bold-italic efg`***")

Collect your font CSS URLs

To collect your URLs to use in later steps, open a text editor.

Remember to label the values as you paste them so you don't mix them up.
Go to Google fonts.
Search for or follow the link to Nunito, and select "Get font."
To get a link to a style sheet for your font files, in the upper-right corner, select the shopping bag (shopping_bag), and then select "code Get embed code."
On the right, in the first code block, copy the href URL from the third link, and paste it into your text editor.

By default, the "Embed Code" page loads with the "Web" tab and "<link>" radio option selected. The first code block is titled, "Embed code in the <head> of your html." The URL is a link to a style sheet and should look like the following text:

https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000
To remove Nunito from your list and get a clean URL for Space Mono, select the trash can (delete). Then, repeat the previous three steps for Space Mono.

The URL should look like the following text:

https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap
In your text editor, modify each URL by prepending its font family and a colon separator:

Nunito:https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000 'Space Mono':https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap

Because Space Mono has a space in its name, use single quotes around the font family. These will be inner quotes when the string is later copied into your configuration file.

Create your app configuration

In your_repository/, create a .streamlit/config.toml file:

your_repository/ └── .streamlit/ └── config.toml
To set your alternative fonts as the default font for your app, in .streamlit/config.toml, add the following text:

[theme] font="Nunito:https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000, sans-serif" codeFont="'Space Mono':https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap, monospace"

This sets Nunito as the default for all text in your app except inline code and code blocks, which will be Space Mono instead. If Google's font service is unavailable, the app will fall back to the indicated built-in fonts.

Build the example

To verify that your font is loaded correctly, create a simple app.

Initialize your app

In your_repository, create a file named streamlit_app.py.
In a terminal, change directories to your_repository, and start your app:

streamlit run streamlit_app.py

Your app will be blank because you still need to add code.
In streamlit_app.py, write the following:

import streamlit as st
Save your streamlit_app.py file, and view your running app.
In your app, select "Always rerun", or press the "A" key.

Your preview will be blank but will automatically update as you save changes to streamlit_app.py.
Return to your code.

Display some text in your app

Create a streamlit_app.py file in your working directory.
In streamlit_app.py, add the following text:

import streamlit as st st.write("Normal efg") st.write("*Italic efg*") st.write("**Bold efg**") st.write("***Bold-italic efg***") st.write("`Code normal efg`") st.write("*`Code italic efg`*") st.write("**`Code bold efg`**") st.write("***`Code bold-italic efg`***")

The example includes "efg" in each line to better show the typographical differences when you run your app. In Space Mono, the italic "f" descends below baseline, but the normal "f" doesn't. Space Mono also has different serifs on its normal and italic "l."
Save your streamlit_app.py file, and view your running app.

arrow_backPrevious: Configuration and theming arrow_forwardNext: Use external font files (streamlit<1.50.0)

forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.

Hello there 👋