why this font has such a nice rendering?

Question

through this question I found out how to find the fonts' name which are used in design of web pages(thanks everyone)

but my question is that I have never installed such a font(in this case: 'Freight Sans Bold') on my pc; then how is it possible that this website render this font with this much quality while I even don't have this font in the first place?

as far as I know, when the described font is not present on the target system, then some substitute fonts(commons like tahoma,...) will be used; but what about this case?

Answer 1

There is a 'font-face' rule in the CSS which defines Freight Sans Bold, and can define the font there and then or supply a URL from which it can be downloaded. In this case the definition of the font is embedded so no further network request needs to be made. You can see it if you inspect the CSS in Firebug or similar:

@font-face {
    font-family: "Freight Sans Bold";
    font-style: normal;
    font-weight: normal;
    src: url("data:font/opentype;base64,T1RUTwAJA....