htmlcssfontspywebview

How to use a custom font in pywebview

I want to use a custom font in a pywebview application, but after adding the CSS, only the fallback font is used. The font files are located in the /css/fonts directory, but neither relative or absolute paths would work.

My CSS:

@font-face {
  font-family: 'Retro Gaming';
  src: url('fonts/retro_gaming.ttf') format('truetype'),
    url('fonts/retro_gaming-webfont.woff2') format('woff2'),
    url('fonts/retro_gaming-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Courier New', Courier, monospace;
}

.menu {
  font-family: 'Retro Gaming', Courier, monospace;
}

My HTML:

<html>

<body>
  <p class="menu">This font should be Retro Gaming</p>
  <p>This font should be Courier New</p>
</body>

</html>

The messages I see when I start the app are:

127.0.0.1 - - [24/Dec/2020 18:13:11] "GET / HTTP/1.1" 200 200
127.0.0.1 - - [24/Dec/2020 18:13:11] "GET /fonts/retro_gaming.ttf HTTP/1.1" 404 42
127.0.0.1 - - [24/Dec/2020 18:13:11] "GET /fonts/retro_gaming-webfont.woff2 HTTP/1.1" 404 52
127.0.0.1 - - [24/Dec/2020 18:13:11] "GET /fonts/retro_gaming-webfont.woff HTTP/1.1" 404 51

EDIT: Image with path to font files:

Image with path to font files

Solution

  • Ok, I figured it out. I works fine by placing the font files in the same directory where the html is (in my case, assets). You can even create subdirectories for the fonts in there.

    EDIT: another option is to avoid loading the styles to the window inside the python code and doing it from the HTML directly.