DaiKeung
DaiKeung

Reputation: 1167

Why sometimes get different results when using WebFonts?

I am using PuppeteerSharp which deployed to Azure Linux Functions by using below WebFonts. I cannot guarantee the output of PDF that printed all characters from different languages.

$font-family: Arial-Unicode-MS,myanmar3,Noto-Sans-Khmer;


@font-face{
  font-family:"Arial-Unicode-MS";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url('fonts/Arial-Unicode-MS.woff2') format("woff2");
}
@font-face{
  font-family:"myanmar3";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src:url('fonts/myanmar3.woff2') format("woff2");
}
@font-face {
  font-family: 'Noto-Sans-Khmer';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('fonts/noto-sans-khmer-v9-khmer-regular.woff2') format('woff2');
}

However, the printed PDFs are with different output:

Case1: Most of times printed PDF with Latin characters only:

Case2: Missing Khmer character:

Case3: Printed all languages characters:

Upvotes: 0

Views: 53

Answers (1)

Osify
Osify

Reputation: 2295

Can you please specify the Unicode range of each font as example for Khmer text, use this range unicode-range: U+1780-17FF, U+200C, U+25CC;

@font-face {
  font-family: 'Noto-Sans-Khmer';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('fonts/noto-sans-khmer-v9-khmer-regular.woff2') format('woff2');
  unicode-range: U+1780-17FF, U+200C, U+25CC;
}

and do the same for other language in the CSS, that would work.

And for linux case, you should have install the font in your system.

Upvotes: 1

Related Questions