Q. I purchased a font. How can I use it on my web pages?
A. The following page provides an example using a free font. The procedure is the same.
The nice folks at GoLang, the starting point for all things regarding the go programming language, have made a new font available for use with their UI Toolkit and decided it was good enough to openly license to all users.
Deciding that my local documentation collection, all html, could use a good local font I had to figure out how to make Go font available to my web pages. While there are other examples showing how it's been done by others none of them explained the why of the how.
CSS3 defines a directive, @font-face, which has been back-ported to CSS2, to make new fonts available to a page. This is easily accomplished by defining stanzas describing fonts and their properties and including them in <style> sections or in stylesheets.
Everyone who has ever used a stylesheet is familiar with the terms "font-family", "font-size", "font-weight", and "font-variant". These properties have correspondents that are specified in your font-face declarations, too.
Sometimes an example is the easiest way to show how to do it. We'll use Go's ten truetype fonts for ours. They are:
Here are their associated @font-face declarations:
@font-face {
font-family: 'Go';
font-style: normal;
font-weight: normal;
src: url('Go-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Go';
font-style: italic;
font-weight: normal;
src: url('Go-Italic.ttf') format('truetype');
}
@font-face {
font-family: 'Go';
font-style: normal;
font-weight: bold;
src: url('Go-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Go';
font-style: italic;
font-weight: bold;
src: url('Go-Bold-Italic.ttf') format('truetype');
}
@font-face {
font-family: 'Go-Medium';
font-style: normal;
font-weight: normal;
src: url('Go-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Go-Medium';
font-style: italic;
font-weight: normal;
src: url('Go-Medium-Italic.ttf') format('truetype');
}
@font-face {
font-family: 'Go-Mono';
font-style: normal;
font-weight: normal;
src: url('Go-Mono.ttf') format('truetype');
}
@font-face {
font-family: 'Go-Mono';
font-style: italic;
font-weight: normal;
src: url('Go-Mono-Italic.ttf') format('truetype');
}
@font-face {
font-family: 'Go-Mono';
font-style: normal;
font-weight: bold;
src: url('Go-Mono-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Go-Mono';
font-style: italic;
font-weight: bold;
src: url('Go-Mono-Bold-Italic.ttf') format('truetype');
}
The font-family attribute could have any value you choose but personally I prefer to keep it close to the actual font family name. Here though, I did name Go-Regular @font-face declarations just Go, leaving me with "Go, Go-Medium, and Go-Mono". It's pretty straight forward that way.
All ten of these have been placed into a file called, surprise, font-faces.css (could have been any name) and saved into /usr/share/fonts/truetype/go/ttfs next to the fonts themselves (could have been anywhere). The src url path must be relative to the location where the font-face is declared or absolute. Note the src line's format option: font types are not limited to truetype but may include others such as eot, woff, and woff2.
Ok, how do I make these fonts available to my page? Just include an @import declaration early in an included stylesheet or in the <style> declarations section of your page, BEFORE any style rules have been declared.
@import '/usr/share/fonts/truetype/go/ttfs/font-faces.css';
Those fonts can now be used by declaring a style rule referencing them. e.g.
body {
font-family: 'go-mono';
font-weight: bold;
font-style: italic;
}
which would use Go-Mono-Bold-Italic.ttf.
To make these fonts available to internet facing pages your chosen fonts must made available somewhere under your webserver's document root and the @import line must also point to a web accessable file. Only include the fonts you are going to use in your page in your @font-face declarations: font files are heavy!
There is no requirement that @font-face directives be placed in a separate file and @imported. Everything done above could have been done directly in a stylesheet or a <style> block.
Remember that font owners are very protective of their ownership rights. Use only fonts for which you have a license or fonts that have been made available for public use without a purchased license.