Search code examples
puppeteer-sharp

puppeteer-sharp unable to use cursive font

I'm trying to use a cursive font in puppeteer-sharp for a signature. Puppeteer seems to ignore the font family when assigned. Ex:

.signature { font-family: 'Brush Script MT', cursive; }

Here are my PdfOptions:

               var stream = await page.PdfStreamAsync(new PdfOptions
               {
                  Format = PaperFormat.A4,
                  MarginOptions = new MarginOptions
                  {
                     Top = "0px",
                     Right = "0px",
                     Bottom = "0px",
                     Left = "0px"
                  },
                  PrintBackground = true,
               });

I've confirmed that it's not the code itself because if I run the html in a browser, the cursive font works as expected. Does anyone have any idea on how or if it's possible to get cursive to work? I imagine I'm missing something.

Solution

  • So I figured this out and there are two approaches to my issue. I am running a Docker container in Debian and it doesn't have this particular font installed.

    Solution 1:

    1. Download and install Brush Script MT from a trusted site.
    2. Copy the ttf file to /usr/local/share/fonts inside your DockerFile. Ex:
    COPY ["font.ttf", "./usr/local/share/fonts/font.ttf"]
RUN fc-cache

    For more information see this URL: https://wiki.debian.org/Fonts#Adding_fonts

    Solution 2:

    This is the lazier route and the route I took. Find a Google Font like the cursive one and use that instead.

    1. Go to https://fonts.google.com/ and find the font that matches to what you need.

    2. Reference the font. Ex:

      <link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet'>

    .signature {
    font-family: 'Cookie';
}