How to link to ttf from css file using fontface

1

I’m trying to figure out how to link to a fontfile within css and it’s confusing me.
folder structure is /website/assets/fonts/fontfile.tff for fonts.
css directory is /website/assets/css/changefont.css

What I don’t understand is how you link to the file within css. I understand that you add the css file to the template using ```

<?= css('assets/css/changefont.css') ?> in the header

What I’m not quite sure of is how to link to the file within the css. CSS-Tricks website uses this for an example.

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

What url do I use here and is it a direct link that I have to use within css or is there a kirby way to do so instead?

2

I usually go and drop my font files, if used locally, into /assets/fonts and then you can link to the file like below:

@font-face {
  font-family: 'MyWebFont';
  src: url('../fonts/myfont.woff2') format('woff2'),
       url('../fonts/myfont.woff') format('woff'),
       url('../fonts/myfont.ttf') format('truetype');
}