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 have the .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.
Open chrome
Right click => inspect => navigate to application tab
In Frames section, all the statically available assets(resources) such as css, JavaScript, fonts are listed.
is to actaully go to 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 want and open in a new tab. Then you can add a .woff at the end and use it anywhere. (you can check its extension on the bottom of the preview too)
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.