How to turn off local fonts to test google fonts?

Question

Prior art:

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:

I'd rather refer to fonts by correct name.
It doesn't work with inline fonts via stylesheet like how Google serves fonts.

So, anyone know how?

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 ``, which is by far the easiest to work with. — Mike 'Pomax' Kamermans, Oct 19 '15 at 22:08

score 29 · Accepted Answer · edited May 13 '20 at 02:41

29

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

edited May 13 '20 at 02:41

jon_wu

1,113
11
26

answered Nov 16 '16 at 01:46

Michael

338
4
3

8

And if you're on Windows? – OsakaWebbie Oct 01 '20 at 15:14
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. – Mike Apr 22 '23 at 11:52

score 10 · Answer 2 · answered Oct 11 '20 at 21:50

10

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

Open DevTools
Click the three dots in the top right
Select More tools > Rendering
Check Disable local fonts
Refresh the page

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

answered Oct 11 '20 at 21:50

David Wheatley

426
6
16

19

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](https://community.coreldraw.com/talk/coreldraw-graphics-suite-2019/f/coreldraw-graphics-suite-2019-for-windows/63222/export-to-svg-embeds-fonts-in-deprecated-svg-font-format-no-longer-supported-by-most-browsers), 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. – Graham Hannington Nov 19 '20 at 08:16
I tried this but didn't work, I had to disable the font from the system – aeron13 May 30 '23 at 13:16

score 1 · Answer 3 · answered Sep 22 '20 at 11:28

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")
}

score 0 · Answer 4 · answered Aug 16 '23 at 03:24

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

How to turn off local fonts to test google fonts?

4 Answers4