Compare Revisions

font-family

Change Revisions

Revision 300021:

Revision 300021 by ethertank on

Revision 326597:

Revision 326597 by mamasboy714@yahoo.com on

Title:
font-family
font-family
Slug:
CSS/font-family
CSS/font-family
Tags:
"css", "CSS Reference"
"css", "CSS Reference"
Content:

Revision 300021
Revision 326597
nn7    <div class="twocolumns">
8      <div class="note">
9        <div class="geckoVersionNote">
10          <h2>
11            {{ CSSRef() }}
12          </h2>
13          <h2>
14            Summary
15          </h2>
16          <h2>
17            The <code>font-family</code> CSS property allows for 
 >a prioritized list of font family names and/or generic family nam
 >es to be specified for the selected element. Unlike most other CS
 >S properties, values are separated by a comma to indicate that th
 >ey are alternatives. The browser will select the first font on th
 >e list that is installed on the computer, or that can be download
 >ed using the information provided by a {{ cssxref("@font-face") }
 >} at-rule.
18          </h2>
19          <h2>
20            Web authors should always add at least one generic fa
 >mily in a font-family list, since there's no guarantee that a spe
 >cific font is intalled on the computer or can be downloaded using
 > a {{ cssxref("@font-face") }} at-rule. The generic family lets t
 >he browser select an acceptable fallback font when needed.
21          </h2>
22          <h2>
23            It is often convenient to use the shorthand property 
 >{{ cssxref("font") }} to set <code>font-size</code> and other fon
 >t related properties all at once.
24          </h2>
25          <h2 class="note">
26            <strong>Note:</strong>&nbsp;The <code>font-family</co
 >de> property specifies a list of fonts, from highest priority to 
 >lowest. Font selection does <strong>not</strong> simply stop at t
 >he first font named in the list that is on the user's system. Rat
 >her, font selection is done <strong>one character at a time</stro
 >ng>, so that if an available font does not have a glyph that can 
 >display a character needed, the later available fonts are tried. 
 >However, this doesn't work in Internet Explorer.<br>
27            <br>
28            When a font is only available in some <a href="/en/CS
 >S/font-style" title="en/CSS/font-style">styles</a>, <a href="/en/
 >CSS/font-variant" title="en/CSS/font-variant">variants</a>, or <a
 > href="/en/CSS/font-size" title="en/CSS/font-size">sizes</a>, tho
 >se properties may also influence which font family is chosen.
29          </h2>
30          <ul class="cssprop">
31            <li>
32              <h2>
33                <dfn>{{ Xref_cssinitial() }}</dfn>
34              </h2>
35              <h2>
36                depends on user agent
37              </h2>
38            </li>
39            <li>
40              <h2>
41                <dfn>Applies to</dfn>
42              </h2>
43              <h2>
44                all elements
45              </h2>
46            </li>
47            <li>
48              <h2>
49                <dfn>{{ Xref_cssinherited() }}</dfn>
50              </h2>
51              <h2>
52                yes
53              </h2>
54            </li>
55            <li>
56              <h2>
57                <dfn>Media</dfn>
58              </h2>
59              <h2>
60                {{ Xref_cssvisual() }}
61              </h2>
62            </li>
63            <li>
64              <h2>
65                <dfn>{{ Xref_csscomputed() }}</dfn>
66              </h2>
67              <h2>
68                as specified
69              </h2>
70            </li>
71          </ul>
72          <h2>
73            Syntax
74          </h2>
75          <h2 class="eval syntaxbox">
76            font-family:&nbsp; <em>family-or-generic-name</em> [,
 > <em>family-or-generic-name</em>]*&nbsp;
77          </h2>
78          <h2>
79            <nobr>Values</nobr>
80          </h2>
81          <h2>
82            <strong><em>family-or-generic-name</em></strong>
83          </h2>
84          <h2 style="margin-left: 40px;">
85            Is either a:
86          </h2>
87          <table class="standard-table">
88            <tbody>
89              <tr>
90                <td>
91                  <h2>
92                    <em><strong>family-name</strong></em>
93                  </h2>
94                </td>
95                <td>
96                  <h2>
97                    The name of a font family. For example, "Time
 >s" and "Helvetica" are font families. Font family names containin
 >g whitespace should be quoted.
98                  </h2>
99                </td>
100              </tr>
101              <tr>
102                <td>
103                  <h2>
104                    <em><strong>generic-family</strong></em>
105                  </h2>
106                </td>
107                <td>
108                  <h2>
109                    Generic font families are a fallback mechanis
 >m, a means of preserving some of the style sheet author's intent 
 >in case when none of the specified fonts are available. Generic f
 >amily names are keywords and must not be quoted. A generic font f
 >amily should be the a last alternative in the list of font family
 > names.
110                  </h2>
111                  <h2>
112                    <code>serif</code>
113                  </h2>
114                  <h2 style="font-family: Palatino,'Palatino Lino
 >type',Palladio,'URW Palladio',serif;">
115                    Glyphs have finishing strokes, flared or tape
 >ring ends, or have actual serifed endings.<br>
116                    E.g.&nbsp; Palatino, "Palatino Linotype", Pal
 >ladio, "URW Palladio", serif
117                  </h2>
118                  <h2>
119                    <code>sans-serif</code>
120                  </h2>
121                  <h2 style="font-family: 'Trebuchet MS','Liberat
 >ion Sans','Nimbus Sans L',sans-serif;">
122                    Glyphs have stroke endings that are plain.<br
 >>
123                    E.g. 'Trebuchet MS', 'Liberation Sans', 'Nimb
 >us Sans L', sans-serif
124                  </h2>
125                  <h2>
126                    <code>cursive</code>
127                  </h2>
128                  <h2>
129                    Glyphs in cursive fonts generally have either
 > joining strokes or other cursive characteristics beyond those of
 > italic typefaces. The glyphs are partially or completely connect
 >ed, and the result looks more like handwritten pen or brush writi
 >ng than printed letterwork.
130                  </h2>
131                  <h2>
132                    <code>fantasy</code>
133                  </h2>
134                  <h2>
135                    Fantasy fonts are primarily decorative fonts 
 >that contain playful representations of characters.
136                  </h2>
137                  <h2>
138                    <code>monospace</code>
139                  </h2>
140                  <h2 style="font-family: 'DejaVu Sans Mono',Menl
 >o,Consolas,'Liberation Mono',Monaco,'Lucida Console',monospace;">
141                    All glyphs have the same fixed width.<br>
142                    E.g. "DejaVu Sans Mono", Menlo, Consolas, "Li
 >beration Mono", Monaco, "Lucida Console", monospace
143                  </h2>
144                </td>
145              </tr>
146            </tbody>
147          </table>
148          <h2>
149            Valid family names
150          </h2>
151          <h2>
152            Font family names must either be given quoted as stri
 >ngs, or unquoted as a sequence of one or more identifiers. This m
 >eans that punctuation characters and digits at the start of each 
 >token must be escaped in unquoted font family names.
153          </h2>
154          <h2>
155            For example, the following declarations are valid:
156          </h2>
157          <h2>
158            font-family: Gill Sans Extrabold, sans-serif;<br>
159            font-family: "Goudy Bookletter 1911", sans-serif;
160          </h2>
161          <h2>
162            The following declarations are <strong>invalid</stron
 >g>:
163          </h2>
164          <h2>
165            font-family: Goudy Bookletter 1911, sans-serif;<br>
166            font-family: Red/Black, sans-serif;<br>
167            font-family: "Lucida" Grande, sans-serif;<br>
168            font-family: Ahem!, sans-serif;<br>
169            font-family: test@foo, sans-serif;<br>
170            font-family: #POUND, sans-serif;<br>
171            font-family: Hawaii 5-0, sans-serif;
172          </h2>
173          <h2>
174            <nobr>Examples</nobr>
175          </h2>
176          <h2>
177            {{ CSSRefExampleLink("font-family") }}
178          </h2>
179          <h2>
180            body&nbsp;&nbsp;&nbsp;&nbsp; { font-family: "Gill San
 >s Extrabold", Helvetica, sans-serif }
181          </h2>
182          <h2>
183            .receipt { font-family: Courier, "Lucida Console", mo
 >nospace }
184          </h2>
185          <h2 name="Browser_Compatibility">
186            Browser compatibility
187          </h2>
188          <h2>
189            {{ CompatibilityTable() }}
190          </h2>
191          <div id="compat-desktop">
192            <table class="compat-table">
193              <tbody>
194                <tr>
195                  <th>
196                    <h2>
197                      Feature
198                    </h2>
199                  </th>
200                  <th>
201                    <h2>
202                      Chrome
203                    </h2>
204                  </th>
205                  <th>
206                    <h2>
207                      Firefox (Gecko)
208                    </h2>
209                  </th>
210                  <th>
211                    <h2>
212                      Internet Explorer
213                    </h2>
214                  </th>
215                  <th>
216                    <h2>
217                      Opera
218                    </h2>
219                  </th>
220                  <th>
221                    <h2>
222                      Safari
223                    </h2>
224                  </th>
225                </tr>
226                <tr>
227                  <td>
228                    <h2>
229                      Basic support
230                    </h2>
231                  </td>
232                  <td>
233                    <h2>
234                      1.0
235                    </h2>
236                  </td>
237                  <td>
238                    <h2>
239                      {{ CompatGeckoDesktop("1") }}
240                    </h2>
241                  </td>
242                  <td>
243                    <h2>
244                      3.0
245                    </h2>
246                  </td>
247                  <td>
248                    <h2>
249                      3.5
250                    </h2>
251                  </td>
252                  <td>
253                    <h2>
254                      1.0
255                    </h2>
256                  </td>
257                </tr>
258              </tbody>
259            </table>
260          </div>
261          <div id="compat-mobile">
262            <table class="compat-table">
263              <tbody>
264                <tr>
265                  <th>
266                    <h2>
267                      Feature
268                    </h2>
269                  </th>
270                  <th>
271                    <h2>
272                      Android
273                    </h2>
274                  </th>
275                  <th>
276                    <h2>
277                      Firefox Mobile (Gecko)
278                    </h2>
279                  </th>
280                  <th>
281                    <h2>
282                      IE Phone
283                    </h2>
284                  </th>
285                  <th>
286                    <h2>
287                      Opera Mobile
288                    </h2>
289                  </th>
290                  <th>
291                    <h2>
292                      Safari Mobile
293                    </h2>
294                  </th>
295                </tr>
296                <tr>
297                  <td>
298                    <h2>
299                      Basic support
300                    </h2>
301                  </td>
302                  <td>
303                    <h2>
304                      1.0
305                    </h2>
306                  </td>
307                  <td>
308                    <h2>
309                      {{ CompatGeckoMobile("1") }}
310                    </h2>
311                  </td>
312                  <td>
313                    <h2>
314                      6.0
315                    </h2>
316                  </td>
317                  <td>
318                    <h2>
319                      6.0
320                    </h2>
321                  </td>
322                  <td>
323                    <h2>
324                      1.0
325                    </h2>
326                  </td>
327                </tr>
328              </tbody>
329            </table>
330          </div>
331          <h2>
332            Specifications
333          </h2>
334          <table class="standard-table">
335            <thead>
336              <tr>
337                <th scope="col">
338                  <h2>
339                    Specification
340                  </h2>
341                </th>
342                <th scope="col">
343                  <h2>
344                    Status
345                  </h2>
346                </th>
347                <th scope="col">
348                  <h2>
349                    Comment
350                  </h2>
351                </th>
352              </tr>
353            </thead>
354            <tbody>
355              <tr>
356                <td>
357                  <h2>
358                    {{ SpecName('CSS3 Fonts', '#font-family-prop'
 >, 'font-family') }}
359                  </h2>
360                </td>
361                <td>
362                  <h2>
363                    {{ Spec2('CSS3 Fonts') }}
364                  </h2>
365                </td>
366                <td>
367                  <h2>
368                    No significant change.
369                  </h2>
370                </td>
371              </tr>
372              <tr>
373                <td>
374                  <h2>
375                    {{ SpecName('CSS2.1', 'fonts.html#propdef-fon
 >t-family', 'font-family') }}
376                  </h2>
377                </td>
378                <td>
379                  <h2>
380                    {{ Spec2('CSS2.1') }}
381                  </h2>
382                </td>
383                <td>
384                  <h2>
385                    No significant change.
386                  </h2>
387                </td>
388              </tr>
389              <tr>
390                <td>
391                  <h2>
392                    {{ SpecName('CSS1', '#font-family', 'font-fam
 >iliy') }}
393                  </h2>
394                </td>
395                <td>
396                  <h2>
397                    {{ Spec2('CSS1') }}
398                  </h2>
399                </td>
400                <td>
401                  <h2>
402                    &nbsp;
403                  </h2>
404                </td>
405              </tr>
406            </tbody>
407          </table>
408          <h2>
409            See also
410          </h2>
411          <ul>
412            <li>
413              <h2 class="brush: js">
414                Font-related CSS properties: {{ CSS_Reference:Fon
 >ts() }}
415              </h2>
416            </li>
417          </ul>
418        </div>
419      </div>
420    </div>
n8      {{ CSSRef() }}n422      &nbsp;
t10    <h2 id="Summary">t
11      Summary
12    </h2>
13    <p>
14      The <code>font-family</code> CSS property allows for a prio
>ritized list of font family names and/or generic family names to  
>be specified for the selected element. Unlike most other CSS prop 
>erties, values are separated by a comma to indicate that they are 
> alternatives. The browser will select the first font on the list 
> that is installed on the computer, or that can be downloaded usi 
>ng the information provided by a {{ cssxref("@font-face") }} at-r 
>ule. 
15    </p>
16    <p>
17      Web authors should always add at least one generic family i
>n a font-family list, since there's no guarantee that a specific  
>font is intalled on the computer or can be downloaded using a {{  
>cssxref("@font-face") }} at-rule. The generic family lets the bro 
>wser select an acceptable fallback font when needed. 
18    </p>
19    <p>
20      It is often convenient to use the shorthand property {{ css
>xref("font") }} to set <code>font-size</code> and other font rela 
>ted properties all at once. 
21    </p>
22    <div class="note">
23      <strong>Note:</strong>&nbsp;The <code>font-family</code> pr
>operty specifies a list of fonts, from highest priority to lowest 
>. Font selection does <strong>not</strong> simply stop at the fir 
>st font named in the list that is on the user's system. Rather, f 
>ont selection is done <strong>one character at a time</strong>, s 
>o that if an available font does not have a glyph that can displa 
>y a character needed, the later available fonts are tried. Howeve 
>r, this doesn't work in Internet Explorer.<br> 
24      <br>
25      When a font is only available in some <a href="/en/CSS/font
>-style" title="en/CSS/font-style">styles</a>, <a href="/en/CSS/fo 
>nt-variant" title="en/CSS/font-variant">variants</a>, or <a href= 
>"/en/CSS/font-size" title="en/CSS/font-size">sizes</a>, those pro 
>perties may also influence which font family is chosen. 
26    </div>
27    <ul class="cssprop">
28      <li>
29        <dfn>{{ Xref_cssinitial() }}</dfn> depends on user agent
30      </li>
31      <li>
32        <dfn>Applies to</dfn> all elements
33      </li>
34      <li>
35        <dfn>{{ Xref_cssinherited() }}</dfn> yes
36      </li>
37      <li>
38        <dfn>Media</dfn> {{ Xref_cssvisual() }}
39      </li>
40      <li>
41        <dfn>{{ Xref_csscomputed() }}</dfn> as specified
42      </li>
43    </ul>
44    <h2 id="Syntax">
45      Syntax
46    </h2>
47    <pre class="eval syntaxbox">
48font-family:  <em>family-or-generic-name</em> [, <em>family-or-ge
>neric-name</em>]*  
49</pre>
50    <h3 id="Values">
51      <nobr>Values</nobr>
52    </h3>
53    <dl>
54      <dt>
55        <strong><em>family-or-generic-name</em></strong>
56      </dt>
57    </dl>
58    <p style="margin-left: 40px;">
59      Is either a:
60    </p>
61    <table class="standard-table">
62      <tbody>
63        <tr>
64          <td>
65            <em><strong>family-name</strong></em>
66          </td>
67          <td>
68            The name of a font family. For example, "Times" and "
>Helvetica" are font families. Font family names containing whites 
>pace should be quoted. 
69          </td>
70        </tr>
71        <tr>
72          <td>
73            <em><strong>generic-family</strong></em>
74          </td>
75          <td>
76            <p>
77              Generic font families are a fallback mechanism, a m
>eans of preserving some of the style sheet author's intent in cas 
>e when none of the specified fonts are available. Generic family  
>names are keywords and must not be quoted. A generic font family  
>should be the a last alternative in the list of font family names 
>. 
78            </p>
79            <dl>
80              <dt>
81                <code>serif</code>
82              </dt>
83              <dd style="font-family:Palatino,'Palatino Linotype'
>,Palladio,'URW Palladio',serif"> 
84                Glyphs have finishing strokes, flared or tapering
> ends, or have actual serifed endings.<br> 
85                E.g.&nbsp; Palatino, "Palatino Linotype", Palladi
>o, "URW Palladio", serif 
86              </dd>
87              <dt>
88                <code>sans-serif</code>
89              </dt>
90              <dd style="font-family:'Trebuchet MS','Liberation S
>ans','Nimbus Sans L',sans-serif"> 
91                Glyphs have stroke endings that are plain.<br>
92                E.g. 'Trebuchet MS', 'Liberation Sans', 'Nimbus S
>ans L', sans-serif 
93              </dd>
94              <dt>
95                <code>cursive</code>
96              </dt>
97              <dd>
98                Glyphs in cursive fonts generally have either joi
>ning strokes or other cursive characteristics beyond those of ita 
>lic typefaces. The glyphs are partially or completely connected,  
>and the result looks more like handwritten pen or brush writing t 
>han printed letterwork. 
99              </dd>
100              <dt>
101                <code>fantasy</code>
102              </dt>
103              <dd>
104                Fantasy fonts are primarily decorative fonts that
> contain playful representations of characters. 
105              </dd>
106              <dt>
107                <code>monospace</code>
108              </dt>
109              <dd style="font-family:'DejaVu Sans Mono', Menlo, C
>onsolas, 'Liberation Mono', Monaco, 'Lucida Console', monospace"> 
110                All glyphs have the same fixed width.<br>
111                E.g. "DejaVu Sans Mono", Menlo, Consolas, "Libera
>tion Mono", Monaco, "Lucida Console", monospace 
112              </dd>
113            </dl>
114          </td>
115        </tr>
116      </tbody>
117    </table>
118    <h3 id="Valid_family_names">
119      Valid family names
120    </h3>
121    <p>
122      Font family names must either be given quoted as strings, o
>r unquoted as a sequence of one or more identifiers. This means t 
>hat punctuation characters and digits at the start of each token  
>must be escaped in unquoted font family names. 
123    </p>
124    <p>
125      For example, the following declarations are valid:
126    </p>
127    <pre>
128font-family: Gill Sans Extrabold, sans-serif;
129font-family: "Goudy Bookletter 1911", sans-serif;
130</pre>
131    <p>
132      The following declarations are <strong>invalid</strong>:
133    </p>
134    <pre>
135font-family: Goudy Bookletter 1911, sans-serif;
136font-family: Red/Black, sans-serif;
137font-family: "Lucida" Grande, sans-serif;
138font-family: Ahem!, sans-serif;
139font-family: test@foo, sans-serif;
140font-family: #POUND, sans-serif;
141font-family: Hawaii 5-0, sans-serif;
142</pre>
143    <h2 id="Examples">
144      <nobr>Examples</nobr>
145    </h2>
146    <p>
147      {{ CSSRefExampleLink("font-family") }}
148    </p>
149    <pre>
150body     { font-family: "Gill Sans Extrabold", Helvetica, sans-se
>rif } 
151 
152.receipt { font-family: Courier, "Lucida Console", monospace }
153</pre>
154    <h2 id="Browser_Compatibility" name="Browser_Compatibility">
155      Browser compatibility
156    </h2>
157    <p>
158      {{ CompatibilityTable() }}
159    </p>
160    <div id="compat-desktop">
161      <table class="compat-table">
162        <tbody>
163          <tr>
164            <th>
165              Feature
166            </th>
167            <th>
168              Chrome
169            </th>
170            <th>
171              Firefox (Gecko)
172            </th>
173            <th>
174              Internet Explorer
175            </th>
176            <th>
177              Opera
178            </th>
179            <th>
180              Safari
181            </th>
182          </tr>
183          <tr>
184            <td>
185              Basic support
186            </td>
187            <td>
188              1.0
189            </td>
190            <td>
191              {{ CompatGeckoDesktop("1") }}
192            </td>
193            <td>
194              3.0
195            </td>
196            <td>
197              3.5
198            </td>
199            <td>
200              1.0
201            </td>
202          </tr>
203        </tbody>
204      </table>
205    </div>
206    <div id="compat-mobile">
207      <table class="compat-table">
208        <tbody>
209          <tr>
210            <th>
211              Feature
212            </th>
213            <th>
214              Android
215            </th>
216            <th>
217              Firefox Mobile (Gecko)
218            </th>
219            <th>
220              IE Phone
221            </th>
222            <th>
223              Opera Mobile
224            </th>
225            <th>
226              Safari Mobile
227            </th>
228          </tr>
229          <tr>
230            <td>
231              Basic support
232            </td>
233            <td>
234              1.0
235            </td>
236            <td>
237              {{ CompatGeckoMobile("1") }}
238            </td>
239            <td>
240              6.0
241            </td>
242            <td>
243              6.0
244            </td>
245            <td>
246              1.0
247            </td>
248          </tr>
249        </tbody>
250      </table>
251    </div>
252    <h2 id="Specifications">
253      Specifications
254    </h2>
255    <table class="standard-table">
256      <thead>
257        <tr>
258          <th scope="col">
259            Specification
260          </th>
261          <th scope="col">
262            Status
263          </th>
264          <th scope="col">
265            Comment
266          </th>
267        </tr>
268      </thead>
269      <tbody>
270        <tr>
271          <td>
272            {{ SpecName('CSS3 Fonts', '#font-family-prop', 'font-
>family') }} 
273          </td>
274          <td>
275            {{ Spec2('CSS3 Fonts') }}
276          </td>
277          <td>
278            No significant change.
279          </td>
280        </tr>
281        <tr>
282          <td>
283            {{ SpecName('CSS2.1', 'fonts.html#propdef-font-family
>', 'font-family') }} 
284          </td>
285          <td>
286            {{ Spec2('CSS2.1') }}
287          </td>
288          <td>
289            No significant change.
290          </td>
291        </tr>
292        <tr>
293          <td>
294            {{ SpecName('CSS1', '#font-family', 'font-familiy') }
>} 
295          </td>
296          <td>
297            {{ Spec2('CSS1') }}
298          </td>
299          <td>
300            &nbsp;
301          </td>
302        </tr>
303      </tbody>
304    </table>
305    <h2 id="See_also">
306      See also
307    </h2>
308    <ul>
309      <li>Font-related CSS properties: {{ CSS_Reference:Fonts() }
>} 
310      </li>
311    </ul>

Back to History