NixOS - Fonts broken after updating to Vivaldi 6.8

[ScrashMan]

Several fonts in websites and the browser UI itself have changed, breaking the appearance of several sites and elements.

For example, emojis are almost all replaced with empty vertical rectangles, both on websites and when emojis are chosen as Workspace icons.

Serif fonts are replaced with a sans-serif default-looking Linux font.

Fonts worked fine prior to this update, and no other apps on my machine are impacted, including Chromium and Firefox, which still display websites correctly.

Note, I'm running NixOS 24.11.20240906.574d1ea

6.8.3381.57 (Stable channel) stable (64-bit) 

[luetage]

@ScrashMan Vivaldi’s font rendering doesn’t differ from Chrome, it’s the same. You have to come up with example pages and test everything from a fresh profile. Most sites load third party fonts, in this case I don't see how anything else should display, unless you run code to prevent third party fonts. The default fonts are defined in vivaldi://settings/webpages. For working emoji on Linux you need to install an emoji font and write proper font configuration in /etc/fonts/local.conf to make sure it takes precedence. No idea how this all works out on NixOS, you will have to find this out yourself.

[ScrashMan]

@luetage I should clarify, the issue with emoji isn't that none of them display at all, it's that the fonts used to render emoji only implement a few of them, and those that are implemented are stylistically very different from how it previously rendered, or is rendered in other browsers.

Vivaldi:

Chromium:

[ScrashMan]

Some additional screenshots, showing that text that normally renders with a serif font are now rendering as sans-serif.

I want to emphasize, these screenshots were taken on the same machine.

Vivaldi:

Chromium:

[luetage]

@ScrashMan Can’t reproduce.

Wikipedia is a good example, because it doesn’t load third party fonts. Again, to check what goes wrong for you, try on a fresh profile or standalone install. If this doesn’t work either, inspect the heading with developer tools and find out which font loads for you and why it is sans‐serif. Edit the specification in devtools and see what happens when you just use “serif,” afterwards try the remaining ones. You should be able to determine which of the fonts triggers and therefore is the culprit. None of these font fallbacks is sans-serif. The most likely explanation is you have none of these fonts installed on your system and in Vivaldi font settings you are using a sans-serif font for the serif default. If this is not the case, the second possibility is a specific font triggers and you are overriding it in your Linux font settings.

font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;

The only font I have installed is Source Serif Pro, but in my case Georgia triggers and Ingeborg displays, because I override Georgia with Ingeborg system‐wide:

  <alias binding="strong">
    <family>Georgia</family>
    <prefer>
      <family>Ingeborg</family>
    </prefer>
  </alias>

[DoctorG]

@ScrashMan For installing fonts see https://wiki.nixos.org/wiki/Fonts

Tell output of fc-match -v "Noto Color Emoji"

Do you use Vivaldi as FlatPak?

I can not test NixOS. Sorry.

[ultrafilter]

I'm using NixOS and I had the same issue for as well. But in addition to emojis being broken I also could not see Chinese, Japanese, or Korean characters.

I do not use the Flatpak version of Vivaldi, but in a fit of desperation I tried the instructions on the NixOS wiki page for Flatpak applications. I added

fonts.fontDir.enable = true;

to my configuration files and also copied fonts to the local font directory:

mkdir $HOME/.local/share/fonts && cp -L /run/current-system/sw/share/X11/fonts/* $HOME/.local/share/fonts/

After that everything seems to work fine, except that Vivaldi can't find the font I use in the rest of my configuration. I can probably fix that by just finding the relevant files and linking them in the local fonts directory though.

[ScrashMan]

@ultrafilter

I tried this just now and while it did change the way my fonts are rendered, I wouldn't call it an improvement...

[ScrashMan]

@DoctorG said in NixOS - Fonts broken after updating to Vivaldi 6.8:

@ScrashMan For installing fonts see https://wiki.nixos.org/wiki/Fonts

Tell output of fc-match -v "Noto Color Emoji"

Do you use Vivaldi as FlatPak?

I can not test NixOS. Sorry.

fc-match -v "Noto Color Emoji"
Pattern has 47 elts (size 48)
        family: "Noto Color Emoji"(s)
        familylang: "en"(s)
        style: "Regular"(s)
        stylelang: "en"(s)
        fullname: "Noto Color Emoji"(w)
        fullnamelang: "en"(s)
        slant: 0(i)(s)
        weight: 80(f)(s)
        width: 100(f)(s)
        size: 104.64(f)(w)
        pixelsize: 109(f)(s)
        spacing: 100(i)(s)
        foundry: "GOOG"(s)
        antialias: False(s)
        hintstyle: 1(i)(w)
        hinting: True(w)
        verticallayout: False(s)
        autohint: False(w)
        globaladvance: True(s)
        file: "/nix/store/2q5985zz2cbv4l5ynnq5dps5fzdkkdl1-noto-fonts-color-emoji-2.042/share/fonts/noto/NotoColorEmoji.ttf"(s)
        index: 0(i)(w)
        outline: False(s)
        scalable: True(s)
        dpi: 75(f)(s)
        rgba: 5(i)(w)
        scale: 1(f)(s)
        matrix: [0.114679 0; 0 0.114679](w)
        charset: 
        0000: 00000000 03ff0409 00000000 00000000 00000000 00004200 00000000 00000000
        0020: 00002000 10000000 00000200 00000000 00000000 00000000 00000000 00000008
        0021: 00000000 02000004 00000000 00000000 03f00000 00000600 00000000 00000000
        0023: 0c000000 00000100 00000000 00000000 00000000 00000000 00008000 070ffe00
        0024: 00000000 00000000 00000000 00000000 00000000 00000000 00000004 00000000
        0025: 00000000 00000000 00000000 00000000 00000000 00400c00 00000001 78000000
        0026: 2132401f 0700c44d 800fff05 c8000169 1afc0000 60030c83 001ac130 27bf0600
        0027: 2054bf24 00180102 00b85090 00000018 00e00000 80010002 00000000 00000000
        0029: 00000000 00300000 00000000 00000000 00000000 00000000 00000000 00000000
        002b: 180000e0 00000000 00210000 00000000 00000000 00000000 00000000 00000000
        0030: 00000000 20010000 00000000 00000000 00000000 00000000 00000000 00000000
        0032: 00000000 00000000 00000000 00000000 02800000 00000000 00000000 00000000
        01f0: 00000010 00000000 00000000 00000000 00000000 00000000 00008000 00000000
        01f1: 00000000 00000000 00000000 c0030000 07fe4000 00000000 00000000 ffffffc0
        01f2: 04000006 07fc8000 00030000 00000000 00000000 00000000 00000000 00000000
        01f3: ffffffff fffffff3 ffffffff ffffffff cecfffff ffffffff ffffffff ffb9ffff
        01f4: ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff bfffffff
        01f5: ffffffff 3fffffff ffff7e00 07f980ff 00613c80 10060130 700e001c fc08810a
        01f6: ffffffff ffffffff 0000ffff 00000000 ffffffff ffffffff f0e7f83f 1ff91a3f
        01f7: 00000000 00000000 00000000 00000000 00000000 00000000 00000000 00010fff
        01f9: fffff000 f7ffffff ffffffbf ffffffff ffffffff ffffffff ffffffff ffffffff
        01fa: 00000000 00000000 00000000 1fff0000 ffff01ff bfffffff 0fffc03f 01ff01ff
        0e00: 00000000 03ff0000 00000000 87fffffe 00000000 00000000 00000000 00000000
        0fe4: 00000000 00000000 00000000 00000000 00000000 00000000 00000000 00007fe0
        0fe8: 00000000 00ffd000 00000000 00000000 00000000 00000000 00000000 00000000
(s)
        lang: und-zsye(s)
        fontversion: 133825(i)(s)
        capability: "otlayout:DFLT"(w)
        fontformat: "TrueType"(s)
        embeddedbitmap: False(w)
        decorative: False(s)
        lcdfilter: 1(i)(w)
        namelang: "en"(s)
        prgname: "fc-match"(s)
        postscriptname: "NotoColorEmoji"(s)
        color: True(s)
        symbol: False(s)
        variable: False(s)
        fonthashint: False(s)
        order: 0(i)(s)
        desktop: "KDE"(s)
        namedinstance: False(s)
        fontwrapper: "SFNT"(s)
        pixelsizefixupfactor: 0.114679(f)(w)

I do not use flatpak Vivaldi, I use the normal nix package.

[ScrashMan]

@luetage

I tried changing the font-family on that header element so it was just serif, and there was no change in its appearance. I also tried changing it to the various other options like sans-serif, fantasy, cursive, math, etc and none of those changed the appearance either, they all look like a plain sans-serif font.

Oddly, the only font-family that did alter the apperance was monospace, however that didn't actually make the text monospace, it just made the font smaller, while still having different size characters.

[ultrafilter]

@ScrashMan Try changing the fonts in Vivaldi's settings.

[ScrashMan]

Updated to Vivaldi 6.9, which is now available on NixOS, and it looks like the issue has been resolved, my fonts are now back to normal.

So, not sure why exactly this happened in 6.8 but glad to see it's gone.