how do i download/extract font from chrome developers tools

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


how do i download/extract font from chrome developers tools



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 are in .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.



enter image description here




6 Answers
6



Right-click, then "Open link in new tab"



edit : you can also double-click, it has the same effect





it says forbidden
– Muhammad Umer
Dec 20 '13 at 22:01





Indeed, in your particular example it seems the server returns a 403 - Forbidden response to the request initiated by the action. Anyway, I was able to save the fonts by exploring chrome cache at chrome://cache. Search "woff" then "Right-click / Save link as..."
– Michael P. Bazos
Dec 20 '13 at 23:09




403 - Forbidden


chrome://cache





i am able to get woff file now but it seems it's not working and it gives error if converted to ttf/oft type too.
– Muhammad Umer
Dec 21 '13 at 2:39







I realized that the saved file contains also the meta-informations useful to Chrome. So as to get only the payload you can try the freeware ChromeCacheView.
– Michael P. Bazos
Dec 21 '13 at 13:11





is there a way in this program to save file and not just save its information as that's whats happening. Also normally woff fonts type appear as 'font/woff' whereas the one i want has its type appears as 'application/x-font-woff'
– Muhammad Umer
Dec 21 '13 at 17:36



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.


Ctrl+Shift+i



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.



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.


chrome://cache



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 > file.woff.gz to convert it back to a binary file and gunzip file.woff.gz for decompression.


00000000: ...


file.txt


xxd -r file.txt > file.woff.gz


gunzip file.woff.gz



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.



It's easy (For Chorme only)


.woff


.woff





The only solution that worked for Squarespace.
– PJ Brunet
Oct 19 '17 at 6:16





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.



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.






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

Arduino Mega cannot recieve any sketches, stk500_recv() programmer is not responding

Image
Clash Royale CLAN TAG #URR8PPP Arduino Mega cannot recieve any sketches, stk500_recv() programmer is not responding Yesterday we were trying to update the firmware of our 3D-printer a Tevo Tarantula i3 The printer was running Marlin 3D Printer Firmware. We installed a new module a TL-Touch Sensor, a chinese copy of the Bl-Touch an auto bedleveling touch sensor for a 3D printer. After re-configurating a new version of the firmware for our setup in the Arduino IDE we went on with uploading the sketch to the Arduino Mega that was controling our 3D printer. Before we started uploading we made sure the right COM-port was selected in the Arduino IDE and that also the right type of Arduino was selected. The Arduino Mega 2260. Then we started with compiling the firmware and then uploading it to the Mega, Somewhere in between that moment the IDE freezed and crashed. As a response we removed the USB cable that was connected from the PC uploading the firmware onto the Arduino Mega, (This was a st...
Read more

Visual Studio Code: How to configure includePath for better IntelliSense results

Image
Clash Royale CLAN TAG #URR8PPP Visual Studio Code: How to configure includePath for better IntelliSense results so I am a complete beginner to using Visual Studio Code and I have no clue what I am doing. I've searched around (maybe not enough), but I cant find just a simple explanation for someone like me on how to configure the c_cpp_properties.json file that I am redirected to whenever I click on the yellow lightbulb next to a line that is underlined with a green squiggle. Lightbulb example c_cpp_properties.json I just want to know what to put in the .json to make IntelliSense work properly This question has answers that may be good or bad; the system has marked it active so that they can be reviewed. 2 Answers 2 From: https://code.visualstudio.com/docs/languages/cpp Below you can see that the MinGW C++ include path has been added to browse.path for Windows: { "name": "Win32...
Read more

C++ virtual function: Base class function is called instead of derived

Image
Clash Royale CLAN TAG #URR8PPP C++ virtual function: Base class function is called instead of derived I have following code snippet: using namespace std; class base { public: virtual void print(char a){ std::cout<<" Base "<<std::endl;} }; class derived :public base { public: void print(floata) {std::cout<<" Derived "<<std::endl;} }; int main() { base* d = new derived; d->print(1.5); return 0; } Output is "base" Why output is coming from base function and not from derived one By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Read more