# Custom Fonts
## Using a web font service
Let's see how to use, for example, [Playwrite Netherland](https://fonts.google.com/specimen/Playwrite+NL) via Google Fonts.\
\
Create the following CSS file:
{% code title="src/login/main.css" %}
```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:wght@100..400&family=Playwrite+PL:wght@100..400&display=swap');
.kcHeaderWrapperClass {
/* NOTE: We would use `body {` if we'd like the font to be applied to everything. */
font-family: "Playwrite NL", cursive;
}
```
{% endcode %}
Then import it as a global stylesheet:
{% tabs %}
{% tab title="React" %}
import "./main.css";
// ...
{% endtab %}
{% tab title="Angular" %}
import "./main.css";
// ...
{% endtab %}
{% tab title="Svelte" %}
<script lang="ts">
import "./main.css";
import Template from '@keycloakify/svelte/login/Template.svelte';
...
{% endtab %}
{% endtabs %}
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](https://vercel.com/font) font.
First let's download and extract [the font files](https://github.com/keycloakify/keycloakify/releases/download/v0.0.1/geist.zip) in `src/login/assets/fonts/geist/`:
Now let's set Geist as the default font.
Create the following CSS file:
{% code title="src/login/main.css" %}
```css
@import url(./assets/fonts/geist/main.css);
body {
font-family: Geist;
}
```
{% endcode %}
Then import it as a global stylesheet:
{% tabs %}
{% tab title="React" %}
import "./main.css";
// ...
{% endtab %}
{% tab title="Angular" %}
import "./main.css";
// ...
{% endtab %}
{% tab title="Svelte" %}
<script lang="ts">
import "./main.css";
import Template from '@keycloakify/svelte/login/Template.svelte';
...
.png?alt=media)
.png?alt=media)
.png?alt=media)