Custom Fonts

Using a web font service

Let's see how to use, for example, Playwrite Netherland via Google Fonts. Create the following CSS file:

src/login/main.css

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Playwrite+NL:[email protected]&family=Playwrite+PL:[email protected]&display=swap');

.kcHeaderWrapperClass {
    /* NOTE: We would use `body {` if we'd like the font to be applied to everything. */
    font-family: "Playwrite NL", cursive;
}

Then import it as a global stylesheet:

React

src/login/KcApp.tsx

import "./main.css";
// ...

Angular

Svelte

That's it!

Playwrite NL successfully applied to the header

Using self hosted fonts

Keycloak is often used in enterprise internal network with strict network traffic control. In this context, using a Font CDN isn't an option, you want the font to be bundled in your JAR and served directly by the Keycloak server.

Let's see how we would use a self hosted copy Vercel's Geist font.

First let's download and extract the font files in src/login/assets/fonts/geist/:

Now let's set Geist as the default font.

Create the following CSS file:

src/login/main.css

@import url(./assets/fonts/geist/main.css);

body {
  font-family: Geist;
}

Then import it as a global stylesheet:

React

src/login/KcPage.tsx

import "./main.css";
// ...

Angular

Svelte

That's it!

Geist successfully applied