Referencing Fonts in Custom Themes for Keycloak

user_14374538 0
Viewed 1269

I have a custom theme derived from the base theme and try to reference custom fonts in my stylesheets. For some reason, I cannot make it work. I haven’t found any documentation or example that involves fonts, so I did some trial and error.

File structure:

└── theme/
    └── my-theme/
        ├── login/
        │   ├── *.ftl
        │   ├── messages/
        │   │   └── *.properties
        │   └── theme.properties
        ├── common/
        │   └── resources/
        │       ├── css/
        │       │   └── my-style.css
        │       └── fonts/
        │           ├── font-name.woff
        │           ├── font-name.woff2
        │           └── font-name.ttf
        └── login

File theme.properties:

parent=base
import=common/my-theme
styles=css/my-style.css

File my-style.css:

[...]
@font-face {
    font-family: "font-name";
    font-style: normal;
    font-weight: 400;
    src: font-url("../fonts/font-name.woff2") format("woff2"),
    font-url("../fonts/font-name.woff") format("woff"),
    font-url("../fonts/font-name.ttf") format("truetype");
}
body {
    font-family: font-name !important;
}
[...]

What is the path I have to define in my-style.css? I tried all kind of variations and even copied the fonts directly into the css directory. All without any success.

keycloak fonts themes css html
1 Answers

The solution was actually to replace font-url by url in the stylesheet as font-url is no valid CSS:

/*...*/
@font-face {
    font-family: "font-name";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/font-name.woff2") format("woff2"),
    url("../fonts/font-name.woff") format("woff"),
    url("../fonts/font-name.ttf") format("truetype");
}
body {
    font-family: font-name !important;
}
/*...*/
user_143745380
Related