Some websites render the font a bit strangely.

[diegonogueira]

System details

12th Gen Intel. Intel UHD Graphics 770. Omarchy 3.1.7

What's wrong?

Some websites render the font a bit strangely. For example: https://cursor.com/ Do I need to install any font packages or something like that to improve compatibility with certain websites?

Thank you.

[dhh]

I think this is a graphics rendering issue. Maybe related to the Intel card. I'm not seeing that here on AMD with an iGPU. But I had seen an earlier issue about something similar.

[Woosah]

Maybe not. It depends on the font family. The cursor website uses their "own" font called CursorGothic, and they use berkeleyMono, which is the same font used by perplexity as its mono font, where I recognized this degraded rendering for the first (and until now, the only time), too. As soon as you deactivate these fonts on the website, this goes away. I do not have a solution for this, because I had no time to look after one, but I do not think that you need to search for the error in the GPU-direction....

[dhh]

Here's what I see on the same site:

[Woosah]

I only checked on computers using NVIDIA drivers, so maybe you're right that this depends on the card...I am surprised by this, but one never stops learning! Always thought that it completely depends on the font settings, because I only ever encountered it with this special berkleyMono font (and not with CursorGothic), but.... Will check on an AMD based PC later.

[bjarneo]

Intel, all good on my end

[maxguzenski]

For me it looks like @dhh screenshoot.

@diegonogueira which exactly monitor you have and what scale are you using at hyprland ? Share your fastfetch output: fastfetch -l none

 PC: MS-7E51 (1.0) │ ├: AMD Ryzen 7 9800X3D (16) @ 5.27 GHz │ ├: AMD Radeon RX 9070 XT [Discrete] │ ├: AMD Radeon Graphics [Integrated] │ ├󱄄: 3840x2160 @ 1.5x in 27", 144 Hz [External] │ ├󰋊: 271.87 GiB / 929.50 GiB (29%) - btrfs │ ├: 4.26 GiB / 30.40 GiB (14%) └ └󰓡 : 0 B / 4.00 GiB (0%)

[diegonogueira]

 PC: B760M GAMING WIFI │ ├: 12th Gen Intel(R) Core(TM) i7-12700K (16+4) @ 5.00 GHz │ ├: Intel UHD Graphics 770 @ 1.50 GHz [Integrated] │ ├󱄄: 1920x1080 in 24", 60 Hz [External] │ ├󰋊: 30.32 GiB / 463.74 GiB (7%) - btrfs │ ├: 6.76 GiB / 31.11 GiB (22%) └ └󰓡 : 0 B / 4.00 GiB (0%) └────────────────────────────────────────────────────┘

┌──────────────────────Software──────────────────────┐  OS: Omarchy 3.1.7 │ ├󰘬: master │ ├: Linux 6.17.8-arch1-1 │ ├: Hyprland 0.52.1 (Wayland) │ ├: alacritty 0.16.1 │ ├󰏖: 910 (pacman) │ ├󰸌: Tokyo Night ●●●●●●●● └ └: alacritty (11.0pt) └────────────────────────────────────────────────────┘

cat .config/hypr/monitors.conf
# See https://wiki.hyprland.org/Configuring/Monitors/
# List current monitors and resolutions possible: hyprctl monitors
# Format: monitor = [port], resolution, position, scale

# Optimized for retina-class 2x displays, like 13" 2.8K, 27" 5K, 32" 6K.
env = GDK_SCALE,2
monitor=,preferred,auto,auto

# Good compromise for 27" or 32" 4K monitors (but fractional!)
# env = GDK_SCALE,1.75
# monitor=,preferred,auto,1.666667

# Straight 1x setup for low-resolution displays like 1080p or 1440p
# env = GDK_SCALE,1
# monitor=,preferred,auto,1

# Example for Framework 13 w/ 6K XDR Apple display
# monitor = DP-5, 6016x3384@60, auto, 2
# monitor = eDP-1, 2880x1920@120, auto, 2

[dipsx]

same problem:

┌──────────────────────Hardware──────────────────────┐  PC: Z170X-Gaming 7 │ ├: Intel(R) Core(TM) i7-6700K (8) @ 4.20 GHz │ ├: NVIDIA GeForce RTX 3070 Ti [Discrete] │ ├󱄄: 3440x1440 in 34", 60 Hz [External] │ ├󰋊: 342.29 GiB / 930.50 GiB (37%) - btrfs │ ├: 6.34 GiB / 39.12 GiB (16%) └ └󰓡 : 0 B / 4.00 GiB (0%) └────────────────────────────────────────────────────┘

┌──────────────────────Software──────────────────────┐  OS: Omarchy 3.1.6 │ ├󰘬: master │ ├: Linux 6.17.7-arch1-1 │ ├: Hyprland 0.51.1 (Wayland) │ ├: ghostty 1.2.3-arch2 │ ├󰏖: 1114 (pacman), 7 (flatpak-system), 8 (flatpak-user) │ ├󰸌: Matte Black ●●●●●●●● └ └: CaskaydiaMono Nerd Font (9pt) └────────────────────────────────────────────────────┘

┌────────────────────Uptime / Age────────────────────┐ 󱦟 OS Age: 53 days 󱫐 Uptime: 7 hours, 44 mins └────────────────────────────────────────────────────┘

This problem has remained from the first installation 53 days ago

which exactly monitor you have and what scale are you using at hyprland ?

monitor Dell Inc. DELL S3422DWG 9X03T63 scale: 1.00

~ ✗ hyprctl monitors
Monitor DP-2 (ID 0):
        [email protected] at 0x0
        description: Dell Inc. DELL S3422DWG 9X03T63
        make: Dell Inc.
        model: DELL S3422DWG
        physical size (mm): 800x330
        serial: 9X03T63
        active workspace: 2 (2)
        special workspace: 0 ()
        reserved: 0 26 0 0
        scale: 1.00
        transform: 0
        focused: yes
        dpmsStatus: 1
        vrr: false
        solitary: 0
        solitaryBlockedBy: windowed mode,missing candidate
        activelyTearing: false
        tearingBlockedBy: next frame is not torn,user settings,missing candidate
        directScanoutTo: 0
        directScanoutBlockedBy: user settings,missing candidate
        disabled: false
        currentFormat: XRGB8888
        mirrorOf: none
        availableModes: [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] ```

[ryanrhughes]

Mine also looks fine on Nvidia RTX 5090.

This almost looks like a strange anti-aliasing issue of some kind.

[diegonogueira]

I discovered something interesting. When I zoom in on the browser, the font looks fine!

[denniseijpe]

I also have the font rendering issue, using Brave:

┌──────────────────────Hardware──────────────────────┐
 PC: XPS 15 9560
│ ├: Intel(R) Core(TM) i7-7700HQ (8) @ 3.80 GHz
│ ├: NVIDIA GeForce GTX 1050 Mobile [Discrete]
│ ├: Intel HD Graphics 630 @ 1.10 GHz [Integrated]
│ ├󱄄: 3840x1600 in 38", 75 Hz [External]
└────────────────────────────────────────────────────┘

┌──────────────────────Software──────────────────────┐
 OS: Omarchy 3.1.7
│ ├󰘬: master
│ ├: Linux 6.17.8-arch1-1
│ ├: Hyprland 0.52.1 (Wayland)
󱦟 OS Age: 57 days
└────────────────────────────────────────────────────┘

The rendering is the same as here: https://community.brave.app/t/font-suddenly-became-wobbly-uneven-and-letters-are-of-weird-sizes/642272/15 https://github.com/brave/brave-browser/issues/49195

Scaling was mentioned somewhere, the rendering does change based on zoom (left 100%, right 200% scaled down):

[maxguzenski]

Using the same monitor and hardware, do fonts look better on another operating system (Linux/Windows) at the same resolution?

@denniseijpe @diegonogueira The issue is that when you set the resolution scale to 2, the system gets two physical pixels to render each logical pixel, which makes everything sharper and better defined. With a 4K monitor you should scale to at least 1.5, and with 5K or 6K monitors you typically use a scale of 2. At 1:1 scaling the fonts tend to look worse, depending on the DPI of your display.

Some TTF fonts handle monitor scaling better than others. That might be what’s happening with the font used on Cursor’s website.

Besides monitor scale, you can try gnome-tweaks to test other fonts and filters OR you may can set a minimal font size inside brave/chrome.

My gnome-tweaks - font size 10, scale 1.06

[diegonogueira]

On Windows and other Linux distributions it works normally. I’ll also run some scaling tests. Thank you.

[denniseijpe]

I don't think it's due to scaling. Using the scale function of the browser, the font renders different, but not right. Still wobbly, just less wobbly. Using the scaling in the monitor configuration of hyprland, the wobbly rendering stays the same, just zoomed in.

It's on all my screens, also the internal laptop display.

[denniseijpe]

Did some more testing.

You can make it go away by using css:

text-rendering: geometricprecision;

And also by doing this:

1. Increase scale of monitor in monitors.conf
2. Restart brave

Fonts are fine.

3. Decrease the scale again to the scale you had before

Fonts are still fine. Untill you restart brave, then it's wobbly again.

I don't see it that often anymore on websites. Maybe it's just an edge case for some custom web fonts. The cursor docs website I used for the screenshot above is also fine now.