---
title: font-family
slug: Web/CSS/@font-face/font-family
tags:
  - CSS
  - font-family
translation_of: Web/CSS/@font-face/font-family
---
<p>{{CSSRef}}</p>

<h2 id="Resumen">Resumen</h2>

<p>El descriptor CSS font-family CSS permite al autor especificar el tipo de fuente para un elemento.</p>

<p>La propiedad font-family puede contener varias fuentes  a modo de sistema de "seguridad. Si el navegador no soporta la primera, probará con la siguiente y así sucesivamente.</p>

<p>hay dos tipos de nombres de familias de fuentes:</p>

<ul>
 <li><strong>family-name</strong> - El nombre de la familia de fuentes, como  "times", "courier", "arial", etc.</li>
 <li><strong>generic-family</strong> - El nombre de la familia genérica , como "serif", "sans-serif", "cursive", "fantasy", "monospace".</li>
</ul>

<p>Comienza con la fuente que quieras, y acaba siempre con una familia de fuente genérica para permitir al navegador elegir una fuente similar dentro de la familia genérica en caso de que no haya otras fuentes disponibles.</p>

<p>{{cssinfo}}</p>

<h2 id="Síntaxis">Síntaxis</h2>

<pre>font-family: <em>font</em>|initial|inherit;</pre>

<h3 id="Valores">Valores</h3>

<p><font face="Consolas, Liberation Mono, Courier, monospace"><strong>family-name<br>
 generic-family</strong></font><br>
 Un lista priorizada de nombre de familias de fuentes y/o de nombres de familias genéricas.</p>

<p><strong><code>initial</code></strong><br>
 Establace el valor por defecto para esta propiedad.</p>

<p><strong><code>inherit</code></strong><br>
 Hereda esta propiedad del elemento padre.</p>

<p><strong>serif</strong><br>
 Fuente genérica con serif como, por ejemplo, el tipo de fuente Times.</p>

<p><strong>sans-serif</strong><br>
 Fuente genérica sin serif como, por ejemplo, el tipo de fuente Arial.</p>

<p><strong>fantasy</strong><br>
 Fuente genérica Fantasy.</p>

<p><strong>monospace</strong><br>
 Fuente genérica Monospace, como por ejemplo Courier.</p>

<p><strong>cursive</strong><br>
 Fuente genérica cursiva, como por ejemplo Script.</p>

<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>

{{csssyntax}}

<h2 id="Ejemplos">Ejemplos</h2>

<p>Como ejemplo , consideremos la familia de fuentes garamon, es su forma normal, obtendremos el siguiente resultado:</p>

<pre>p {
    font-family: "Times New Roman", Georgia, Serif;
}
</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table>
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>

<p>{{CompatibilityTable}}</p>

<table>
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>1.0</td>
   <td>1.0</td>
   <td>4.0</td>
   <td>3.5</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>

<p> </p>