CSS styling shows on /debug HTML but not on PDF

Need preprocess_entity_print and add Your css.
Its work for me.

CUTOM_MODULE_preprocess_entity_print(&$variables) {
  if ($variables['content'][0][0]['#node']->getType() == 'CONTENT_TYPE') {
    $custom_css = '<link rel="stylesheet" media="all" href="LINK_TO_CSS"/>';
    $variables['entity_print_css'] = Markup::create($custom_css . $variables['entity_print_css']->__toString());
  }
}

I can also confirm this problem. Bug it goes a bit deeper than simply having problems in the published version.
If DomPdf has problems with many CSS things and currently other rendering problems related to variables.

I've found this here in @bsweeney's answer: https://github.com/dompdf/dompdf/issues/2828

That's why @flyke was able to render the 'color:red;' css without problems.

My theme was being loaded correctly by the rendering as well.

I've also had this problem. What worked for me was choosing to not optimize the CSS for the pdf. I've applied a patch from this issue: https://www.drupal.org/project/entity_print/issues/2971822 🐛 Allow users to choose whether to optimize css. RTBC . Maybe this will help someone.

I also have an issue when using bootstrap 5.x as base theme. My main issue I faced was trying to change the font-family heading tags, e.g. h1, h2, etc in my print stylesheet.

I could see the changes on other elements e.g.

I am loading my font like so

@font-face {
  font-family: 'DanielBlack';
  src:  url('../fonts/daniel-black-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

This is then imported from my entiityprint-all.scss file which compiles to css/entiityprint-all.css

So I can change the body font e.g.

body {
  font-family: "DanielBlack";
}

but this does not seem to work.

h1 {
  font-family: "DanielBlack";
}

however this does seem to work ok:

h1 {
  font-size:20pt;
}

I get that dompdf does not support css variables etc and that there is no support for bootstrap 5. However I do not really understand why I can set the custom font on some elements, and not others.

I have also checked /tmp folder and can see that dompdf seems to recognise the fonts there in installed-fonts.json. This needs to be manually cleared as if you want to reset things there.

Other things I have tried using the dompdf media query e.g.

@media dompdf {
  h2 {
    font-family: "DanielBlack";
  }
}

But unfortunately no success there either. As mentioned preview seems to work fine but there are other differences from the final generated pdf as far as ai can tell.

Not sure if i am missing anything obvious, or if the issues I am having actually stem from using Bootstrap 5.x base theme or not. I think the main issues there appear to be no support for flex box or grid as well as limited support for css variables. Not sure how that relates to this issue?

Ok I have recreated this issue locally. dompdf seems to set headings to use the default font or fallback.

I have added an issue here to try and clarify.

https://github.com/dompdf/dompdf/issues/3313

#17 worked for me

Instead of using a link tag to attach css file, it's better to expose the css into style tag, it should work like a charm.

/**
 * Implements hook_preprocess_HOOK() for entity_print.
 */
function mytheme_preprocess_entity_print(array &$variables) {
  /** @var \Drupal\Core\Extension\ModuleExtensionList $module_list */
  $module_list = \Drupal::service('extension.list.module');

  /** @var \Drupal\Core\Extension\ThemeExtensionList $theme_list */
  $theme_list = \Drupal::service('extension.list.theme');
  $css = [];

  // Expose default css into style tag.
  if (\Drupal::config('entity_print.settings')->get('default_css')) {
    $css[] = @file_get_contents($module_list->getPath('entity_print') . '/css/entity-print.css');
  }

  // Expose custom css into style tag. In my case it's located in dist/pdf-styling.css.
  $css[] = @file_get_contents($theme_list->getPath('mytheme') . '/dist/pdf-styling.css');

  $variables['entity_print_css'] = [
    '#type' => 'inline_template',
    '#template' => '<style>{{ output }}</style>',
    '#context' => [
      'output' => implode(PHP_EOL, array_filter($css)),
    ],
  ];
}

#25 works for me

I had the same problem on my local machine. This fixed it for me. You probably want to make sure you enable this when it's on production.

1. Go to /admin/config/content/entityprint
2. Disable "Verify Peer"
3. Disable "Verify Peer Name"

Just to follow up on my previous comment when applying custom styles to header tags, h1, h2, h3 etc, the only way i could get it to work on another theme was to load the whole of bootstrap (including css reset/normalise etc).

Very strange.

I had the same issue with dompdf running Drupal in a docker container behind a proxy.

As the original server can't access the external base url, linked assets (css, images) can't be resolved by drupal internally. I solved this by mapping the external domain to localhost in the container, but one could also add absolute paths to the local webserver (e.g. http://127.0.0.1).

#25 worked for me but take into account that you need to use the raw filter when you are printing the output string otherwise a lot of characters may be escaped.

  $variables['entity_print_css'] = [
    '#type' => 'inline_template',
    '#template' => '<style>{{ output | raw}}</style>',
    '#context' => [
      'output' => implode(PHP_EOL, array_filter($css)),
    ],
  ];