Changing size of fonts in generated PDF

[neaai]

I have started using mkdocs recently and I am fairly new to it. One of the first things that I found useful was this "with-pdf" plugin and I like it, the resulting PDF is very fitting.

One thing I was unable to grasp and do, was changing the size of fonts. I'd have liked to increase the font size of the text, in particular the text which is inside the fenced code blocks of the .md files. How can I do that? Or is it even possible?

I did some searching and investigating and it seems that how it can be done is with modifying .css files, either the ones that the plugin provides and installs, or a custom .css entry in the project doc/ hierarchy. I tried a few ways but I didn't manage to do achieve this. I am not a (web)programmer, I don't know css.

As useful and practical as this plugin is, isn't there any way to resize, or otherwise change font sizes (or font type/name) for what is used when rendering the PDF? By configuring settings and without needing to hack into the files of the plugin?

PS: I thank all of you who maintain and develop this plugin. I find it very useful, because it's often required that the documentation made and maintained with mkdocs is needed to be in PDF format and printable.

[neaai]

Ok, I did find where to modify the files so to be able to change the font size of the fenced code block sections.

There is the file: "mkdocs_with_pdf/styles/_fonts.scss" and in it, at the section "tt" (line 32 currently as of this writing) there are two lines, for font-family and font-size. They both need to be changed.
As it is is originally:

  tt {
    font-family: 'Noto Sans Mono CJK JP', 'Courier New', monospace, serif;
    font-size: 0.8em;
  }

I changed it to be:

  tt {
    font-family: monospace, serif;
    font-size: 1.2em;
  }

After this, generating the PDF does change the size and the font of the fenced code blocks text.

I also tested to have that entire changed file placed as the "extra_css:" entry in the mkdocs.yml configuration. But nothing happens. Apparently it doesn't affect the PDF generation process.

So, while with this I was able to do what was needed, it doesn't feel the right way to do it. It is more of a hack, instead of a solution. How I see it, changing fonts and font sizes needs as according to needs is an important feature of generating the PDF, the very layout and look-and-feel of it. I imagine having the option for the plugin to define such things, in some configuration entries, or an optional configuration file which the plugin reads and overrides the default values of what it usually uses. Or maybe this functionality exists already and I was just not able to find it.... It just feels a bit too complex to do something so fundamental.

[neaai]

After more research I have realized that a lot of what the 'with-pdf' generates, depends on main theme used for mkdocs itself. It seems that the plugin works best with "material" theme, or no theme at all and leaving it at default. In the hack above, it is now good to change the font size with the "font-size" property and the font type with the "font-family", as expected. Honestly I am not entirely sure why it was not working before and why for changing the font size it was needed to change the font family/type as well. Probably I was missing fonts or some other python libraries (which then got installed later after many tests and tries with several themes and packages but which I am unable to pinpoint exactly which ones).

I can live with the 'hack' solution to this. I use mkdocs only internally and I have settled for two separate 'builds' of the mkdocs content: One build is to generate the PDF while using the "material" theme, and another build for the online web version of mkdocs using either 'readthedocs' or 'cinder' theme. When pushing the site where it should ultimately be, I use the result from the build with 'readthedocs' theme, and only the PDF file is the one generated with the 'material' theme.

[Thiti517]

Hello !

You have indeed found the code related to setting the font for code blocks. However, I recommend following the instructions below to make your font modification feel more like a personalization of the PDF by you rather than a hack into the plugin's code.

1. Create a CSS file containing the modifications you want to apply to the style of the PDF (e.g., font family and size). Place the file where it feels appropriate in the docs directory (for example: assets/styles/my-code-font.css).

2. Add the CSS file to the extra_css section in the mkdocs.yml configuration as follows:

extra_css:
  - 'assets/styles/my-code-font.css'

(Yes, you may have tried this option before, but some SCSS files from with-pdf might overwrite your modifications, which could explain why it didn’t work.)

3. In the CSS modifications (font-family and font-size), make use of the !important attribute as follows:

@media print {
    ...
    tt {
      font-family: monospace, serif !important;
      font-size: 1.2em !important;
    }
  }

(Also, if it wasn’t the case before, don’t forget to include the modifications within the @media print block. This ensures that these modifications are applied only to the PDF version of the documentation and not the site version. You can check _fonts.scss, it contains the same @media print block that encompasses all the code below it at the top of the file.)

4. Refine the CSS selector by replacing tt with pre code to more precisely target code blocks, rather than relying on the defaults from _fonts.scss:

  pre,
  code,
  var,
  samp,
  kbd,
  tt {
    ...
  }

become

  pre code {
    ...
}

which will give you the final code as follow:

@media print {
    pre code {
      font-family: monospace, serif !important;
      font-size: 1.2em !important;
    }
  }

with this you should be able to have a safe way to modify the style of the "printed" PDF without having to "hack" into the code of this plugin.

Feel free to ask if you have any question or error with what i gave here.

Enjoy ! :D

Here are some information on my configuration while testing a clean solution to this problem:

OS Ubuntu 22.04 using WSL2

python           3.10.12
mkdocs           1.6.1
mkdocs-with-pdf  0.9.3

beautifulsoup4   4.12.3 (dependency of mkdocs-with-pdf)
weasyprint       63.1 (dependency of mkdocs-with-pdf)
pydyf            0.11.0 (dependency of weasyprint)

[Thiti517]

Note: Somehow, only the font-size property seems to be overridden by SCSS files from the plugin, so you should be fine without !important attribute on font-family:

@media print {
    pre code {
      font-family: monospace, serif;
      font-size: 1.2em !important;
    }
  }