Custom fonts not working

[highfredo]

Steps to reproduce

Add fonts in /config/fonts/

config/
  fonts/
    Merriweather/
      Merriweather-BlackItalic.ttf
      ....
    Literata/
      ....

Expected behavior

The book should be displayed with the selected font

Actual behavior

The UI detects them but when you select it it switches to the browser's default font, not the selected one.
The selected font is not installed on my OS

Logs

No response

Komga version

1.19.0

Operating system

Docker, Debian Host. Edge browser on Windows

Installation method

Docker

Other details

No response

Acknowledgements

• I have searched the existing issues (open AND closed) and this is a new ticket, NOT a duplicate or related to another open issue.
• I have written a short but informative title.
• I have checked the FAQ.
• I have updated the app to the latest version.
• I will fill out all of the requested information in this form.

[gotson]

Can you provide startup logs? Can you also check the browser's network tools / console and check for any errors in there?

[highfredo]

Server Logs:
komga.log

Browser console log:

Browser network tools:
No errors other than 404 when loading /next and /previous

Doesn't even try to load the fonts

/api/v1/fonts/resource/[font_name]/css responses looks like this:

[gharden91]

I am running into this issue as well. I can provide additional logs if necessary.

[zhen-huan-hu]

Not sure if related. When I used OTF fonts, it worked on my desktop computer, but not on iOS (I can still select the font but it just switches back to the system default font). Converting the fonts WOFF2 solves the issue.

[gharden91]

OTF fonts do not work for me on Web/Windows and Edge/iOS.
woff2 Fonts do work for me on Web/Windows and Edge/iOS.

[gotson]

Can you try other browsers on Windows ?

[gotson]

Seems like it's a browser/platform issue. For better compatibility you should always use woff2/woff.

[gotson]

I think the format part of the font in the css may be incorrect for otf/ttf, which may explain why it doesn't work on some browsers/platform.

Will fix that.

[gotson]

I've also updated the mediaType returned in the HTTP response for the fonts to reflect the proper media type instead of application/octet-stream

[highfredo]

Can you try other browsers on Windows ?

Tried with Firefox and Chrome, it doesn't work.

woff2 fonts works just as @gharden91 said

[gotson]

if you can try the latest master and provide feedback whether the 2 related commits work, that would be great

[highfredo]

if you can try the latest master and provide feedback whether the 2 related commits work, that would be great

Its works!

Tested with wls + edge

[highfredo]

I just noticed something else, but it happens with all fonts types.

It doesn't detect the font family well.

@font-face {
    font-family: 'Merriweather';
    src: url('Merriweather-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Merriweather';
    src: url('Merriweather-Black.ttf') format('truetype'),url('Merriweather-Regular.ttf') format('truetype'),url('Merriweather-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Merriweather';
    src: url('Merriweather-LightItalic.ttf') format('truetype'),url('Merriweather-Italic.ttf') format('truetype'),url('Merriweather-BlackItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Merriweather';
    src: url('Merriweather-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

For example, "Merriweather-Black" is loaded by default when font-weight: normal and font-style: normal instead of "Merriweather-Regular"

[zhen-huan-hu]

I just noticed something else, but it happens with all fonts types.

It doesn't detect the font family well.

@font-face {
font-family: 'Merriweather';
src: url('Merriweather-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}

@font-face {
font-family: 'Merriweather';
src: url('Merriweather-Black.ttf') format('truetype'),url('Merriweather-Regular.ttf') format('truetype'),url('Merriweather-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Merriweather';
src: url('Merriweather-LightItalic.ttf') format('truetype'),url('Merriweather-Italic.ttf') format('truetype'),url('Merriweather-BlackItalic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'Merriweather';
src: url('Merriweather-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
For example, "Merriweather-Black" is loaded by default when font-weight: normal and font-style: normal instead of "Merriweather-Regular"

Look at how many variants a professional commercial typeface can have

AJensonPro-Bold.otf
AJensonPro-BoldCapt.otf
AJensonPro-BoldDisp.otf
AJensonPro-BoldIt.otf
AJensonPro-BoldItCapt.otf
AJensonPro-BoldItDisp.otf
AJensonPro-BoldItSubh.otf
AJensonPro-BoldSubh.otf
AJensonPro-Capt.otf
AJensonPro-Disp.otf
AJensonPro-It.otf
AJensonPro-ItCapt.otf
AJensonPro-ItDisp.otf
AJensonPro-ItSubh.otf
AJensonPro-Lt.otf
AJensonPro-LtCapt.otf
AJensonPro-LtDisp.otf
AJensonPro-LtIt.otf
AJensonPro-LtItCapt.otf
AJensonPro-LtItDisp.otf
AJensonPro-LtItSubh.otf
AJensonPro-LtSubh.otf
AJensonPro-Regular.otf
AJensonPro-Semibold.otf
AJensonPro-SemiboldCapt.otf
AJensonPro-SemiboldDisp.otf
AJensonPro-SemiboldIt.otf
AJensonPro-SemiboldItCapt.otf
AJensonPro-SemiboldItDisp.otf
AJensonPro-SemiboldItSubh.otf
AJensonPro-SemiboldSubh.otf
AJensonPro-Subh.otf

[gotson]

you need to split the files into different folders yourself, 1 folder = 1 family

[highfredo]

you need to split the files into different folders yourself, 1 folder = 1 family

All these files are from a single family.

I don't think the project should support all the variants (if an epub uses so many fonts variations it probably has them embedded), but it would be nice if the documentation say that only: normal, bold, normal-italic and bold-italic are supported.

Reference

Anyway, i just keep the normal, bold, normal-italic and bold-italic variations and it works perfect.
Thanks for the whole project, I love it!!

[gotson]

The documentation already says that:

Komga will recognize the following keywords in file names: bold and italic, and categorize the fonts accordingly.

[github-actions]

🎉 This issue has been resolved in 1.20.0 (Release Notes)