CSS @font-face Rule
The CSS @font-face is a rule which allows web designers to define online fonts to display text on their website. So, web designers won't need to use "web-safe fonts" anymore.
We must first define a name for the font (like my first font) in the new @font-face rule and then point to the font file.
Each browser has its own format. We use ttf, otf, eot, svg, svgz, woff, woff2 formats.
OTF / TTF¶
The WOFF was created for the reaction of OpenType Font and TrueType Font because these formats could easily (and illegally) be copied. However, OpenType capabilities may interest lots of designers (such as ligatures)
EOT¶
Embedded Open Type format, created by Microsoft (the original innovators of @font-face) over 15 years ago, is the only format that IE8 and below will recognize when using @font-face.
SVG/SVGZ¶
Scalable Vector Graphics (Font) is a vector re-creation of the font making it much lighter in file size and ideal for mobile use. It is the only format that is allowed by version 4.1 and below of Safari for iPhone. SVGZ is the SVG’s zipped version.
WOFF/WOFF2¶
Web Open Font Format, created for use on the web and developed by Mozilla together with other organizations, WOFF fonts often load faster than other formats because they use a compressed version of the structure used by the OpenType (OTF) and TrueType (TTF) fonts. WOFF2 is the new generation of WOFF and it has better compression.
When using custom fonts, we should take into account the following considerations:
- The file size. It’s recommended to use options that have lighter versions.
- The character set limitations. You can limit font sets to load only the fonts that are used.
- System fonts for small screens. One of the solutions is to target larger screens when the custom font is loaded with @media.
| Initial Value | Depends on the browser. |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.fontFamily = "Verdana,sans-serif"; |
Syntax¶
@font-face {
font-properties
}Example of the @font-face rule:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-face {
font-family: 'myFont';
src: url('webfont.eot');
/* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg');
/* Legacy iOS */
}
div {
font-family: myFont, sans-serif;
}
</style>
</head>
<body>
<h2>@font-face example</h2>
<div>
The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
</div>
<p>
The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
</p>
</body>
</html>Browser Support¶
Deepest Possible Browser Support ¶
This is the method of having the deepest support. Before any styles, we should add the @font-face rule to the stylesheet.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
/* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg');
/* Legacy iOS */
}Then, it is used to style elements in the following way:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}Practical Level of Browser Support¶
Since WOFF and WOFF2 are commonly being used, we can use the following:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
}Super Progressive Browser Support¶
If we are working on WOFF, it can be expected that WOFF2 can be used at some point:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2');
}Alternative Techniques¶
In some situations, it can be better to use a hosted font. This is offered by Google Fonts as a means to use their fonts. In the following code, @import is used to load a font from Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Then it can be used to style elements:
body {
font-family: 'Open Sans', sans-serif;
}A hosted service can have an advantage. It will probably include all the variations of the font file providing deep cross-browser compatibility, and there won’t be any need of hosting the files by ourselves.
@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
background: #efefef;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 24px;
padding: 50px;
}In the same way, a stylesheet can be linked to the same asset in the <head> of the HTML document and not in the CSS.
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>Then, the elements can be styled like the other methods:
body {
font-family: 'Open Sans', sans-serif;
}Again, the @font-face rules are imported but they are added to the HTML <head>:
body {
background: #efefef;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 24px;
padding: 50px;
}
h1 {
font-size: 30px;
line-height: 45px;
font-family: 'Open Sans', sans-serif;
}Example of the @font-face rule using Google Fonts:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet">
<style>
h2{
font-family: 'Courier Prime', monospace;
font-weight:700;
}
div {
font-family: 'Courier Prime', monospace;
}
p{
font-family: 'Courier Prime', monospace;
}
</style>
</head>
<body>
<h2>@font-face example</h2>
<div>
The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
</div>
<p>
The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
</p>
</body>
</html>Values¶
| Font Descriptor | Values | Description |
|---|---|---|
| font-family | name | It defines the font's name and it is a requirement. |
| src | URL | It defines the URL where the font will be downloaded and it is a requirement. |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | It defines how the font will be stretched. Its default value is normal and it is optional. |
| font-style | normal italic oblique | It defines how the font will be styled. Its default value is normal and it is optional. |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | It defines the font boldness. Its default value is normal and it is optional. |
| unicode-range | unicode-range | It defines the range of Unicode characters the font supports. Its default value is U+0-10FFFF and it is optional. |
0 Comments
CAN FEEDBACK
Emoji