CODEWITHSUNDEEP
google-chrome-devtools
Sean Kelly
Sean Kelly

Reputation: 991

Is there a way to load Google Fonts into Devtools

I know I can import the font I would like to use into the CSS file with the Devtools open. It just seems like a no-brainer for Google to have their massive Fonts library linked to Devtools. Is there a way to do this?

Upvotes: 7

Views: 2589

Answers (2)

varman
varman

Reputation: 8894

The answer is too old, but this might help others. Type in console following code, then you can use it in Element>styles

var link = document.createElement('link');
link.href = "https://fonts.googleapis.com/css?family=Roboto";
link.rel = "stylesheet";
document.body.prepend(link);

Upvotes: 5

Kayce Basques
Kayce Basques

Reputation: 25907

Select an element in Elements panel > DOM Tree and press F2 to edit the <head> tag of your HTML. From there, just add the <link> tag to your HTML. Press Command+Enter (Mac) or Control+Enter to save your changes.

editing HTML

In the Network panel you'll see a request for the font file.

network request for font file

Upvotes: 3

Related Questions