Menu
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?
581
To add google fonts, search for the google fonts, select the font category and family, then select the font style of your choice. Once you select the font, “copy the font link”, from the “selected families windows” and paste it in the head section of the HTML file.
Replace the href attribute value with the one in the <link> tag snippet given by Google Fonts or other font foundries. This line of code loads the web font stylesheet asynchronously. It means that the browser starts downloading the stylesheet without blocking any other operations specified in the HTML code below.
Go to element panel ( Ctrl + Shift + p and type show element panel). Scroll to the head element right click on the element and choose Edit as HTML, go to the bottom of that element ( Ctrl + End ), add your <style></style> element there add your style in that element, and hit Ctrl + Enter .
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);
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.
In the Network panel you'll see a request for the font file.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
