shopware 6 文档（pdf）中的自定义字体未呈现

Question

我们根据此文档为我们的 shopware 6 项目创建了一个自定义文档（生成的 pdf）：

https://developer.shopware.com/docs/guides/plugins/plugins/checkout/document/add-custom-document.html#add-custom-document

这工作得很好，但我们有一个样式问题。

我们使用两种自定义字体，一种来自 Google Font，另一种来自 CDNFont。

Google 字体加载得非常好，但来自 CDN 字体的字体根本没有在 pdf 中呈现。

我们像这样加载字体：

{% 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 %}

在CSS文件中：

style_custom_portrait.css.twig

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

只有 IBM Plex Sans 可以工作。

我们已经尝试过

• 将字体直接存储在插件中并从那里加载
• 加载字体内联base 64：

@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...}

但是这些都没有带来任何解决方案。

从其他 CDN 加载字体而不是 Google Fonts 时，我们需要做哪些不同的事情吗？或者您有什么办法可以解决我们的问题吗？

非常感谢您的帮助！

Answer 1

文档进展经过以下状态：

1. 树枝模板
2. 生成的 HTML 代码
3. PDF文件

树枝

首先，您需要检查 Twig 模板的有效性，在您的情况下它似乎是有效的。否则，请检查日志中是否有错误。

HTML

您可以检查相应 Renderer 类内的 HTML，即

InvoiceRenderer

。 $html函数执行后，使用

XDebug

等调试工具检查

$this->documentTemplateRenderer->render

的值，或者直接将

echo $html;die();

复制并粘贴到函数后面，然后使用您的管理订单文档视图中的预览功能本地开发系统。

我已经用你的代码对此进行了测试。如果您在浏览器中显示此 HTML，则会显示字体“Gilligans Island”。

这让我们看到了文档的最终状态，

PDF

字体突然不渲染的地方。这是因为 Shopware 6 中的 PDF 生成是基于 dompdf 的。 dompdf 有时会遇到字体和外部资源的问题，因此建议使用本地 TTF、truetype 字体。 TTF 不会通过您的第二个链接交付，仅通过

woff

交付。

总结一下：

您需要提供与 dompdf 兼容的格式的字体，最好是 ttf:

<style>
    @font-face {
        font-family: 'Gilligans Island';
        font-style: normal;
        font-weight: 400;
        /* replace the url with the url to the ttf file */
        src: local('Gilligans Island'), url('https://yourshop.com/bundles/yourtheme/assets/font/gilligan.ttf') format('truetype');
    }
</style>

和CSS

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

Answer 2

将 Google 字体嵌入 Shopware 6 文档的另一种简单方法是使用 PDF 文档编辑器。只需从选择框中选择所需的字体并将其添加到“字体系列”配置字段即可：