[Bug]: OpenDyslexic Font Doesn't Work in NextCloud 31

[andy-smith-work]

⚠️ This issue respects the following points: ⚠️

• This is a bug, not a question or a configuration/webserver/proxy issue.
• This issue is not already reported on Github OR Nextcloud Community Forum (I've searched it).
• Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
• I agree to follow Nextcloud's Code of Conduct.

Bug description

Up to NextCloud 30, I could enable or disable the Dyslexia font under Appearance and Accessibility. Toggling the option would take effect immediately.

After upgrading to NextCloud 31, toggling the Dyslexia font option does nothing. The page remains in the default sans-serif font.

(I'm running the NextCloud 31.0.7 Docker image with an Nginx proxy container.)

Steps to reproduce

1. From the user menu, select Appearance and Accessibility.
2. Enable the Dyslexia font with the provided toggle switch.

Expected behavior

When I enable the dyslexia font, all text on the page should immediately refresh and be displayed with the OpenDyslexic font.

Nextcloud Server version

31

Operating system

Debian/Ubuntu

PHP engine version

PHP 8.3

Web server

Apache (supported)

Database engine version

PostgreSQL

Is this bug present after an update or on a fresh install?

Upgraded to a MAJOR version (ex. 31 to 32)

Are you using the Nextcloud Server Encryption module?

None

What user-backends are you using?

• Default user-backend (database)
• LDAP/ Active Directory
• SSO - SAML
• Other

Configuration report

List of activated Apps

Nextcloud Signing status

Nextcloud Logs

Additional info

The Network tab in the Firefox Developer Tools does not show any requests for fonts, but there is a message in the console: "expected declaration but found @font-face". The response payload for opendyslexic.css?plain=0 is

[data-theme-opendyslexic] { --font-face:OpenDyslexic, system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';  
			@font-face {
				font-family: 'OpenDyslexic';
				font-style: normal;
				font-weight: 400;
				src: url('/apps/theming/fonts/OpenDyslexic-Regular.otf') format('opentype');
			}

			@font-face {
				font-family: 'OpenDyslexic';
				font-style: normal;
				font-weight: 700;
				src: url('/apps/theming/fonts/OpenDyslexic-Bold.otf') format('opentype');
			}
		 }

Here's the response from a previous version of NextCloud that works:

[data-theme-opendyslexic] {
  --font-face:OpenDyslexic, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400;
  src: url('/apps/theming/fonts/OpenDyslexic-Regular.woff') format('woff'), url('/apps/theming/fonts/OpenDyslexic-Regular.otf') format('opentype'), url('/apps/theming/fonts/OpenDyslexic-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 700;
  src: url('/apps/theming/fonts/OpenDyslexic-Bold.woff') format('woff'), url('/apps/theming/fonts/OpenDyslexic-Bold.otf') format('opentype'), url('/apps/theming/fonts/OpenDyslexic-Bold.ttf') format('truetype');
}

According to the Mozilla MDN notes, the @font-face cannot be inside a CSS selector.

I was able to work around it by modifying the getCustomCss() function in apps/theming/lib/Themes/DyslexiaFont.php to add an extra } at the start of the return value and an extra { at the end. The OpenDyslexic font now works. The resulting stylesheet looks like:

[data-theme-opendyslexic] { --font-face:OpenDyslexic, system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';  
			}
			@font-face {
				font-family: 'OpenDyslexic';
				font-style: normal;
				font-weight: 400;
				src: url('/apps/theming/fonts/OpenDyslexic-Regular.otf') format('opentype');
			}

			@font-face {
				font-family: 'OpenDyslexic';
				font-style: normal;
				font-weight: 700;
				src: url('/apps/theming/fonts/OpenDyslexic-Bold.otf') format('opentype');
			}
			{
		 }

[nfebe]

Fixed in : #53857