Referencing Fonts in Custom Themes

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
        │   └──
        ├── common/
        │   └── resources/
        │       ├── css/
        │       │   └── my-style.css
        │       └── fonts/
        │           ├── font-name.woff
        │           ├── font-name.woff2
        │           └── font-name.ttf
        └── login



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.

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

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

The stylesheet is working fine.

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