search

zhaoterryy / mkdocs-pdf-export-plugin

An MkDocs plugin to export content pages as PDF files
MIT License
312 stars 43 forks source link

Material theme admonition icons do not render correctly #17

Closed raqbit closed 5 years ago

raqbit commented 5 years ago

When generating PDFs from material-theme style docs with admonition blocks, the material icons do not get rendered correctly. It seems like something goes wrong when adding the font to the pdf.

Example:

image

Looks like

image

Log output:

ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
...
raqbit commented 5 years ago

Okay, seems like the reason the icons didn't load is because the recommended stylesheet does not include the Material Icons font-family. After adding it, the icons loaded correctly.

shauser commented 5 years ago

Can you please post what exactly you added where (or even better: provide a pull request)? Since I don't have the problem, I can't really fix this otherwise.

andrewpriddis commented 5 years ago

@Raqbit I have the same problem and am not sure where to add the font family. Can you describe your solution more?

raqbit commented 5 years ago

@siddirp What I did is I added Material Icons as a fallback font to the css:

@page {
    font-family: "Roboto", "Material Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

While this did fix it when generating on my local machine, I did not get this to work when running using CI.

Edit: It seems like this (^) was never the fix, but for me it will generate icons fine when running locally but will fail when running in a CI environment. Maybe this has to do with some fonts or graphical libraries being available on the system?

raqbit commented 5 years ago

To get the same environment: I am using the docker image python:3.7.0-stretch in the CI setup.

raqbit commented 5 years ago

After updating to a docker image based on Debian buster, the issue solved itself. It seems to be related to the version of a dependency in Debian stretch.

zhaoterryy commented 5 years ago

Interesting.. I'm going to close this for now. Feel free to open another issue.