Support for @font-face unicode-range

[NateWr]

I'd like to use Google's Noto fonts to improve language compatibility in my PDF exports. This would be part of software that would get run on lots of different servers over which I can't control what fonts are installed or not.

Here's how I've attempted to declare my fonts with @font-face, using the unicode-range to subset the font:

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: normal;
    src: local('Noto Sans'), local('NotoSans'), url(http://full/path/to/fonts/NotoSans-Regular.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: normal;
    src: local('Noto Sans Arabic'), local('NotoSansArabic'),    url(http://full/path/to/fonts/NotoNaskhArabic-Regular.ttf) format('truetype');
    unicode-range: U+060x-06Fx;
}

But this doesn't seem to be working. Arabic characters won't get displayed. And if I try to use a font stack to fall-back on a more workable font, it doesn't work:

<p style="font-family: 'Noto Sans', sans-serif;">من</p>

Is this a known issue? Or is there some way to get mixed-language documents that I'm missing? Thanks.

[bsweeney]

We have not coded in support for the unicode-range property yet. Until we've added support for this feature you'll need to configure two different fonts in your CSS then reference them in your document. Something like the following:

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: normal;
    src: local('Noto Sans'), local('NotoSans'), url(http://full/path/to/fonts/NotoSans-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: normal;
    src: local('Noto Sans Arabic'), local('NotoSansArabic'),    url(http://full/path/to/fonts/NotoNaskhArabic-Regular.ttf) format('truetype');
}

<span style="Noto Sans, sans-serif;">blah</span> <span style="Noto Sans Arabic, Noto Sans, sans-serif;" lang="ar" dir="rtl">بلاه</span>

[NateWr]

Thanks for the fast response @bsweeney. In my case, I won't know when a language is used to control the markup. But I appreciate that it's on your horizon. All the best.

[keksa]

Hello @bsweeney, is there any progress with this? It would really come in handy in our project.

[bsweeney]

@keksa not as of yet. It probably won't be something we can look at until the release after next.

[robertodavico]

Good afternoon,

Just a question: we are experiencing the same problem (at least that's what our developers report to me)
We are currently generating pdf(s) with mix of charsets, eg:

• Product names are Latin
• Contact names are from all over the world (eg: China, Russia, Greece, Brazil, ...)

This mix up shows up correct readable Latin strings but unreadable (squares) instead of the corresponding non latin charset (eg: customer name, if from china...)

Do you have any plan to fix this issue?
Thanks a lot in advance for the cooperation

[bsweeney]

We do intend to address the issue but do not have a time frame right now. Until a fix is produced the best you can do is work around the issue by styling the contact names with an appropriate font.

[woodyhayday]

Hi @bsweeney,

Just wondered if there was any progress on this one, or anyway I can help?

We're looking to get this working to provide more international support as per this original request.

I've tried setting up a font-installer routine which successfully installs Noto Sans Arabic etc. but I couldn't get your example code to work (from this comment). I'm still getting squares.

Could you paste a working example if this is still a way away from fixing, happy to load in fonts and use them specifically, but can't seem to get the usage right, (I am definitely including the font as inspecting the PDF states it).

Appreciate any input you can give :)

---

Edit: I realised that the example needed font-family, so in my case it's this, and that worked 👍

        <span style="font-family:NotoSansGlobal, sans-serif;">blah</span> 
        <span style="font-family:NotoSansArabic, NotoSansGlobal, sans-serif;" lang="ar" dir="rtl">بلاه</span>

[bsweeney]

We haven't begun discussing the process by which we could support this in the generated PDF. Off the top of my head, one way we can do this on the HTML parsing side would be to split text frames based on ranges and select the appropriate font when placing in the PDF. I haven't looked to see what, if anything, the PDF spec provides in support of this type of functionality. If you have thoughts please feel free to share.

---

As for a working example, try this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+Arabic&display=swap" rel="stylesheet">

<style>
  * { font-family: 'Noto Sans', sans-serif; }
  .ar { font-family: 'Noto Sans Arabic', 'Noto Sans', sans-serif; }
</style>

blah <span class="ar" lang="ar" dir="rtl">بلاه</span>

Note that you have to allow remote (isRemoteEnabled option = true) and dompdf needs read/write access to the path specified by the fontDir option.

Also, use this with the caveat that Dompdf does not yet support complex text layout features such as bidirectionality or shaping (#2619). You'll have to pre-process your text to have it displayed correct in your PDF.

[woodyhayday]

Thanks @bsweeney, that's helpful.

For now I'll stick with letting our users install fonts via our system (negates the isRemoteEnabled setting), and then they can hard set the font to use in their templating (via snippets). Look forward to a more globally usable option in the future 👍 .

Sidenote: For anyone else here, I found for JP that the Boku2 font converted well from .otf to .ttf (Apache 2.0 License)