Now widely-supported in the range of non-Microsoft-authored browsers, the @font-face CSS rule allows authors to specify a non-standard font within their CSS, pointing to the font file on their (or someone else’s) server.
At its most basic:
@font-face {
font-family: "My Friendly Font Name";
src: url("/fonts/font-file.otf")
}
a {
font-family: “My Friendly Font Name”, arial, sans-serif;
}
Used as above, the result would be that the client-side agent would download and use the font specified within the @font-face rule. For non-supporting browsers, there are some backup font selections.
The major issue with the above is one of copyright; placing your font online and referencing it within your code effectively makes the font publically available, and if you had to buy a license to use your font, you probably don’t have the right to re-distribute it for free. For this reason, it’s prudent to only use open-source fonts in this manner.
Tweet
