2 3 Adding Custom Fonts Explained

Key Concepts

• Custom Fonts: Fonts that are not part of the default system fonts.
• Font Embedding: Including fonts in your web application.
• Font Families: Groups of fonts that share common characteristics.
• Font Sources: Where to find and download custom fonts.

Explanation

1. Custom Fonts

Custom fonts are fonts that are not part of the default system fonts available on a user's device. These fonts can be used to enhance the visual appeal and uniqueness of your Streamlit application.

2. Font Embedding

Font embedding involves including custom fonts in your web application. This can be done using CSS by linking to external font files or by using web font services like Google Fonts.

3. Font Families

Font families are groups of fonts that share common characteristics, such as serif, sans-serif, or monospace. By specifying a font family, you can ensure that your text will be displayed in a consistent style across different devices.

4. Font Sources

Font sources are where you can find and download custom fonts. Popular sources include Google Fonts, Adobe Fonts, and various font foundries.

Examples

Example 1: Using Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>
    

Example 2: Embedding Custom Font Files

<style>
    @font-face {
        font-family: 'CustomFont';
        src: url('fonts/CustomFont.woff2') format('woff2'),
             url('fonts/CustomFont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    body {
        font-family: 'CustomFont', sans-serif;
    }
</style>
    

Analogies

Think of custom fonts as unique paint colors for your walls. Just as you might choose a specific color to match your decor, you can choose a custom font to match the style of your Streamlit application. Font embedding is like applying the paint to your walls, ensuring that the color is consistent throughout. Font families are like different paint finishes, such as matte or glossy, that give your text a specific look and feel.

By mastering the addition of custom fonts in Streamlit, you can create visually appealing and personalized web applications that stand out from the crowd.