bold font weight not working with Google fonts in dompdf

Question

I'm using dompdf to turn HTML code into pdf. I'm using Google fonts and are importing them like this:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');

When i use them in my css with:

    h1, h3, .text {
      font-family: 'Open Sans';
      font-weight: 400;
    }

i get my text in the right font. Now when some of the text is bold like the headings or certain pieces of text that are bold, they don't get the right font weight. When i change the font-weight to above 400 they don't work anymore.

Does anyone know how to use multiple font weights in dompdf?

BrianS BrianS · Accepted Answer · 2020-01-21T02:01:08

Until the release of Dompdf 0.8.4 numeric font weights were not supported. If you're using a version of Dompdf prior to 0.8.4 you can not use fonts defined with numeric weights.

Additionally, though numeric font weights are supported, there appears to be a bug in how Dompdf parses the Google Font URL when using with an @import rule. (ref issue 2054). You can work around this issue by using a link element instead.

Something like the following should work:

<html>
<head>

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">

  <style>
    .opensans {
      font-family: 'Open Sans';
      font-weight: 400;
    }
</style>

</head>

<body>
  <h1 class="opensans">The quick red fox jumped over the large brown log.</h1>
</body>
</html>

bold font weight not working with Google fonts in dompdf

1 Answers