Cant use custom fonts like poppins

[Pankaj-Pippin]

Hi,

When we try to make use of google web fonts like poppins which work well in any browser but its replacing it to dejavu-sans font while pdf generation

Font is installed in linux system and windows both.

we tried some of the solution found in net including the custom .conf file

51-local.conf

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
 <match target="font">
  <edit mode="assign" name="rgba">
   <const>rgb</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hinting">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hintstyle">
   <const>hintslight</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="antialias">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="lcdfilter">
   <const>lcddefault</const>
  </edit>
 </match>
</fontconfig>

Tried to use like this too

/* poppins-200 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/poppins-v20-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v20-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v20-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v20-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v20-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v20-latin-200.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-300 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v20-latin-300.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v20-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-700 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v20-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v20-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-900 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/poppins-v20-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v20-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v20-latin-900.svg#Poppins') format('svg'); /* Legacy iOS */
}

Any one ever used custom fonts properly in linux nodejs application to generate pdf please help

Note: We can check the pdf font using "pdf xchange viewer" visually sans and poppin have very little difference but using this app we can test which one is actually used

poppins-v20-latin.zip

[Pankaj-Pippin]

Hi,

We can make us poppin font for pdf generation like this

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"
        rel="stylesheet">

Wrong css use

font-weight: 900; font-family: 'Poppins-Bold', sans-serif;

  .noMargin {
            margin: 0;
            font-size: 43.44px !important;
            font-weight: 900;
            font-family: 'Poppins-Bold', sans-serif;
            margin-left: -0.5%;
            color: #0C111F;
            letter-spacing: 0px;
            margin-top: -1%;
        }

Correct

 .noMargin {
            margin: 0;
            font-size: 43.44px !important;
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            margin-left: -0.5%;
            color: #0C111F;
            letter-spacing: 0px;
            margin-top: -1%;
        }

font-family: 'Poppins', sans-serif; font-weight: 700;