Theme: How to add custom font

PeerTube
1

How can I add a font to a theme and how to declare it via @font-face in assets/style.css? I thought I could add it to public/fonts and then declare

@font-face {
    font-family: "Signika";
    src: url("/fonts/Signika-Regular.woff2") format("woff2");
}

but that doesn’t work.

Then I found a paragraph about static files in the documentation but it didn’t help me because there is no example.

2

In the end my solution was:

  1. Host the font on an own server.
  2. Add a style element with @font-face to the html by using (Administration) Settings → Configuration → Advanced → Customizations → JavaScript
var style = document.createElement('style');

document.head.appendChild(style);

style.textContent = `
  @font-face {
    font-family: "Signika";
    src: url("<url_on_self_hosted_server>") format("woff2");
    font-weight: normal;
    font-style: normal;
  }
`;
  1. Apply the font via CSS (PeerTube settings or Theme plugin)
body#custom-css header span.instance-name {
    font-family: "Signika", "Source Sans Pro", sans-serif;
}
3

I had the same problem, and I agree, the static files documentation wasn’t very clear.

I appear that the static folder should be created in your theme-folder at the root level.

When you add your font there, you can access it via /static/… in your @font-face.

For me it lookes like this:

@font-face {
  font-family: 'URWDINSemiCond Regular';
  src: url('/static/fonts/urwdin/URWDINSemiCond-Regular.woff2') format('woff2')
  font-weight: normal;
  font-style: normal;
}
1 « J'aime »
4

If that works for you maybe you want to improve the documentation: PeerTube/support/doc/plugins/guide.md at develop · Chocobozzz/PeerTube · GitHub?