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.

Answer 1

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

Answer 2

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