Downloaded font not showing up

Kirby 3 Solved ✅
1

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.

assets/fonts.css:

@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');
  }

header.php:

<head>
    <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') ?>

</head>

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:

Bildschirmfoto 2023-06-09 um 19.02.56
Bildschirmfoto 2023-06-09 um 19.02.56488×678 38 KB

I’d appreciate the help, thanks!

2

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

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

Doesn’t work unfortunately…

4

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.

5

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

6

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.

7

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;
  }
8

That makes much more sense, thanks!