How to turn off local fonts to test google fonts?

Question

Prior art:

• Can I disable my local font in chrome?

• https://superuser.com/questions/292666/how-to-disable-permission-to-read-system-fonts-and-browser-plugin-details-in

Is there a way to disable system fonts temporarily in any browser?

The only solution I can find is to name the font something that doesn't collide with local fonts. I don't like that solution cause:

1. I'd rather refer to fonts by correct name.

2. It doesn't work with inline fonts via stylesheet like how Google serves fonts.

So, anyone know how?

Susceptible

1) why? @font-face { font-family: main; src: local(...); } is perfectly fine, and means you don't have to change a million font-family instances just because because you decide to switch font. It is, in fact, good practice. 2) google serves fonts in several ways, including as normal CSS <link rel="stylesheet">, which is by far the easiest to work with. – Tropho

1) To test performance, for example. – Braided

Answer 1

If you are on a Mac just open up the 'Font Book' app and disable the font.

Exalted

And if you're on Windows? – Persons

This doesn't work with Apple-installed fonts so isn't a good solution for some fonts that may not be installed on non-Apple systems. – Squalene

Answer 2

From Chrome 86, you can now disable local fonts in DevTools.

1. Open DevTools
2. Click the three dots in the top right
3. Select More tools > Rendering
4. Check Disable local fonts
5. Refresh the page

This will ignore all local(...) sources in CSS @font-face rules.

Comradery

Unfortunately, this Disable local fonts option does not do what I expected it to do at first, before I read the detail. For my use case, I want to stop Chrome (or any modern browser, for that matter) using fonts that are installed on the local computer: Ignore installed fonts. This isn't it. – Gena

I tried this but didn't work, I had to disable the font from the system – Inspiratory

Answer 3

Rather than renaming the font-family, I would just omit or comment out the local() function call in your src descriptor. Without it, the browser will always load the font file(s) specified in your url() function(s).

@font-face {
    font-family: "My Font";
    font-weight: 400;
    font-style: normal;
    src:
        /* --> local("My Font") <-- */
        url("/my-font.woff2") format("woff2"),
        url("/my-font.woff") format("woff")
}

Hachmann

Answer 4

Is there a way to disable system fonts temporarily in any browser?

Yes.

In Firefox, use one of the following preferences:

• layout.css.font-visibility.standard
• font.system.whitelist

For details, see my answer to the question "Disable installed fonts from system in browser".

Gena