Can't use a custom font

[avfigueredo]

Steps to reproduce

I'm trying to install a custom font, but for some reason, the app isn't loading my font.

My config.json

"fonts": { "faces": [ { "font-family": "Open Sans", "src": [{"url": "/fonts/Open_Sans.ttf", "format": "ttf"}] } ], "general": "Open Sans, regular", "monospace": "Open Sans, regular" },

I've moved the font files to inside the container.

But the app is still loading the default font.

Outcome

What did you expect?

Use custom font.

What happened instead?

The custom font wasn't loaded, instead, the app continue to load the default font.

Operating system

Ubuntu 20

Browser information

Safari, Brave, Chrome

URL for webapp

It's a private server, running the latest version

Application version

Version Element: ba38b73-react-ba38b73a1550-js-ba38b73a1550 Version Olm: 3.2.8

Homeserver

Synapse

Will you send logs?

No

[bwindels]

If you put the fonts section as a root entry in your config file, this isn't going to work. You have to define a custom theme, wherein you can put a fonts section, see https://github.com/vector-im/element-web/blob/develop/docs/theming.md#custom-themes

Could you provide your full config (with redacted values if needed) if this isn't the case?

[avfigueredo]

If you put the fonts section as a root entry in your config file, this isn't going to work. You have to define a custom theme, wherein you can put a fonts section, see https://github.com/vector-im/element-web/blob/develop/docs/theming.md#custom-themes

Could you provide your full config (with redacted values if needed) if this isn't the case?

@bwindels Thanks, I've followed this tutorial, and here is my config.json. I've created a Dockerfile to move the font files to inside the container. The colours are applied correctly, just the font doesn't work.

{ "default_server_config": { "m.homeserver": { "base_url": "http://myserver.com", "server_name": "myserver.com" }, "m.identity_server": { "base_url": "https://vector.im" } }, "disable_custom_urls": true, "disable_guests": false, "disable_login_language_selector": false, "disable_3pid_login": false, "brand": "App", "integrations_ui_url": "https://scalar.vector.im/", "integrations_rest_url": "https://scalar.vector.im/api", "integrations_widgets_urls": [ "https://scalar.vector.im/_matrix/integrations/v1", "https://scalar.vector.im/api", "https://scalar-staging.vector.im/_matrix/integrations/v1", "https://scalar-staging.vector.im/api", "https://scalar-staging.riot.im/scalar/api" ], "bug_report_endpoint_url": "https://element.io/bugreports/submit", "uisi_autorageshake_app": "element-auto-uisi", "default_country_code": "DE", "show_labs_settings": false, "features": {}, "default_federate": true, "default_theme": "custom-app", "room_directory": { "servers": [ "matrix.org" ] }, "piwik": { "url": "https://piwik.riot.im/", "whitelisted_hs_urls": [ "https://matrix.org" ], "whitelisted_is_urls": [ "https://vector.im", "https://matrix.org" ], "siteId": 1 }, "enable_presence_by_hs_url": { "https://matrix.org": false, "https://matrix-client.matrix.org": false }, "setting_defaults": { "breadcrumbs": true, "UIFeature.deactivate": false, "UIFeature.registration": false, "UIFeature.passwordReset": false, "showCallButtonsInComposer": false, "language": "de", "custom_themes": [ { "name": "app", "is_dark": false, "fonts": { "faces": [ { "font-family": "Open Sans", "src": [{"url": "/fonts/Open_Sans.ttf", "format": "ttf"}] } ], "general": "Open Sans, regular", "monospace": "Open Sans, regular" }, "colors": { "accent-color": "#DD91A3", "warning-color": "#FAC826", "sidebar-color": "#DFE3E6", "roomlist-background-color": "#F5F7FA", "roomlist-text-color": "#EA4692", "roomlist-text-secondary-color": "#ab0050", "roomlist-highlights-color": "#ffffff", "roomlist-separator-color": "#e3e8f0", "timeline-background-color": "#ffffff", "timeline-text-color": "#2e2f32", "timeline-text-secondary-color": "#61708b", "timeline-highlights-color": "#F5F7FA", "username-colors": ["#A0A0C0"], "avatar-background-colors": ["#dd91a3"] } } ] }, "jitsi": { "preferred_domain": "meet.element.io" }, "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx" }

[t3chguy]

@avfigueredo any errors in the console? Do the font files actually work at the paths configured if you try navigate to them directly?

[avfigueredo]

@t3chguy There aren't errors in the console. I was looking here, and the files aren't loaded on the page. When I try to access the files via browser, they don't open/exist. But, for example, the default font can be opened.

[t3chguy]

The directory permissions are wrong.

That directory can only be read and opened by root (+rx)

[avfigueredo]

@t3chguy thanks, I've changed, now I can access the files using the browser. However, it is still without loading the files, I think I'm making a stupid mistake.

This is my config file:

"custom_themes": [ { "name": "xxx", "is_dark": false, "fonts": { "faces": [ { "font-family": "Open Sans", "src": [{"url": "/fonts/Open_Sans.ttf", "format": "ttf"}] } ], "general": "Open Sans, regular", "monospace": "Open Sans, regular" }, "colors": {} } ]

The files in the container are in /app/fonts/Open_Sans/. Is this configuration correct?
I don't know if the correct path for URL is /fonts/Open_Sans.ttf or /fonts/Open_Sans/Open_Sans.ttf or /fonts/Open_Sans/OpenSans.ttf

[avfigueredo]

Hello guys, any idea about why this is happening?

[Johennes]

@avfigueredo are you still facing this problem?

[daniellekirkwood]

No response, closing for now. Re-open if needed