Test webpage in an environment without system fonts

Question

How can I test a webpage on my own machine as if I didn't have a certain font?

E.g. My web page uses the font Roboto. My computer has the Roboto font installed locally. How can I see what this webpage will look like on a computer without that font installed?

Assume that the font isn't included in the web page through some CDN or other method.

Build a virtual machine using virtualbox to do testing with? You can install an OS, snapshot it, mess with it anyway you need to for various testing, then just restore the snapshot to reset. — Dave, Jan 12 '17 at 06:20

score 11 · Accepted Answer · answered Jan 12 '17 at 08:31

11

Deactivate or uninstall the font temporarily or alter the stylesheet to not include the declaration when requested from localhost.

answered Jan 12 '17 at 08:31

kontur

4,934
2
36
62

3

Seems like you were one of the few to understand my question... I just did a quick search - in Windows, if you go to Fonts in Control Panel, selecting an active font should give you a 'Hide' option, which will temporarily disable the font from the system. Exactly what I need. – Alan Thomas Jan 12 '17 at 15:30
Similarly on macOS in the `Font Book.app` utility you can right-click to disable a font as in https://photos.app.goo.gl/9U7v9KdtCwZ3awfm8 – Michael Jan 13 '21 at 15:31

score 4 · Answer 2 · answered Jul 02 '20 at 06:09

Rename the font family in your CSS, so instead of defining the font family like this -

@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto.eot');
src: url('../fonts/roboto.woff') format('woff'), 
     url('../fonts/roboto.ttf') format('truetype'), 
     url('../fonts/roboto.svg') format('svg');
font-weight: normal;
}

Which will use system font if Roboto is installed, Change it to something like this -

@font-face {
font-family: 'Roboto_web'; //notice the name here
src: url('../fonts/roboto.eot');
src: url('../fonts/roboto.woff') format('woff'), 
     url('../fonts/roboto.ttf') format('truetype'), 
     url('../fonts/roboto.svg') format('svg');
font-weight: normal;
}

So the font Roboto_web is something which is not installed in your system so it will always use web font. This way you will not have to uninstall or disable it from system.

And in the CSS you can use it like this-

.sample_class{font-family:"Roboto_web"}

score -1 · Answer 3 · answered Jan 12 '17 at 11:59

-1

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Add this into your head.

answered Jan 12 '17 at 11:59

Tobias Glaus

3,008
3
18
37

1

This is answering a completely different question - he asked how to test what a website would look like when accessed by a computer that doesn't have the font installed locally, not how to install a webfont. – W Biggs Nov 24 '20 at 21:10

Test webpage in an environment without system fonts

3 Answers3