If you’d like to use a font in your website that isn’t already included on most computers, you can import them using @font-face in your CSS. In the following example, I’m importing the Lucida Grande font. The first block is for the normal font weight and the second is for bold. If a visitor already has the Lucida Grande font on their computer, the website will automatically use it instead of download the fonts from ../fonts into their browser’s cache. This is done by specifying the “local” commands. Notice that the fonts have unusual extensions like .eot, .woff, etc. These are web fonts and you can use free web-based web font kit generators to create them such as the one at http://www.fontsquirrel.com/fontface/generator.
[cc lang=”html”]
@font-face{
font-family: “Lucida Grande”;
font-weight:normal;
src: url(‘../fonts/lucida_grande-webfont.eot’);
src: local(‘Lucida Grande Regular’), /* name of local font file */
local(‘LucidaGrande-Regular’), /* file name of local font */
url(‘../fonts/lucida_grande-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/lucida_grande-webfont.woff’) format(‘woff’),
url(‘../fonts/lucida_grande-webfont.ttf’) format(‘truetype’),
url(‘../fonts/lucida_grande-webfont.svg#webfont’) format(‘svg’);
}
@font-face{
font-family: “Lucida Grande”;
font-weight: bold;
src: url(‘../fonts/lucida_grande_bold-webfont.eot’);
src: local(‘Lucida Grande Bold’),
local(‘LucidaGrande-Bold’),
url(‘../fonts/lucida_grande_bold-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/lucida_grande_bold-webfont.woff’) format(‘woff’),
url(‘../fonts/lucida_grande_bold-webfont.ttf’) format(‘truetype’),
url(‘../fonts/lucida_grande_bold-webfont.svg#webfont’) format(‘svg’);[/cc]
To use this font in your CSS, you would specify font-family as
[cc lang=”html”]
font-family: “Lucida Grande”, Helvetica, Arial, sans-serif;[/cc]