Downloaded font not showing up

Hello guys,

Sorry if this has already been answered but I haven’t found anything in the forum that solves my problem.
I have downloaded two fonts that I want to use on my website, but they are not being used by the browser. I have implemented them in the fonts.css file and the file is linked in the head and the font files are in the assets/fonts folder in their respective folder. I have already double checked everything and cannot seem to find the cause.


@font-face {
    font-family: "Work Sans";
    src: url('assets/fonts/Work Sans') format('woff2');

@font-face {
    font-family: "Infini";
    src: url('assets/fonts/Infini') format('woff');


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $site->title() ?></title>
    <?= css('assets/css/fonts.css') ?>
    <?= css('assets/css/index.css') ?>



h1 {
    font-size: 4rem;
    font-family: 'Work Sans', Futura, 'sans-serif';
    font-weight: bold;
    text-transform: uppercase;

body {
    font-family: Infini;   
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    min-height: 100vh;
    max-width: 100vw;

This is my folder structure:

I’d appreciate the help, thanks!

I think it’s a problem with your path, try with

    src: url('../fonts/Infini') format('woff');

Doesn’t work unfortunately…

Oh, and apart from that you are only linking to a folder, instead of to the font files. But this is not Kirby related, please look up how to do this properly, for example on MDN.

The problem is that you’re not linking the actual font files.
Your src should be something like url('assets/fonts/Infini.woff') and url('assets/fonts/Work Sans.woff2')

Keep in mind I have no idea if Work Sans.woff2 and Infini.woff are the actual file names (I suspect not) so make sure you use the correct ones

Thank you both @texnixe and @manuelmoreale. That was the problem that I was only linking to the folder, I linked to the individual files now and it works.
But this way I have to link to link to each font (Bold, Italic etc.) and have to specify the font-family:“Work Sans Bold” instead of only assigning the typeface and then the weight or style via font-weight/style for example. There’s gotta be a more practical way of doing that but so far I’ve only found examples for linking to a single file.

That is not correct. You can simply do this and i’m gonna use random file names as an example here.
You can link multiple files and specify different font-weight and font-style and group them together by simply using the same font-family name

@font-face {
    font-family: "Infini";
    src: url('assets/fonts/Infini-regular.woff') format('woff');
    font-weight: 400;
@font-face {
    font-family: "Infini";
    src: url('assets/fonts/Infini-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
@font-face {
    font-family: "Infini";
    src: url('assets/fonts/Infini-bold.woff') format('woff');
    font-weight: 700;

That makes much more sense, thanks!