Keycloak登录页面主题定制：如何正确引用自定义字体？

1. 确认字体文件存放路径 #

将你的TTF字体文件放在自定义主题的resources/fonts目录下，目录结构需如下：

themes/
└── your-custom-theme/
    └── login/
        ├── resources/
        │   └── fonts/
        │       ├── strokeWeight-080rotateR06.ttf
        │       └── strokeWeight-080.ttf
        └── login.ftl

2. 修正CSS中的路径与语法 #

Keycloak模板提供${url.resourcesPath}变量，可精准指向当前主题的resources目录；同时!important不应加在font-family声明上，需应用在实际使用字体的元素样式中：

@font-face {
    font-family: "Stroke-Weight-Two";
    src: url("${url.resourcesPath}/fonts/strokeWeight-080rotateR06.ttf") format("truetype");
    font-display: swap; /* 可选，优化字体加载时的页面显示体验 */
}
@font-face {
    font-family: "Stroke-Weight-One";
    src: url("${url.resourcesPath}/fonts/strokeWeight-080.ttf") format("truetype");
    font-display: swap;
}

/* 为页面元素应用自定义字体 */
body {
    font-family: "Stroke-Weight-One", sans-serif !important;
}
.login-pf-header h1 {
    font-family: "Stroke-Weight-Two", sans-serif !important;
}

3. 验证主题配置 #

1. 登录Keycloak管理控制台，进入目标领域
2. 切换至「Realm Settings」→「Themes」标签页
3. 将「Login Theme」设置为你的自定义主题名称（如your-custom-theme）

4. 常见问题排查 #

• 文件名大小写：Linux环境下Keycloak服务器区分文件名大小写，需确保CSS路径与实际文件名完全匹配
• 文件权限：确认Keycloak进程拥有字体文件的读取权限
• 缓存问题：修改后强制刷新浏览器页面（Ctrl+F5），避免浏览器缓存旧样式资源

内容的提问来源于stack exchange，提问作者Hammad Hassan