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

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)