How to view a page without third-party fonts?

Question

css

There are many fonts installed on the computer, and web pages with third-party fonts look fine even if the font in CSS is not included. Because of this, a lot of problems arise when, for example, my page looks as it should, and half of the site is displayed to visitors with the standard Times New Roman.

Real life example: in the project, the imported font has the name opensans , and out of habit I specify Open Sans , the browser cannot find a font with that name, and substitutes the standard one. There are no 404s in the code inspector (because the font is connected and the files are found), everything is displayed as it should be (Open Sans is installed), but visitors see the default Times New Roman.

Is it possible to somehow recognize such problematic places where font-family refers to an existing (unconnected) font? How can I detect fonts that need to be included in styles, or that are included in the wrong way? Are there any plugins that allow me to see on localhost what a web page would look like if only a standard set of fonts were installed on my computer?

Answer 1

https://addons.mozilla.org/en-US/firefox/addon/doc... - switches the site display mode to use fonts that are on the user's system (according to font-family)
https://chrome. google.com/webstore/detail/disable-... - Disables web fonts in Chrome.
In firefox, the same can be done via about:config by switching the setting to false
gfx.downloadable_fonts.enabled

Answer 2

Well, it's still logical, in font-face the font-family property should have an arbitrary font name, and not its own as in the system. For example, the name of the font is Open Sans, and you name it font1.

Answer 3

Test on an empty virtual machine, where there are only standard fonts and a browser