Question 292130 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel Vapor + Docker, DomPDF not rendering custom fonts, works locally, not on staging

I am having some trouble getting custom fonts working with DomPDF and Laravel Vapor. (Localy the fonts work)

These are my CSS font definitions (fonts are stored inside public/fonts)

@font-face {
            font-family: caveat;
            font-style: normal;
            font-weight: normal;
            src: url('{{ public_path('fonts/caveat.ttf') }}') format('truetype');
        }

        @font-face {
            font-family: Arial;
            font-style: normal;
            font-weight: normal;
            src: url('{{ public_path('fonts/Arial.ttf') }}') format('truetype');
        }

This is my dockerfile

FROM laravelphp/vapor:php81

RUN apk add imagemagick imagemagick-dev php81-pecl-imagick 
&& pecl install imagick 
&& docker-php-ext-enable imagick

COPY . /var/task

Locally these fonts Arial and CaveAt get rendering fine in the PDF. However after deployment to staging, the font in the PDF falls back to Helvetica

I probably need to add some commands to the dockerfile in order to get it working. My question is: What commands?

Tags:

2

Answers


  1. 0

    The thing about vapor is all asset files in public directory will be moved to s3 bucket that vapor created to use it with cloudfront as CDN. Therefor you cannot find your public files in within your domain unless you define the files in public files in your vapor config file.

    So you have two options to fix this issue:

    1. Use the cloudfront (recommended).
    2. Move file into public and change the asset url.

    I highly discourage using the second option since it will cause inconsistence performance issue because of lambda function cold start which make site slower and therefor costs more money.

    Also Cloudfront is a CDN so its nice to have it for asset files.

    For fixing it with cloudfront just remove public_path within the url and check the file actually exists in your bucket.

    More info:
    https://docs.vapor.build/projects/deployments.html#urls-within-css

    Login or Signup to reply.
  2. 0

    You can try and adjust your Dockerfile to make sure the custom fonts are accessible to DomPDF in the Laravel Vapor environment.
    Make sure the public/fonts directory is correctly copied to the Docker image. That can be done with the COPY command in your Dockerfile;
    Some dependencies might be required to render the fonts correctly. Install font libraries like fontconfig and fonts-dejavu.
    Sometimes, Laravel’s cache can cause issues. Clear the cache after deployment (however, in a fresh Docker build, especially when the entire application is being copied over, this cache might already be clear, making this step unnecessary).

    FROM laravelphp/vapor:php81

# Install necessary packages
RUN apk add --no-cache imagemagick imagemagick-dev php81-pecl-imagick 
&& pecl install imagick 
&& docker-php-ext-enable imagick 
&& apk add --no-cache fontconfig fonts-dejavu

# Copy the entire application to /var/task
COPY . /var/task

# Assuming that the fonts are located in public/fonts in your project directory
# That will copy the fonts into the Docker image at the corresponding location
COPY public/fonts /var/task/public/fonts

# Clear Laravel cache (if necessary)
# RUN php artisan optimize:clear

    That updated Dockerfile makes sure the public/fonts directory from your Laravel project is copied into the Docker image at the corresponding location (/var/task/public/fonts). That should make the custom fonts available to DomPDF when running in the Docker environment.

    I think the problem lies with the fact DomPDF cannot generate the font cache inside the docker container.
    The issue lies in the docker container, and I am unsure how to configure custom fonts for DomPDF inside the docker file

    If the problem is related to DomPDF’s inability to generate the font cache inside the Docker container, this issue might be due to permissions or the specific way DomPDF handles font caching.

    Make sure DomPDF has the necessary permissions to write to the directory where it stores its font cache. That can be typically in the storage directory in a Laravel application.

    You could pre-generate the font cache on your local system and then copy it into the Docker container, ensuring DomPDF does not need to generate it on the fly in the Docker environment.

    FROM laravelphp/vapor:php81

# Install necessary packages
RUN apk add --no-cache imagemagick imagemagick-dev php81-pecl-imagick 
&& pecl install imagick 
&& docker-php-ext-enable imagick 
&& apk add --no-cache fontconfig fonts-dejavu

# Copy the entire application to /var/task
COPY . /var/task

# Copy custom fonts and pre-generated font cache
COPY public/fonts /var/task/public/fonts
# Assuming you have pre-generated font cache in your local setup
# Replace 'path_to_local_font_cache' with the actual path
COPY path_to_local_font_cache /var/task/storage/fonts

# Set the necessary permissions
RUN chmod -R 775 /var/task/storage

# Clear Laravel cache (if necessary)
# RUN php artisan optimize:clear

    Do replace path_to_local_font_cache with the actual path to your pre-generated font cache on your local system.

    That configuration makes sure DomPDF has access to the custom fonts and their cache, potentially resolving the issue with font rendering in the Docker container.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search