Self-Hosted Fonts

I would like to create a theme that allows the user to install and use their own fonts. How can I manage the fonts? The fonts should be saved under ../asstes/fonts and preferably automatically specified as font-family in the corresponding CSS.

How do I specify the storage location for the upload?
How can I specify the font-family?

I am familiar with the @font-face practice but do not know how to automate the process.

Uploads are stored inside /content which is not publicly accessible, however, here are two options I might explore:

Option A)
Get the font files mediaURL() ($asset->mediaUrl() | Kirby CMS) and echo() a <style> into the <head>

Option B)
Or: Hook into the file upload and move the file to /assets/fonts

Option B would make it hard, if you want users to be able to delete fonts. Option A might look a little like this (untested):

$font = $site->userFont()->files()->first();
if ($font) {
    echo '<style>@font-face {
        font-family: "CustomFont";
        src: url("' . $font->mediaUrl() . '");
    }</style>';
}

You’ll also need to add the userFont-field to the site-blueprint as a Files | Kirby CMS field and you might need to enable uploading the correct file types.

I’ve personally never done anything like this, but I think this might just work.

An alternative could be a custom Panel area with custom upload logic to the assets folder.

Combined with a listing of the installed fonts and options to delete them again.

Okay, I created a plugin in order to define a new file type for the upload. The plugin is stored in site/plugins/kirby-fonts/index.php and contains only a PHP file. Do you think it is correct like this, @texnixe? Do I need the PHP closing tag at the end?

<?php 

Kirby::plugin('kirby/fonts', [
  'fileTypes' => [
    'eot' => [
      'mime' => 'font/eot',
      'type' => 'font',
    ],
    'otf' => [
        'mime' => 'font/otf',
        'type' => 'font',
      ],    
      'woff' => [
        'mime' => 'font/woff',
        'type' => 'font',
      ],
      'woff2' => [
        'mime' => 'font/woff2',
        'type' => 'font',
      ]
  ]
]); 

?>

Yes, it would be great if the font files would be stored in assets/fonts and if the fonts determined in the respective css file in assets/css would be changed. But how can I achieve this?