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.
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
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.
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).
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.
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.
