# Custom Fonts

> Load web fonts with graceful fallbacks using EmailFont.

**Site index:** [https://email.2plot.dev/llms.txt](https://email.2plot.dev/llms.txt) — every page on this site, as Markdown.  
**Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites.  
**Sibling sites:** 13 more in The 2plot network — listed in the site index above.  
**Sitemap:** https://email.2plot.dev/sitemap.xml  


---



### Web fonts in email

`EmailFont` lives inside `EmailHead` and declares a web font plus a fallback
family. Support varies — Apple Mail and iOS load web fonts, Gmail and Outlook
fall back — so always pick a similar-looking system fallback.


Source code:


```python
# File: docs/fonts/fonts.py

import dash_email as de

component = de.Email([
    de.EmailHead(
        children=[
            de.EmailFont(
                fontFamily="Roboto",
                fallbackFontFamily="Verdana",
                webFont={
                    "url": "https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2",
                    "format": "woff2",
                },
                fontWeight=400,
                fontStyle="normal",
            ),
        ],
    ),
    de.EmailBody(
        style={"backgroundColor": "#f6f9fc", "padding": "32px 0"},
        children=[
            de.EmailContainer([
                de.EmailSection(
                    style={
                        "backgroundColor": "#ffffff",
                        "borderRadius": "8px",
                        "padding": "32px",
                    },
                    children=[
                        de.EmailHeading(
                            "Custom web fonts",
                            as_="h3",
                            style={"fontFamily": "Roboto, Verdana, sans-serif"},
                        ),
                        de.EmailText(
                            "EmailFont registers a web font with a fallback "
                            "family. Clients that support web fonts (Apple "
                            "Mail, iOS) load it; everyone else falls back "
                            "gracefully.",
                            style={"fontFamily": "Roboto, Verdana, sans-serif"},
                        ),
                    ],
                )
            ])
        ],
    ),
])
```


---

### EmailFont


**EmailFont**

| Name | Type | Description |
| --- | --- | --- |
| id | string; optional | The ID used to identify this component in Dash callbacks. |
| fallbackFontFamily | string \| list of strings; default 'Helvetica' | Fallback font family if the web font fails to load. |
| fontFamily | string; required | The font family name. |
| fontStyle | string; default 'normal' | Font style (normal, italic). |
| fontWeight | number \| string; default 400 | Font weight (400, 700, bold, etc.). |
| webFont | dict; optional | Web font configuration object with url and format properties. |


---

*Source: /components/fonts*