Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Styling

/

Custom-stylesheets

Reflex allows you to add custom stylesheets. Simply pass the URLs of the stylesheets to rx.App:

app = rx.App(
    stylesheets=[
        "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
    ],
)

You can also add local stylesheets. Just put the stylesheet under assets/ and pass the path to the stylesheet to rx.App:

app = rx.App(
    stylesheets=[
        "styles.css",  # This path is relative to assets/
    ],
)

You can take advantage of Reflex's support for custom stylesheets to add custom fonts to your app.

Then you can use the font in your app by setting the font_family prop.

In this example, we will use the IBM Plex Mono font from Google Fonts.

Check out my font

rx.text(
    "Check out my font",
    font_family="IBM Plex Mono",
    font_size="1.5em",
)

By making use of the two previous points, we can also make a stylesheet that allow you to use a font hosted on your server.

If your font is called MyFont.otf, copy it in assets/fonts.

Now we have the font ready, let's create the stylesheet myfont.css.

@font-face {
    font-family: MyFont;
    src: url("MyFont.otf") format("opentype");
}

@font-face {
    font-family: MyFont;
    font-weight: bold;
    src: url("MyFont.otf") format("opentype");
}

Add the reference to your new Stylesheet in your App.

app = rx.App(
    stylesheets=[
        "fonts/myfont.css",  # This path is relative to assets/
    ],
)

And that's it! You can now use MyFont like any other FontFamily to style your components.

← ResponsiveTheming →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting