Browsers user propotional font for pre/code

Just looking at the examples at W3Schools Tryit Editor and W3Schools Tryit Editor, my browser is using Noto Sans, a proportional font, when it’s supposed to use a monospace font for those elements. Same result in both Firefox and Vivaldi.

Operating System: openSUSE Leap 15.5
KDE Plasma Version: 5.27.4
KDE Frameworks Version: 5.103.0
Qt Version: 5.15.8
Kernel Version: 5.14.21-150500.55.19-default (64-bit)
Graphics Platform: X11
Processors: 16 × AMD Ryzen 7 1700X Eight-Core Processor
Memory: 62.7 Gibyte of RAM
Graphics Processor: AMD Radeon RX 6500 XT

Just as information.

This is on Leap 15.4 with Firefox.

Firefox: says DejaVu Serif, DejaVu Sans and monospace.

Works as expected on your example pages (non-proportional format used for pre and code).

Actually, HTML standard says nothing about it. <pre> tag is about text flow (line breaks, white spaces). Mozilla developer documentation also says, “typically rendered using monospaced font”. I tried the first link in Chromium on 15.4 and it is using proportional width font as well. Edge on Windows seems to be using monospaced font for both source and rendered content :slight_smile:

Complicating the whole when falling back to the W3C definitions is that the examples used have a very basic DOCTYPE declaration. We have no idea what version of HTML is used.

Oh, yeah, so it does. Though even if I manually set font-family: monospace; I get Noto Sans. @hcvv, what font is it using according font tab in the inspector? Maybe I’m missing some font.

I had

   <family>Noto Sans</family>
   <family>Noto Color Emoji</family>

in .config/fontconfig/fonts.conf. If I remove that file it gets better. Not sure what writes that file, it was last modified half an hour ago.

Isn’t this file used/created by the desktop environment? As you are using KDE Plasma, check systemsettings font settings…Appearance->Fonts

Sorry, I am missing something. I use a Dutch environment and try to find in the Firefox menus something that looks like “inspector”, but fail.

What I said above is from Firefox > Actions (?) > Settings; scroll down to “Character types” and the advanced. (I tried to translate those items from my Dutch into English, hope you can find them).

@hui, I would have though so, but the file doesn’t get updated when I change the Plasma font settings.

@hcvv The inspector is the leftmost tab in the dev tools (F12, or ctrl+shift+c). Sorry, I though you were looking in the dev tools.

I was of course looking in the most obvious place to configure: Settings.

I did F12 (your suggestion) and got indeed a bunch of things in the lower part of the FF page. And I see there Inspector at top/left Click on it (no change, because it seems it was already selected), but it does not show a “font tab” as you suggested in post #4 above.

I am willing to give you information I can find, but I have no idea what area of my browser I now am exploring, so you should be very precise in what to click and where to look if you want me to provide something you need.

I have also no idea what it has to do with your problem. Is this not about the configured fonts (which I guess act as defaults when no other fonts are specified by the page, or not found to be available when specified)?

I thought that offering what I have here (not edited by me) might help in checking with your config.

On my system:

henk@boven:~> l .config/fontconfig/
total 20
drwxr-xr-x  2 henk wij  4096 Dec 26  2016 ./
drwx------ 34 henk wij 12288 Sep 12 14:05 ../
-rw-r--r--  1 henk wij   110 Dec 26  2016 rendering-options.conf

Thus not the file you seem to have.

Yeah, I misunderstood your original comment. I though it referred to what font-family was set for the element in the CSS styles, I didn’t know about that browser setting. What I was looking for was the font the browser has actually selected for the element on the page. And I guess I also assumed some familiarity with the dev tools, which I shouldn’t have.

Once you’ve opened the dev tools with F12, you can click the square icon with a cursor in it in the top left, and then click an element on the web page. You should now have the inspector tab selected and three panes visible under it. The left pane shows the selected element highlighted in the HTML markup, the middle panes shows the styles for the element, and the right pane has a bunch of tabs, the second-to-last one of which should be fonts (don’t know what it would be called in Dutch). It might be in an overflow menu if the pane is too thin (the arrow to the right of the tabs).

But anyway, that’s not needed anymore since it seems the aforementioned file is the culprit.

BTW, the basic <!DOCTYPE html> means it’s HTML5.

Thanks for the explanations.

It is indeed very short when this means HTML5. I am used to longer ones like