Hello there 👋

Thanks for stopping by! We use cookies to help us understand how you interact with our website.

By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.

  1. Contents
  2. Prerequisites
  3. Summary
  4. Collect your font file URLs
  5. Create your app configuration
  6. Build the example
  7. Initialize your app
  8. Display some text in your app

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.

Prerequisites

  • This tutorial requires the following version of Streamlit:

    streamlit>=1.46.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 a Google-hosted instances of Nunito and Space Mono. Nunito is defined in variable font files. However, because font style is not parameterized, Nunito requires two files to define the normal and italic styles separately. Space Mono is defined in static font files.

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.fontFaces]] family="Nunito" url="https://fonts.gstatic.com/s/nunito/v31/XRXX3I6Li01BKofIMNaDRs7nczIH.woff2" style="italic" weight="200 1000" [[theme.fontFaces]] family="Nunito" url="https://fonts.gstatic.com/s/nunito/v31/XRXV3I6Li01BKofINeaBTMnFcQ.woff2" style="normal" weight="200 1000" [[theme.fontFaces]] family="Space Mono" url="https://fonts.gstatic.com/s/spacemono/v17/i7dNIFZifjKcF5UAWdDRYERMR3K_MQacbw.woff2" style="italic" weight="400" [[theme.fontFaces]] family="Space Mono" url="https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2" style="normal" weight="400" [[theme.fontFaces]] family="Space Mono" url="https://fonts.gstatic.com/s/spacemono/v17/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSRRXaPYw.woff2" style="italic" weight="700" [[theme.fontFaces]] family="Space Mono" url="https://fonts.gstatic.com/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2" style="normal" weight="700" [theme] font="Nunito, sans-serif" codeFont="'Space Mono', 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 file URLs

  1. Go to Google fonts.

  2. Search for or follow the link to Nunito, and select "Get font."

  3. Search for or follow the link to Space Mono, and select "Get font."

  4. 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."

  5. On the right, in the first code block, copy the href URL from the third link, and paste it into a new tab.

    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&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap

  6. Go to your new tab and visit the URL.

    This page is a style sheet. It is filled with font-face declarations that look like the following text:

    /* cyrillic-ext */ @font-face { font-family: "Nunito"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v31/XRXX3I6Li01BKofIMNaORs7nczIHNHI.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

    Each font-face declaration starts with a comment to indication which character set is included in that declaration. For most English apps, only the /* latin */ declarations are needed.

  7. To store the portion of the style sheet you'll need in later steps, copy the font-face declarations that are prefixed with the /* latin */ comment, and paste them into a text file.

Create your app configuration

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

    your_repository/ └── .streamlit/ └── config.toml

  2. To define your alternative fonts, in .streamlit/config.toml, paste each @font-face declaration, and change each one into a [[theme.fontFaces]] table.

    The following values in each @font-face declaration become the indicated value in a [[theme.fontFaces]] table:

    • font-family → family
    • src: url → url (Ignore format, and just keep the URL.)
    • font-style → style
    • font-weight → weight
    • Optional: unicode-range → unicodeRange (This is only useful if you are using more than basic latin sets.)

    Remember to remove the comment lines and CSS syntax characters, which aren't compatible with TOML files. Your configuration file should contain the following text:

    [[theme.fontFaces]] family="Nunito" url="https://fonts.gstatic.com/s/nunito/v31/XRXX3I6Li01BKofIMNaDRs7nczIH.woff2" style="italic" weight="200 1000" [[theme.fontFaces]] family="Nunito" url="https://fonts.gstatic.com/s/nunito/v31/XRXV3I6Li01BKofINeaBTMnFcQ.woff2" style="normal" weight="200 1000" [[theme.fontFaces]] family="Space Mono" url="https://fonts.gstatic.com/s/spacemono/v17/i7dNIFZifjKcF5UAWdDRYERMR3K_MQacbw.woff2" style="italic" weight="400" [[theme.fontFaces]] family="Space Mono" url="https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2" style="normal" weight="400" [[theme.fontFaces]] family="Space Mono" url="https://fonts.gstatic.com/s/spacemono/v17/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSRRXaPYw.woff2" style="italic" weight="700" [[theme.fontFaces]] family="Space Mono" url="https://fonts.gstatic.com/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2" style="normal" weight="700"

    The [[theme.fontFaces]] table can be repeated to use multiple files to define a single font or to define multiple fonts. In this example, the definitions make "Nunito" and "Space Mono" available to other font configuration options.

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

    [theme] font="Nunito, sans-serif" codeFont="'Space Mono', 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. Because there is a space in "Space Mono", the configuration option needs an inner quote on that family. If you want to avoid inner quotes, you can use hyphens or underscores in your font family declarations.

Build the example

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

Initialize your app

  1. In your_repository, create a file named streamlit_app.py.

  2. 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.

  3. In streamlit_app.py, write the following:

    import streamlit as st

  4. Save your streamlit_app.py file, and view your running app.

  5. 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.

  6. Return to your code.

Display some text in your app

  1. Create a streamlit_app.py file in your working directory.

  2. 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."

  3. Save your streamlit_app.py file, and view your running app.

Previous: Configuration and themingNext: Use static font files
forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.