在 Keycloak 的自定义主题中引用字体

Question

我有一个派生自基本主题的自定义主题，并尝试在我的样式表中引用自定义字体。出于某种原因，我无法让它工作。我还没有找到任何涉及字体的文档或示例，所以我做了一些试验和错误。

文件结构：

└── 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

文件theme.properties:

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

文件我-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;
}
[...]

我必须在 my-style.css 中定义的路径是什么？我尝试了各种变体，甚至将字体直接复制到 css 目录中。都没有成功。

Answer 1

解决方案实际上是在样式表中将 font-url 替换为 url，因为 font-url 无效 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;
}
/*...*/

在 Keycloak 的自定义主题中引用字体

Referencing Fonts in Custom Themes for Keycloak

html

css

fonts

themes

keycloak