Referencing Fonts in Custom Themes

Getting advice
1

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 an 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.

2

Is the “my.style.css” should be “my-style.css” ?

3

Thanks for the feedback. That was actually just a typo in my post. I just fixed it.

The stylesheet is working fine.

4

I moved the question to StackOverflow. In case you have an answer, please post it there.