Locate custom fonts on the Web. In addition to acquiring and using fonts installed with other applications, you can download fonts from the Internet. Some fonts on the Internet are sold commercially, some are distributed as shareware, and some are free. On the Mac you use the Font Book to add the font and then copy it to the Windows Office. At the bottom, under Preserve fidelity when sharing this presentation, select the Embed fonts in the file check box. Selecting Embed only the characters used in the presentation reduces the file size but limits editing of the file using the same font. Leaving that check box blank increases the file size, but is best for allowing others to edit the document and keep the same font.
- The CSS @font-face Rule. Web fonts allow Web designers to use fonts that are not installed on the user's computer. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems. OpenType Fonts (OTF) OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark.
- Category Mac OS fonts. Please contact us or report DMCA via email: [email protected].
The CSS @font-face Rule
Web fonts allow Web designers to use fonts that are not installed on the user's computer.
When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your 'own' fonts are defined within the CSS
@font-face
rule.Different Font Formats
TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.
OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.
The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.
The Web Open Font Format (WOFF 2.0)
TrueType/OpenType font that provides better compression than WOFF 1.0.
SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.
Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
Browser Support for Font Formats
The numbers in the table specifies the first browser version that fully supports the font format.
Font format | |||||
---|---|---|---|---|---|
TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE: The font format only works when set to be 'installable'.
Using The Font You Want
In the
@font-face
rule; first define a name for the font (e.g. myFirstFont) and then point to the font file.Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the
font-family
property:Example
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Try it Yourself »font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Using Bold Text
You must add another
@font-face
rule containing descriptors for bold text:Example
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Try it Yourself »font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
The file 'sansation_bold.woff' is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family 'myFirstFont' should render as bold.
This way you can have many
@font-face
rules for the same font.Test Yourself with Exercises!
CSS Font Descriptors
The following table lists all the font descriptors that can be defined inside the
@font-face
rule:Descriptor | Values | Description |
---|---|---|
font-family | name | Required. Defines a name for the font |
src | URL | Required. Defines the URL of the font file |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Optional. Defines how the font should be stretched. Default is 'normal' |
font-style | normal italic oblique | Optional. Defines how the font should be styled. Default is 'normal' |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Optional. Defines the boldness of the font. Default is 'normal' |
unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is 'U+0-10FFFF' |
Safe web fonts
A very nice discussion of the history of typefaces is taken fromhttp://www.xnet.se/xpo/typetalk/ and archived here.
Another font comparison pageis here,archived here. The same site hasmore excellentinformation about fonts here,archived here.
Another document cross-linking fonts is here.
The fonts that are most safe to use are:
Other options that usually work cross-platform are:
- Palatino
- Garamond
- Bookman
- Avant Garde
Fonts that work on Windows and MacOS but not Unix+X are:
- Verdana
- Georgia
- Comic Sans MS
- Trebuchet MS
- Arial Black
- Impact
Common sans-serif fonts
Helvetica is the granddaddy here, but Arial is more common onmodern OS's.
Helvetica
ABCDE abcde 012345 &*!,.
Helvetica is a sans-serif font. It is a good choice for shorttext, perhaps a paragraph or two in length. Unix and Macintoshcomputers have had always had Helvetica, and it is a native fonton PostScript printers.
Helvetica is a sans-serif font. It is a good choice for shorttext, perhaps a paragraph or two in length. Unix and Macintoshcomputers have had always had Helvetica, and it is a native fonton PostScript printers.
Arial
ABCDE abcde 012345 &*!,.
Arial is near-copy of Helvetica, updated slightly. Windows usesArial in place of Helvetica.
Arial is near-copy of Helvetica, updated slightly. Windows usesArial in place of Helvetica.
Common serif fonts
Times is the grand-daddy of serif fonts, but Times New Roman ismore common on recent OS's.
Times
ABCDE abcde 012345 &*!,.
Times (also called Times Roman) is the traditional seriffont. It is available on Macintosh and Unix computers, and is acore PostScript font. Times was designed for use as newspapercolumn text. It has a small size, compared to most other fonts.
Times (also called Times Roman) is the traditional seriffont. It is available on Macintosh and Unix computers, and is acore PostScript font. Times was designed for use as newspapercolumn text. It has a small size, compared to most other fonts.
Times New Roman
ABCDE abcde 012345 &*!,.
Times New Roman is Microsoft's version of Times. It is availableon Windows computers, and most Macintosh computers.
Times New Roman is Microsoft's version of Times. It is availableon Windows computers, and most Macintosh computers.
Common monospace fonts
Designed to mimic typewritten output, these fonts are often usedwhen writing code. Courier is the grand-daddy, while most recentOS's have Courier New.
Courier
ABCDE abcde 012345 &*!,.
Courier is the traditional monospace font. It is available onMacintosh and Unix computers, and is a core PostScript font.
Courier is the traditional monospace font. It is available onMacintosh and Unix computers, and is a core PostScript font.
Courier New
ABCDE abcde 012345 &*!,.
Courier New is Microsoft's version of Courier. Most Windows andMacintosh computers will have Courier New.
Courier New is Microsoft's version of Courier. Most Windows andMacintosh computers will have Courier New.
Less-common sans-serif fonts
Verdana is popular, but still new to the scene. Tahoma's styleis half-way between Verdana and Arial. Comic Sans MS is oftenliked for its informal feel. Avante Garde is big and spacious.Impact and Arial Black are both designed for titles andheadings. All of the fonts in this section suffer from theproblem that most Unix machines don't have the fonts.
Verdana
ABCDE abcde 012345 &*!,.
From around 2000 until mid-2002, Microsoft distributed a set ofWeb-optimized fonts, for free use. They have stopped allowingdownloads, but still ship the fonts with Windows. Verdana is asans-serif replacement. Its lowercase letters are very large,compared to the overall size of the font, which makes text easyto read on the web.
From around 2000 until mid-2002, Microsoft distributed a set ofWeb-optimized fonts, for free use. They have stopped allowingdownloads, but still ship the fonts with Windows. Verdana is asans-serif replacement. Its lowercase letters are very large,compared to the overall size of the font, which makes text easyto read on the web.
Unfortunately, the stretching of Verdana lowercase letters hastwo drawbacks. One issue is that the stretched letters don'tlook quite right when printed—compare them to Arial, forexample. The other problem is that some people don't have theVerdana font, and these people may have trouble reading a webpage that uses Verdana. The problem is that while 9 ptVerdana is readable, 9 pt Arial is not readable, and aperson who doesn't have Verdana will probably have their webbrowser choose Arial as the substitute font.
Tahoma
ABCDE abcde 012345 &*!,.
Tahoma is another of Microsoft's web fonts. It is not as widelyavailable as Verdana or Arial are.
Tahoma is another of Microsoft's web fonts. It is not as widelyavailable as Verdana or Arial are.
Arial Black
ABCDE abcde 012345 &*!,.
Arial Black is a version of Arial designed for headlines.
Arial Black is a version of Arial designed for headlines.
Comic Sans MS
ABCDE abcde 012345 &*!,.
Comic Sans MS is a sans-serif font with a soft, rounded style.
Comic Sans MS is a sans-serif font with a soft, rounded style.
Impact
ABCDE abcde 012345 &*!,.
Impact is a Microsoft Web font, designed for headlines.
Impact is a Microsoft Web font, designed for headlines.
Avant Garde
ABCDE abcde 012345 &*!,.
Avant Garde or Century Gothic. HP Printers call this AvantGarde Gothic.
Avant Garde or Century Gothic. HP Printers call this AvantGarde Gothic.
Free Fonts For Pages Mac
Less-common serif fonts
Georgia is a web-optimized serif font, but is still a newcomer.Palatino is as old and established as Times is, butlooks terrible on recent Unixsystems. Century Schoolbook, Garamond, and Bookman seem to beavailable on Unix systems, but I am not sure how widespread theyare on Windows/Mac systems.
Georgia
ABCDE abcde 012345 &*!,.
Georgia is a Microsoft Web font. It has serifs but also haslarge lowercase letters, similar to Verdana. It is a nicelyreadable screen font, but has the same problems that Verdanadoes: it looks bad when printed, and paged designed for Georgiawill look bad if rendered in Times, because of the difference inletter size.
Georgia is a Microsoft Web font. It has serifs but also haslarge lowercase letters, similar to Verdana. It is a nicelyreadable screen font, but has the same problems that Verdanadoes: it looks bad when printed, and paged designed for Georgiawill look bad if rendered in Times, because of the difference inletter size.
Palatino
ABCDE abcde 012345 &*!,.
Palatino is a less-commonly used serif font. It is available onMacintosh and Unix computers, and is a core PostScript font. Itis available on Windows computers under alternate font names.
Palatino is a less-commonly used serif font. It is available onMacintosh and Unix computers, and is a core PostScript font. Itis available on Windows computers under alternate font names.
Palatino was originally designed as a display font—forexample, to be used in lettering on signs. Nevertheless, itis commonly used to set body text.
Bookman
ABCDE abcde 012345 &*!,.
Bookman, also called Bookman Old Style.Not shipped with WinXP. Shipped with MS Office 2000.
Bookman, also called Bookman Old Style.Not shipped with WinXP. Shipped with MS Office 2000.
Garamond
Web Safe Fonts For Mac And Pc
ABCDE abcde 012345 &*!,.
Garamond. There are a lot of variants of this font.Not shipped with WinXP.
Garamond. There are a lot of variants of this font.Not shipped with WinXP.
Century Schoolbook
ABCDE abcde 012345 &*!,.
Century Schoolbook is a core postscript font. You cannot rely onits being present on Windows computers.Not shipped with WinXP.
Century Schoolbook is a core postscript font. You cannot rely onits being present on Windows computers.Not shipped with WinXP.
Less-common monospace fonts
Andale Mono is similar to Verdana and Georgia; it is a new font,not widespread, and not available on Unix or on some Windows computers.
Web Fonts For Macs
Andale Mono
ABCDE abcde 012345 &*!,.
Andale Mono is yet another Microsoft's monospace typeface. Ithas some resemblance to Monaco.Not shipped with WinXP.
Andale Mono is yet another Microsoft's monospace typeface. Ithas some resemblance to Monaco.Not shipped with WinXP.