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

src/login/KcApp.ts

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

Svelte

src/login/KcPage.svelte

<script lang="ts">
  import "./main.css";
  import Template from '@keycloakify/svelte/login/Template.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

src/login/KcApp.ts

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

Svelte

src/login/KcPage.svelte

<script lang="ts">
  import "./main.css";
  import Template from '@keycloakify/svelte/login/Template.svelte';
  ...

That's it!

Geist successfully applied