How to load new font using Chrome Developer Tools?

Question

Chrome Developer tools is great for editing CSS.

Is there a way to load in a new font from the Chrome Developer Tools, without having access to change the source code on the server?

I would like to be able to load in new fonts and try them out from the Chrome Developer Tools.

Answer 1

In Chrome Developer Tools go to Sources and open your css file. Add @import url(...); in the beginning of the file to import the new font and then change the css to use that font family:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
  font-family: "Open Sans", sans-serif;
}