How do I set font and font_url in FastListTemplate?

monodera · November 14, 2025, 9:19pm

I want to change fonts in FastListTemplate. In the documentation, there are font and font_url parameters, but neither of them seem to work. Also, no working example is available in the documentation.

Here is a code example with the default setting:

import panel as pn

template = pn.template.FastListTemplate(
    title="Fast List Template Example",
    main=[pn.pane.Markdown("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")],
)


template.servable()

The font-family is set as aktiv-grotesk, "Segoe UI", Arial, Helvetica, sans-serif.

Then, I tried the following to set a different font, but this does not change anything.

import panel as pn

template = pn.template.FastListTemplate(
    title="Fast List Template Example",
    main=[pn.pane.Markdown("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")],
    font="Merriweather",
    font_url="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap",
)

It eventually works when set the font with raw_css with !important option.

import panel as pn

template = pn.template.FastListTemplate(
    title="Fast List Template Example",
    main=[pn.pane.Markdown("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")],
    raw_css=[
        """
        @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

        :root {
            --body-font: 'Merriweather', serif !important;
        }
        """
    ],
)

template.servable()

I’d expect that one can set fonts only with font and font_url setting, so I’d like to know how to use these parameters properly.

I’m using Panel 1.8.2 with Python 3.12.12 on macOS 26.1.

philippjfr · November 18, 2025, 3:57pm

So unfortunately there aren’t any ways to do this that I’d consider “better”. This is part of the reason we’re moving away from the existing templates and are slowly moving to adopt panel-material-ui as the default component framework.

The equivalent using panel-material-ui would be the Page component:

import panel as pn
import panel_material_ui as pmui

pn.extension()

pmui.Page(
    main=[pn.pane.Markdown("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")],
    title="Panel Material UI Page Example",
    theme_config={
        "typography": {
            "fontFamily": "'Merriweather', serif;"
        }
    },
    css_files=["https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap"]
).servable()

Thanks to hierarchical them_config inheritance configuring things at the top-level will ensure all components underneath it will inherit the same configuration.