How to make fonts work like mkdocs sample?

[funkypenguin]

Thank you for this amazing plugin! I've been trying to get a good-looking PDF of my mkdocs site working, but I'm struggling with the rendered font.. I've created a Docker image to do the build (below), but TL;DR, when I use your material-mkdocs sample which generates this pdf, and I try to reproduce it with my build image, but I don't seem to have been able to change the font used.

I've had a look at #50, and I've tried manually coping over the Roboto fonts, or installing the Ubuntu font using apk, but in all cases, my PDFs render with the same less-than-attractive font..

What am I missing? :)

Here's the Dockerfile I'm using, BTW:

ARG FROM_SOURCE=squidfunk/mkdocs-material
FROM ${FROM_SOURCE}

RUN apk add --no-cache py3-pip py3-pillow py3-cffi py3-brotli gcc musl-dev python3-dev pango build-base libffi-dev jpeg-dev libxslt-dev

RUN pip install \
        beautifulsoup4==4.9.3 \
        mkdocs-autolinks-plugin \
        mkdocs-htmlproofer-plugin \
        mkdocs-git-revision-date-localized-plugin \
        mkdocs-macros-plugin \
        mkdocs-git-committers-plugin-2 \
        mkdocs-meta-descriptions-plugin \
        mkdocs-with-pdf \
        mkdocs-extra-sass-plugin \
        qrcode \
        livereload

# Theoretically this could add support for headless chrome
RUN apk add --no-cache \
      chromium \
      nss \
      freetype \
      harfbuzz \
      ca-certificates \
      ttf-freefont \
      nodejs \
      yarn ttf-ubuntu-font-family dbus yarn


RUN   git config --global --add safe.directory /docs

 # Additional font 
#  COPY fonts /usr/share/fonts/Additional 
 RUN apk --update --upgrade --no-cache add fontconfig ttf-freefont font-noto terminus-font \ 
     && fc-cache -f \ 
     && fc-list | sort 

[funkypenguin]

FWIW I captured the following output..

INFO:weasyprint.progress:Step 2 - Fetching and parsing CSS - https://fonts.googleapis.com/css?family=Ubuntu:3
00,300i,400,400i,700,700i%7CUbuntu+Mono:400,400i,700,700i&display=fallback
WARNING:weasyprint:Ignored `font-display: fallback` at 5:3, descriptor not supported.
WARNING:weasyprint:Ignored `font-display: fallback` at 12:3, descriptor not supported.
WARNING:weasyprint:Ignored `font-display: fallback` at 19:3, descriptor not supported.
WARNING:weasyprint:Ignored `font-display: fallback` at 26:3, descriptor not supported.
WARNING:weasyprint:Ignored `font-display: fallback` at 33:3, descriptor not supported.
WARNING:weasyprint:Ignored `font-display: fallback` at 40:3, descriptor not supported.
WARNING:weasyprint:Ignored `font-display: fallback` at 47:3, descriptor not supported.
WARNING:weasyprint:Ignored `font-display: fallback` at 54:3, descriptor not supported.
WARNING:weasyprint:Ignored `font-display: fallback` at 61:3, descriptor not supported.
WARNING:weasyprint:Ignored `font-display: fallback` at 68:3, descriptor not supported.
INFO:weasyprint.progress:Step 2 - Fetching and parsing CSS - CSS string
INFO:weasyprint.progress:Step 2 - Fetching and parsing CSS - file:///docs/site/extras/css/icons.css
INFO:weasyprint.progress:Step 2 - Fetching and parsing CSS - file:///docs/site/assets/stylesheets/extra-style
.o7nwb7x_.min.css

[funkypenguin]

Suspecting my Docker image to be to blame, I setup the toolset on my Mac, and tried again.. the result is the same.. even with the sample material-mkdocs structure from https://github.com/orzih/mkdocs-with-pdf/tree/master/samples/mkdocs-material (I just had to disable the google_analytics config to avoid an error), I get no Roboto font...

[Avlyssna]

@funkypenguin

After running into the same issue, I managed to find part of the problem. Essentially, the font-family property is not following the nested variables material-mkdocs uses in their CSS. I've opened an issue with WeasyPrint and you can track the issue's progress here.

Although I've changed the font-family property to be hard-coded instead of a nested variable, it still only works when using WeasyPrint directly. That is to say, there are still further issues with mkdocs-with-pdf when generating the PDF for whatever reason.

I'll update this issue if I find the second problem in the meantime.

[jaklan]

@Avlyssna can you provide some more details about the workaround you applied? I have exactly the same issue as @funkypenguin - missing text in code blocks.

[jaklan]

Btw, I just tried to install the missing font via brew:
brew install font-roboto
but unfortunately still no success...

[flavienbwk]

This is quite a big issue. Did anyone has a way to mitigate the problem ? This happens only on Windows for me, not Linux.

[flavienbwk]

Here is a workaround. Add a custom style to with_pdf in your ./with_pdf_template/styles.scss file :

* {
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

The important part is !important :)

[jaklan]

@flavienbwk confirm it works, thanks!

[Carsopre]

@flavienbwk thanks for your workaround. I was a few days going around the same problem.
Also for who might end up here looking for answers, when running in a Windows - conda environment. DO NOT install the weasyprint from conda, rather from pip and the required binaries as described in weasyprint installation steps.