I figured this out after experimenting in Firefox a bit.
Easy sites (urwpp.de)
2. Finding a font
For this tutorial we will download the Amsterdamer Garamont font.
3. Finding a webfont
First find a page which contains the actual font, what we are looking for is a page which downloads the font as a webfont and displays it.
Usually this is done with a custom font preview but not always, some websites display images when you want to preview a font. This is fairly easy to check: try to select individual letters of the text with the mouse and if that's not possible it's an image.
In the case of our site there's a "Fontsampler" button which will open a popup where we can edit a textbox with the font, this way we are sure that the font is loaded.
4. Finding the webfont's url
Now the magic happens:
- Press right click on the editable textbox and click in the menu on "Inspect Element": this will open the same window as F12 but it focuses on the text area element.
- On the right side of the window a tab called "Rules" should be opened, press this and find the topmost item called
font-family(this time in the
.textareapart). Remember the name of the first item in quotes (
"..",) in the list. Hover over it to make sure it matches the font you want.
- Now open the "Style Editor" tab and find the name of your font in any of the
<inline>files with Ctrl-F. Look for the
font-familykey which is followed by a
src: url('..key. Now remember the part after the last
/(forward slash) and before the last
.(dot). In our example the url is for example
/WEB_SAMPLER1/g053013p.woff2so what we want to remember is
- Open the "Network" tab, press CTRL-F5 (force refresh) and find the name from the previous step which has the
200status (green circle). Right-click on it and press "Copy URL".
- Paste this URL in the title bar of the browser and download the file.
- If the extension of the file is
.woff2open this site and if it's
.woffopen this one. Press the "Pick Font File" button, select your downloaded font, press "Convert" and you've got your free TTF font!
Hard sites (fonts.com)
So you've decide that you want to download your favorite corporate font: Neue Plak Bold, but after following step 4.5 and copying the URL gives you a 403 Forbidden page, and you really need this font for your awesome PowerPoint® presentation about harvesting baby kidneys to satisfy the shareholders. Here's how to download it:
1. Downloading the base64 encoded file
When you clicked on the field in the "Network" tab to copy the URL select "Copy Response" instead. Open your favorite text editor, paste the text and safe it as
2. Converting the base64 file to a webfont file
Open your favorite terminal in the directory of
- On Linux:
base64 --decode font.b64 > font.woff2
- On Windows:
certutil -decode font.b64 font.woff2
.woff2 part should match the URL of the file in "Network".