How to steal a font from a site

Question

I know the question itself is illegal - asking to steal someone's home. :)

Anyways, it's a situation when a developer's logic is not working actually. With Browser's Developer Tool, I got the site's CSS. I located the @font-face code inside the main.css.

Here's what I got:

main.css:
path: http://www.example.com/assets/css/main.css
code:

@font-face {
  font-family: 'the_font';
  src: url("../fonts/fontname/fontname.eot");
  bla bla
  font-style: normal;
  font-weight: normal;
}

So, according to the code the font file is in a folder named "fontname" under the "fonts" folder. And from the path's direction we can guess that the font's location is:

http://www.example.com/assets/fonts/fontname/fontname.eot

But it's generating a 404 page.

Why NOT the path's logic is working?

Answer 1

Supposing the CSS file isn't bad (i.e. the font really is loaded). You may use the developper tools of your browser.

For example in Chrome : hit F12 to open the developer tools and then select the Network or Resources tab and reload the page. You'll see the font file listed.

Answer 2

I use multiple tools for extracting Css, depending on the website.

Specifically for fonts, this tool works amazing: FontfaceNinja - comes with 3 browser extensions to pick from.

But sometimes is not enough: CssViewer is another option, nice design, easy to use, it extracts only the Css for the element hovered - almost the same as Chrome Developer Tools, But much more readable in my opinion. It's a Chrome extension only. Install it from here: CssViewer

The tool i use the most for this job is CSSSteal, it gives the same level of details as chrome developer tools, cascading of styles from parent to it's child - all that, but because you can easy copy and paste the Css, is much easier to use for this purpose then the default Developer Tools. Good tool for complex Css migrations.. when the fonts and other css properties override each other like crazy.. get it form here: CssSteal Note: After installation of CssSteal, restart the browser - then make sure you open the Tab that contains the Styles (on the right) - not the Elements one - as you can see above. Hope that helps :)

Answer 3

The best way so far

You can actaully do rightclick: inspect > Application (on the top tabs) > Frames (scroll on the left tabs) Then you can find a Font section where all loaded fonts are listed. It lists all that are loaded in any possible secure way.

Further more, It also previews them on the right, to make it even easier

Then you can right-click on the one you chose and click open in a new tab, and it downloads it. Then you can add a .woff at the end of the filename and use it anywhere. (you can check its extension on the bottom of the preview too)