Partial solutions that might be helpful for your use case...
My related use case
First, though, my related use case: I have an SVG file that renders text in a font named, say, "HAL Flex Sans". This isn't a base system font that came with my operating system, it's a user-installed font: I had to install it myself.
When I view the SVG in a web browser on my computer, the text in the SVG is correctly rendered in HAL Flex Sans.
Perhaps I've embedded a font definition in the SVG <style> element:
@font-face {
font-family: 'HAL Flex Sans';
font-style: normal;
font-weight: 400;
src: url(data:font/woff2;base64, ... ) format('woff2');
}
but how do I know whether the browser is using that embedded font or the font installed on my computer?
Or, perhaps I can see that someone else has published an SVG image on the web that requires HAL Flex Sans, without providing or referring to a font definition, but they're unaware that there's anything wrong; it looks okay to them, because they have HAL Flex Sans installed on their computer. And so do their close colleagues.
How can one test what the SVG looks like on a computer that doesn't have HAL Flex Sans installed, without actually having a separate physical computer to perform that test?
One solution is to create a virtual machine (VM) that has a web browser, but deliberately doesn't have HAL Flex Sans installed. In fact, I've used that solution. But there are other solutions that require less effort.
Solution 1: Disable user-installed fonts in Firefox
In Firefox (where the default font is, for example, Times New Roman):
- In the address bar, enter
about:config
- Accept the risk
- Change the value of the preference
layout.css.font-visibility.standard from 3 (also user-installed fonts) to 1 (only base system fonts)
- Reload the tab that contains the content to be tested
If text in the content to be tested is rendered in the default browser font (for example, Times New Roman), that's bad: it means the content is falling back on a font installed on your computer.
For details, see the chosen solution to the question "How to Block System Font Detection in Firefox?" on the Mozilla Firefox support forum.
Solution 2: Allow only whitelisted installed fonts in Firefox
I prefer solution 1. This solution can affect some browser UI text, such as address bar content and tab labels.
In Firefox:
- In the address bar, enter
about:config
- Accept the risk
- Add the string-valued preference
font.system.whitelist
- Set the value of
font.system.whitelist to the name of a locally installed font that looks very different to the font in question
- Reload the tab that contains the content to be tested (for example, the SVG image)
If text in the content to be tested is rendered in the whitelisted font, that's bad: it means the content is falling back on a font installed on your computer.
