Hacking Websites for Free Fonts
Exploiting some client-side HTML to get a font image
I needed to find and match a font but didn’t have access to the original source, only an image of a single letter. To make matters worse I needed a very high resolution version to send to a laser cutter. Fonts are inherently vetorized which enables us to change font size without suffering from any sort of aliasing or pixelation, so if I could get the original .ttf file I would be set. Runner up would be a super high resolution version of the original. First though I needed to identify the font style that I needed.
What the Font
After cleaning up the source image that I had I was left with a relatively small resolution version. Luckily WhatTheFont is pretty good at OCR and was able to return some candidate font styles.
Unfortunately after looking through all 78 results I wasn’t able to find the one I needed, but the internet never ends so I tried WhatFontIs.com. Results number 2 and 5 are a perfect match but they’re also not free. Two thumbs down.
Behind the Curtain
With the name of the font in hand I could expand my search, or at least narrow the search back on WhatTheFont. Lucky for me WhatTheFont lets me preview a font, to a point. I’m allowed to enter custom text and scale the font up to 240 points which is nice for previewing but won’t get me the giant letters that I need.
I started to wonder if maybe the font itself was embedded in the page that I was looking at. It’s clearly there in some capacity if I’m able to get a preview, so I started to poke around in the developer console to see how the page was being served. Firefox conveniently highlights the element of interest so I know what code block corresponds to what part of the page. Look at that! There’s a style tag that is suspiciously the same value as the maximum allowed font size.
style="height": 240px
I wonder what happens if I move the slider around. Can I see a change in the code that’s being served?
The developer window also lets you change values on the fly to see what your code looks like. If the slider on the website has an upper limit of 240, but under the hood it’s just populating the height tag I wonder if I can manually set it to anythign I want.
Sure enough, the site has the font loaded and because the font itself is vectorzied I’m able to input any value that I want and the page will render it. I still can’t get the source .ttf file, but with a large resolution version of the word that I need I can screenshot it, import it into GIMP, and create an SVG.