How do I download extract font from chrome developers tools

Question

I have tired many things but i can t get it even though my computer has it  How can I access this wont files  They have the  woff extension  Double clicking them in chrome  inspector just takes to some url  Which doesn t work  Nor this font is installed on my computer  This is in fact first time in my life I have come across woff format and the concept web open format  I want to download the font website is using  I know I can download the images why not wont

User · Answer

Open chrome   Right click    inspect    navigate to application tab  In Frames section  all the statically available assets resources  such as css  JavaScript  fonts are listed

User · Answer

Although Marcelo s solution seems to be working great  you may not need to download the font at all  Just link to it remotely   E g the font is hosted on example com  do   font-face     font-family   Font Name     font-style  normal    src  url http   example com webfonts font-name woff       You may easily figure out the direct url to the font by looking into css code from example com and see how they linked the file

User · Answer

It s easy  For Chorme only    Right click   inspect element Go to  Resources  tab  and find  Fonts  in dropdown folders    Resouces  tab may be called  Application   Right click on font  in  woff format    open link in new tab  this should download the font in  woff format Find a  Woff to TTf or Otf  font converter online Enjoy after conversion

User · Answer

Right-click  then  Open link in new tab   edit   you can also double-click  it has the same effect

User · Answer

To get  woff fonts first open the chrome dev tools panel  Ctrl Shift i  go to Network and reload the page  There you will see everything the page downloads  Find the  woff file  right click and select Copy response   The response will be a url so paste it in the navigation bar  A file will be downloaded  just add the  woff extension to it and voila

User · Answer

If you are on a unixoid operating system and want to extract just a single file you can try the following  The structure of the chrome   cache pages is URL  parsed HTTP header  hex dump of the HTTP header and then hex dump of the payload   To extract a file copy all payload lines from a Chrome cache page to the clipboard  starting at the second 00000000      line   paste them into a text editor and save them as a plain text file  e g  file txt   If the payload is a gzipped WOFF file use xxd -r file txt  gt  file woff gz to convert it back to a binary file and gunzip file woff gz for decompression   You can then use woff2otf to convert WOFF files to the OTF format or woff2 to convert WOFF 2 0 files to the TTF format  For batch processing this workflow should obviously be scripted

User · Answer

I found the Chrome option to be OK but there are quite a few steps to go through to get to the font files  Once you re there  the downloading is super easy  I usually use the dev tools in Safari as there are fewer steps  Just go to the page you want  click on  Show page source  or  show page resources  in the Developer menu  both work for this  and the page resources are listed in folders on the left hand side  Click the font folder and the fonts are listed  Right click and save file  If you are downloading a lot of font files from one site it may be quicker to work your way through Chrome s pathway as the  open in tab  does download the fonts quicker  If you re taking one or two fonts from a lot of different sites  Safari will be quicker overall

[fonts] How do I download/extract font from chrome developers tools?

Examples related to fonts

Examples related to google-chrome-devtools