Search code examples
cssgoogle-chrome-devtoolswebfontsgoogle-webfonts

How to use a web font in dev tools (Chrome)

I tend to update fonts with the dev tools to quickly test which font's to use on websites. Is it possible to use a web-font, that is not already imported by the source html file, via the dev tools? I tried searching for a solution but couldn't find any?

For example, if I go to any site and wanted to try Open Sans (google font), is it possible to test this font on the site by using the dev tools, or is the only way to do this is by updating the CSS with a @font-face ruleset?

Solution

  • For the ones who are also looking into doing this, you can go into the sources tab in the dev tools, open up the css file and add the web-font there to test and use it. Similar to the text below

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

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