symfonyfontsdropify

Symfony 7.3 Asset-Mapper not serving fonts for Dropify


I have imported Dropzone + Dropify into my importmap, and they're present in my importmap.php:

    'dropify' => [
        'version' => '0.2.2',
    ],
    'dropzone' => [
        'version' => '6.0.0-beta.2',
    ],
    'dropify/dist/css/dropify.min.css' => [
        'version' => '0.2.2',
        'type' => 'css',
    ],
    'dropzone/dist/dropzone.css' => [
        'version' => '6.0.0-beta.2',
        'type' => 'css',
    ],

And I've added it to my assets/app.js:

// assets/app.js
import './entrypoints/dropzone.js';
// assets/entrypoints/dropzone.js
import '../vendor/dropzone/dist/dropzone.css';
import '../vendor/dropify/dist/css/dropify.min.css';

import './provide_dropzone.js';
import 'dropify';
import '../js/pages/form-fileuploads.init.js';
// provide_dropzone.js
import Dropzone from 'dropzone';
window.Dropzone = Dropzone;
// assets/js/pages/form-fileuploads.init.js

if ($('[data-plugins="dropify"]').length > 0) {
    // Dropify
    $('[data-plugins="dropify"]').dropify({
        messages: {
            'default': 'Drag and drop a file here or click',
            'replace': 'Drag and drop or click to replace',
            'remove': 'Remove',
            'error': 'Ooops, something wrong appended.'
        },
        error: {
            'fileSize': 'The file size is too big (1M max).'
        }
    });
}

The fonts Dropify uses are present at both assets/fonts/ and assets/vendor/dropify/dist/fonts/, which is where importmap:require installed them.

However, when I use Dropify, the icon is broken:

<input id="attachment" type="file" data-plugins="dropify" data-height="300">

Screenshot of broken upload font

I get a bunch of Javascript console errors like this:

downloadable font: download failed (font-family: "dropify" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: https://localhost/assets/vendor/dropify/dist/fonts/dropify-o8O5LG9.woff
downloadable font: download failed (font-family: "dropify" style:normal weight:400 stretch:100 src index:2): status=2147746065 source: https://localhost/assets/vendor/dropify/dist/fonts/dropify-C4fbjNS.ttf 

Despite this being the exact directory these fonts are located, and Asset Mapper seems to be versioning them...

I can see the CSS I retrieved from NPM is referencing fonts here:

@font-face{font-family:dropify;src:url(../fonts/dropify.eot);src:url(../fonts/dropify.eot#iefix) format("embedded-opentype"),url(../fonts/dropify.woff) format("woff"),url(../fonts/dropify.ttf) format("truetype"),url(../fonts/dropify.svg#dropify) format("svg");font-weight:400;font-style:normal}

This is accurate relative to the CSS file. But it doesn't appear to be working.

I've also had the same issue getting fonts to work with SCSS files and the SassBundle. I'm not sure what the best way to deal with fonts in Asset Mapper is and there doesn't seem to be any documentation on it.

As some final setup info, I've got this project building in Docker Compose with Caddy, MariaDB, and the Alpine PHP image. My Caddyfile looks like this:

localhost

root * /var/www/projectroot/public
encode zstd gzip
log

file_server

php_fastcgi php:9000 {
        index index.php
}

@phpFile {
        path *.php*
}

error @phpFile "Not found" 404

My Dockerfile for php:alpine looks like this:

FROM php:fpm-alpine

ADD --chmod=0755 https://github.com/mlocati/docker-php-extension-installer/releases/latest/download/install-php-extensions /usr/local/bin/
RUN install-php-extensions gd ctype iconv pcre session xml tokenizer dom intl pdo_mysql mysqli

RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" \
&& php -r "if (hash_file('sha384', 'composer-setup.php') === 'dac665fdc30fdd8ec78b38b9800061b4150413ff2e3b6f88543c636f7cd84f6db9189d43a81e5503cda447da73c7e5b6') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" \
&& php composer-setup.php \
&& php -r "unlink('composer-setup.php');" \
&& mv composer.phar /usr/local/bin/composer

Solution

  • The proposed setup in my question works perfectly. I realized I hadn't restarted the Caddy container for a while. When I checked the Caddyfile, it actually contained some lines from a previous attempt at getting fonts working:

    @fonts { 
    path .woff *.woff2 *.ttf *.eot *.svg path_regexp \.(woff|woff2|ttf|eot|svg)$ 
    }
    
    handle @fonts { 
    header Cache-Control "public, max-age=31536000" 
    header Access-Control-Allow-Origin "" 
    file_server 
    } 
    

    Removing this and restarting the Caddy container with the Caddyfile I provided in the question worked.