Shopware 6自定义PDF文档第三方CDN字体无法渲染求助

问题描述 #

我们按照Shopware官方文档为Shopware 6项目创建了自定义PDF文档，功能正常但存在样式问题：使用的两款自定义字体中，Google Font的IBM Plex Sans可正常加载，而CDNFont的Gilligans Island完全无法在PDF中渲染。

当前字体加载代码（Twig模板中）：

{% block document_font_links %}
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap" rel="stylesheet">
   <link href="https://fonts.cdnfonts.com/css/gilligans-island" rel="stylesheet">
{% endblock %}

style_custom_portrait.css.twig中的CSS设置：

font-family: 'IBM Plex Sans', Arial, sans-serif;
font-family: 'Gilligans Island', Arial, sans-serif;

仅IBM Plex Sans字体生效。我们已尝试两种方案：将字体直接存储在插件中本地加载、使用Base64内联加载字体：

@font-face { 
  font-family: gilligans island; 
  font-weight: 400; 
  src: local('Gilligans Island'), url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAFkIAA8AAAAAjIQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAABYVAAAAD0AAABOhBhy82NtYXAAAFEQAAAB2QAAAzK0ij+MY3Z0IAAAAugAAAA6AAAAOl...}

但均未解决问题。请问加载非Google Fonts的CDN字体需要特殊处理吗？求可行解决方案。

可行解决方案 #

1. 修正@font-face语法错误 #

你提供的Base64内联代码存在两处关键错误：

• 含空格的字体名称必须用引号包裹：font-family: 'Gilligans Island';
• Base64编码的URL结尾缺少闭合括号与大括号，导致CSS解析失败

修正后的@font-face示例：

@font-face {
  font-family: 'Gilligans Island';
  font-weight: 400;
  font-style: normal;
  src: local('Gilligans Island'),
       url(data:application/font-woff;charset=utf-8;base64,替换为完整的Base64编码) format('woff');
}

2. 确保字体格式兼容wkhtmltopdf #

Shopware 6的PDF生成依赖wkhtmltopdf，它对字体格式支持有限，优先使用WOFF 1.0或**TrueType(.ttf)**格式，避免使用WOFF 2.0。若当前Base64是WOFF 2.0，需转换为兼容格式后重新编码。

3. 本地字体的正确加载方式 #

若选择本地存储字体，需将字体文件放在插件的public/fonts目录下，再用相对路径引用：

@font-face {
  font-family: 'Gilligans Island';
  font-weight: 400;
  src: url('../fonts/gilligans-island.woff') format('woff');
}

同时执行以下命令确保Shopware发布插件静态资源：

bin/console plugin:refresh
bin/console plugin:install --activate YourPluginName
bin/console assets:install

4. CDN字体的跨域配置（可选） #

若坚持使用CDNFont链接，需修改wkhtmltopdf配置允许跨域资源加载，在config/packages/shopware.yaml中添加：

shopware:
    pdf:
        enabled: true
        binary_path: '/usr/local/bin/wkhtmltopdf' # 替换为你的wkhtmltopdf实际路径
        options:
            - '--enable-javascript'
            - '--enable-local-file-access'
            - '--allow'
            - 'fonts.cdnfonts.com'

注意：该方式依赖CDN稳定性，且部分CDN的防盗链机制可能导致字体无法被抓取。

5. 验证字体加载效果 #

在PDF模板中添加强制使用目标字体的测试文本：

<p style="font-family: 'Gilligans Island', sans-serif;">测试Gilligans Island字体渲染</p>

若仍不生效，可启用wkhtmltopdf调试模式，查看字体加载错误日志排查问题。

内容的提问来源于stack exchange，提问作者Ria Spirjak