Question

I read that Adobe has released some free web fonts

The instructions say you need to import a script like this:

<script src="http://use.edgefonts.net/FOO.js"></script>

then you will be able to write CSS like this:

#foo {font-family: FOO, serif;}

What new sourcery is this?!?

What is this trick called, and what is the browser support like?

Answer 1

Let me introduce you to some CSS:

@font-face {
    font-family: 'Foo';
    font-weight: normal;
    font-style: normal;
    src: url("foo.eot");
    src: url("foo.woff") format("woff"), url("foo.ttf") format("truetype"), url("foo.svg#foo") format("svg");
}

p {
    font-family: Foo, sans-serif;
}

@font-face defines a web font and gives it some sources to try depending on what browser you’re using. the font-family property tells it what you want to call it later on.

Here’s the MDN Documentation for @font-face