initial commit

6 files changed, 839 insertions, 0 deletions

diff --git a/files/es/web/css/@font-face/font-display/index.html b/files/es/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..f6dcaf0c03
--- /dev/null
+++ b/files/es/web/css/@font-face/font-display/index.html
@@ -0,0 +1,96 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+tags:
+  - '@font-face'
+  - CSS
+  - Descriptor CSS
+  - Experimental
+  - Fuentes CSS
+  - Referencia
+  - font-display
+  - web fonts
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<p>El descriptor <code>font-display</code> determina cómo se muestra una fuente basándose en cuándo está descargada y lista para usarse.</p>
+
+<h2 id="La_visualización_de_las_fuentes">La visualización de las fuentes</h2>
+
+<p>La  visualización de la fuentes se basa en un temporizador que comienza en el momento en que el agente de usuario intenta utilizar una fuente descargada. El tiempo de visualización se divide en tres periodos dictan el comportamiento de renderizado de cualquier elemento que utilice la fuente.</p>
+
+<dl>
+ <dt>Tiempo de bloqueo de fuente</dt>
+ <dd>Si la fuente no está cargada, cualquier elemento que intente utilizarla debe mostrar una fuente alternativa <em>invisible</em>. Si la fuente se carga correctamente durante este período, se utiliza normalmente.</dd>
+ <dt>Tiempo de intercambio de fuente</dt>
+ <dd>Si la fuente no está cargada, cualquier elemento que intente usarla debe mostrar una fuente alternativa. Si la fuente se carga correctamente durante este período, se utiliza normalmente.</dd>
+ <dt>Tiempo de fallo de la fuente</dt>
+ <dd>Si la fuente no está cargada el agente de usuario lo trata como una descarga fallida y utiliza una fuente alternativa.</dd>
+</dl>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css;">/* Valores */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>El agente de usuario define la estrategia de visualización de fuentes.</dd>
+ <dt><code>block</code></dt>
+ <dd>Establece un tiempo de bloqueo de la fuente corto y un periodo de intercambio infinito</dd>
+ <dt><code>swap</code></dt>
+ <dd>No establece  tiempo de bloqueo para la fuente y un tiempo infinito de intercambio.</dd>
+ <dt><code>fallback</code></dt>
+ <dd>Establece un tiempo de bloqueo muy pequeño y un período de intercambio corto.</dd>
+ <dt><code>optional</code></dt>
+ <dd>Establece un tiempo de bloqueo muy corto y sin tiempo de intercambio.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css; highlight[7]">@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-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('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, por favor visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una petición de actualización.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
diff --git a/files/es/web/css/@font-face/font-family/index.html b/files/es/web/css/@font-face/font-family/index.html
new file mode 100644
index 0000000000..1069ff05a8
--- /dev/null
+++ b/files/es/web/css/@font-face/font-family/index.html
@@ -0,0 +1,116 @@
+---
+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>
+
+<pre>{{csssyntax}}</pre>
+
+<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>
diff --git a/files/es/web/css/@font-face/font-style/index.html b/files/es/web/css/@font-face/font-style/index.html
new file mode 100644
index 0000000000..5b812c2d63
--- /dev/null
+++ b/files/es/web/css/@font-face/font-style/index.html
@@ -0,0 +1,134 @@
+---
+title: font-style
+slug: Web/CSS/@font-face/font-style
+tags:
+  - '@font-face'
+  - CSS
+  - Fuentes
+  - Referências
+translation_of: Web/CSS/@font-face/font-style
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>La propiedad CSS "font-style" permite a los autores esepcificar estilos de fuente para las fuentes especificadas en la regla "<code>@font-face</code>".</p>
+
+<p>Para un tipo de fuente particular, los autores pueden descargar varios tipos de fuentes que correspondan a diferentes estilos de la misma familia de fuentes, y luego usar la propiedad "font-style" para especificar explicitamente el tipo de fuente descargada. Los valores para esta propiedad CSS son los mismos que los correspondientes a font property.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<div class="syntaxbox">
+<pre class="brush: css">font-style: normal;
+font-style: italic;
+font-style: oblique;</pre>
+
+<h3 id="Values">Values</h3>
+
+<p><code><strong>normal</strong></code><br>
+ Selecciona la version normal del estilo de fuente.</p>
+
+<p><strong><code>italic</code></strong><br>
+ Especifica que el estilo de fuente es la versión en <em>cursiva</em> de la fuente normal.</p>
+
+<p><strong><code>oblique</code></strong><br>
+ Especifica que el estilo de fuente es la versión en <em>cursiva</em>, también, pero de forma diferente, de la fuente normal.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>A modo de ejemplo, consideremos Garamond como un tipo de fuente que, en su forma normal, obtenemos el siguiente resultado:</p>
+
+<pre class="brush: css">@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}</pre>
+
+<p><img alt="unstyled Garamond" src="https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>La versión en <em>cursiva</em> de este texto utiliza los mismos trazos presentes en la versión sin estilo, pero artificialmente inclinadas unos pocos grados.</p>
+
+<p><img alt="artificially sloped garamond" src="https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>Por otra parte, si existe un verdadera versión en <em>cursiva</em> del estilo de fuente, podemos incluirla en la propiedad "src" y especificar el estilo de fuente como "italic", con que claramente la fuente quedará en <em>cursiva</em>. Las verdaderas <em>cursivas</em> utilizan unos trazos específicos que son un poco diferentes de su versión normal, teniendo algunas características únicas y generalmente con cualidades redondeadas y caligráficas. Estas fuentes son específicamente creadas por diseñadores de fuentes y no son artificialmente inclinadas.</p>
+
+<p>@font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; }</p>
+
+<p><img alt="italic garamond" src="https://mdn.mozillademos.org/files/12269/garamonditalic.JPG" style="height: 101px; width: 267px;"></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="height: 91px; width: 591px;">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>4.0  </td>
+   <td>4.0</td>
+   <td>10.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
diff --git a/files/es/web/css/@font-face/index.html b/files/es/web/css/@font-face/index.html
new file mode 100644
index 0000000000..b00594d694
--- /dev/null
+++ b/files/es/web/css/@font-face/index.html
@@ -0,0 +1,162 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+translation_of: Web/CSS/@font-face
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code>@font-face</code> permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes,<code> @font-face </code>elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre>@font-face {
+  font-family: &lt;un-nombre-de-fuente-remota&gt;;
+  src: &lt;origen&gt; [,&lt;origen&gt;]*;
+  [font-weight: &lt;peso&gt;];
+  [font-style: &lt;estilo&gt;];
+}
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;un-nombre-de-fuente-remota&gt; </dt>
+ <dd>Especifica el nombre de una fuente que será utilizada como valor de font face por las propiedades de fuente.</dd>
+ <dt>&lt;origen&gt; </dt>
+ <dd>Dirección URL para la ubicación remota del archivo de fuente, o el nombre de una fuente en la computadora del usuario en la forma <code>local("Nombre de Fuente")</code>.</dd>
+ <dt>&lt;peso&gt; </dt>
+ <dd>Un valor de <a class="internal" href="/en/CSS/font-weight" title="en/CSS/font-weight">peso/grosor de fuente</a>.</dd>
+ <dt>&lt;estilo&gt; </dt>
+ <dd>Un valor de <a class="internal" href="/en/CSS/font-style" title="en/CSS/font-style">estilo de fuente</a>.</dd>
+</dl>
+
+<p>Puede especificar una fuente por nombre en la computadora local del usuario utilizando la sintaxis <code>local()</code>. Si esa fuente no es encontrada, se intentarán otros orígenes hasta encontrar una fuente.</p>
+
+<h2 id="Formatos_de_fuentes_soportados">Formatos de fuentes soportados</h2>
+
+<ul>
+ <li>Gecko 1.9.1 (Firefox 3.5) soporta fuentes TrueType y OpenType.</li>
+ <li>Gecko 1.9.2 (Firefox 3.6) agrega soporte para <a href="/en/WOFF" title="en/About WOFF">WOFF</a>.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Este ejemplo simplemente especifica una fuente que puede ser descargada para utilizar, aplicando la fuente a todo el cuerpo del documento.</p>
+
+<p><a class="internal" href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">Muestra en vivo</a></p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>En este ejemplo, es utilizada la copia local de "Helvetica Neue Bold" del usuario; si el usuario no tiene esa fuente instalada (se prueban dos nombre distintos), luego la fuente descargable de nombre "MgOpenModernaBold.ttf" es utilizada en cambio:</p>
+
+<pre class="deki-transform">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Gecko</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">las fuentes</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">web están</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sujetas</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a la restricción del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo dominio</span> <span class="atn hps" title="Haz clic para obtener otras posibles traducciones">(los </span><span title="Haz clic para obtener otras posibles traducciones">archivos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">fuentes</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">deben estar en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo dominio</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la página</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que los utiliza</span><span title="Haz clic para obtener otras posibles traducciones">)</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a menos que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los </span></span><a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">controles de acceso HTTP</a> <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">sean utilizados para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">relajar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">esta restricción.</span></span></li>
+ <li>
+  <div class="note"><strong>Nota:</strong> Porque no hay tipos MIME definidos para fuentes TrueType, OpenType, y WOFF, el tipo MIME del archivo especificado no es considerado.</div>
+ </li>
+ <li>Cuando Gecko muestra una página que usa fuentes web, inicialmente muestra el texto que usa la mejor fuente de reserva CSS disponible en la computadora del usuario mientras espera que la fuente web termine de descargarse. Mientras cada fuente web se termina de descargar, Gecko actualiza el texto que utiliza esa fuente. Esto permite al usuario leer más rápidamente el texto en la página.</li>
+</ul>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Chrome (WebKit)</td>
+   <td><strong>4</strong> (532.5)</td>
+   <td>Solo fuentes TrueType y OpenType</td>
+  </tr>
+  <tr>
+   <td></td>
+   <td><strong>6</strong> (534.3)</td>
+   <td>Web Open Font Format (WOFF) soporte agregado</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>Opera</td>
+   <td><strong>10.0</strong></td>
+   <td>Solo fuentes TrueType y OpenType</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td><strong>3.1</strong> (525.6)</td>
+   <td>Solo fuentes TrueType y OpenType</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión desde</th>
+   <th>Soporte de</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>4.0</strong></td>
+   <td>Solo fuentes OpenType embebidas</td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>9.0 Preview 3</strong></td>
+   <td>Web Open Font Format (WOFF) soporte agregado</td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td><strong>3.5</strong> (1.9.1)</td>
+   <td>Solo fuentes TrueType y OpenType</td>
+  </tr>
+  <tr>
+   <td><strong>3.6</strong> (1.9.2)</td>
+   <td>Web Open Font Format (WOFF) soporte agregado</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Vea también <a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">MSDN Microsoft library @font-face</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions" title="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions">CSS 2 Fonts</a> 1998-05-12 Obsoletas</li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-resources" title="http://www.w3.org/TR/css3-fonts/#font-resources">CSS 3 Fonts</a> 2009 Borrador de trabajo</li>
+ <li><a class="external" href="http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html" title="http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html">WOFF file format specification</a> Borrador</li>
+</ul>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator" title="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a href="/en/WOFF" title="en/About WOFF">About WOFF</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/" title="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/" title="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://opentype.info/demo/webfontdemo.html" title="http://opentype.info/demo/webfontdemo.html">10 Great Free Fonts for @font-face embedding</a></li>
+</ul>
diff --git a/files/es/web/css/@font-face/src/index.html b/files/es/web/css/@font-face/src/index.html
new file mode 100644
index 0000000000..a9627ebf9b
--- /dev/null
+++ b/files/es/web/css/@font-face/src/index.html
@@ -0,0 +1,245 @@
+---
+title: src
+slug: Web/CSS/@font-face/src
+tags:
+  - Descriptor CSS
+  - Fuentes CSS
+  - Referencia
+translation_of: Web/CSS/@font-face/src
+---
+<div>{{CSSRef}}</div>
+
+<p>El descriptor CSS <strong><code>src</code></strong> de la regla {{cssxref("@font-face")}} especifica el recurso que contiene a la fuente. Es requerido para que la regla <code>@font-face</code> sea válida.</p>
+
+<p>Su valor es una lista de referencias externas o nombres de fuentes instaladas, separadas por coma según su prioridad. Cuando se necesita una fuente, el agente usuario itera sobre el conjunto de referencias, usando la primera que pueda ser activada exitosamente. Fuentes que contienen datos inválidos o fuentes locales que no se encuentren son ignoradas, y el agente usuario cargará la siguiente en la lista.</p>
+
+<p>Al igual que con otras URLs en CSS, la URL puede ser relativa, en cuyo caso se resuelve relativamente a la ubicación de la hoja de estilos que contenga la regla <code>@font-face</code>. En caso de fuentes SVG, la URL apunta a un elemento dentro de un documento que contenga definiciones de fuentes SVG. Si se omite la referencia al elemento, se deduce que se usará la referencia a la primera fuente definida. De forma similar, formatos contenedores de fuentes que puedan contener más de una, cargarán solo una de las fuentes para una regla <code>@font-face</code>. Los identificadores de fragmentos son usados para indicar cuál fuente se cargará. Si un formato contenedor no tiene un esquema de identificadores de fragmento definido, se usará un esquema de indexado simple, con base en 1 (por ejemplo, "font-collection#1" para la primera fuente, "font-collection#2" para la segunda fuente).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* &lt;url&gt; values */
+src: url(https://somewebsite.com/path/to/font.woff); /* absolute URL */
+src: url(path/to/font.woff);                         /* relative URL */
+src: url(path/to/font.woff) format("woff");          /* explicit format */
+src: url('path/to/font.woff');                       /* quoted URL */
+src: url(path/to/svgfont.svg#example);               /* fragment identifying font */
+
+/* &lt;font-face-name&gt; values */
+src: local(font);      /* unquoted name */
+src: local(some font); /* name containing space */
+src: local("font");    /* quoted name */
+
+/* Multiple items */
+src: local(font), url(path/to/font.svg) format("svg"),
+    url(path/to/font.woff) format("woff"),
+    url(path/to/font.ttf) format("opentype");
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;url&gt; [ <span id="format()">format( &lt;string&gt;# )</span> ]?</code></dt>
+ <dd>Especifica una referencia externa que consiste en una URL seguida por un indicador opcional que describe el formato del recurso referenciado por esa URL. El indicador de formato contiene una lista de textos de formato, separados por coma, que denota formatos de fuente conocidos. Si un agente usuario no soporta los formatos especificados, omitirá descargar el recurso. Si no se especifican los indicadores de formato, el recurso siempre es descargado.</dd>
+ <dt id="local()"><code>&lt;font-face-name&gt;</code></dt>
+ <dd>Especifica el nombre de una fuente instalada localmente, usando la función <code>local()</code>, que identifica de forma única a una fuente dentro de una familia larga. El nombre puede ser opcionalmente encerrado en comillas.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: examplefont;
+  src: local(Example Font), url('examplefont.woff') format("woff"),
+      url('examplefont.woff') format("opentype");
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("4.0")}}</td>
+   <td>12.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("6.0")}}</td>
+   <td>{{CompatOpera("9.0")}}</td>
+   <td>{{CompatSafari("3.1")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WOFF">WOFF</a></td>
+   <td>{{CompatChrome("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("11.1")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WOFF">WOFF 2</a></td>
+   <td>{{CompatChrome("36.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.microsoft.com/typography/otspec/default.htm">TrueType</a></td>
+   <td>{{CompatChrome("4.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("10.0")}}</td>
+   <td>{{CompatSafari("3.1")}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.microsoft.com/typography/otspec/default.htm">OpenType</a></td>
+   <td>{{CompatChrome("4.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("10.0")}}</td>
+   <td>{{CompatSafari("3.1")}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded OpenType</a></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/SVG/Tutorial/SVG_fonts">SVG Font</a></td>
+   <td>{{CompatChrome("4.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("9.0")}}</td>
+   <td>{{CompatSafari("3.2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatAndroid("2.2")}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatIE("10.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("12.0")}}</td>
+   <td>{{CompatSafari("3.1")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WOFF">WOFF</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WOFF">WOFF 2</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.microsoft.com/typography/otspec/default.htm">TrueType</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.microsoft.com/typography/otspec/default.htm">OpenType</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded OpenType</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/SVG/Tutorial/SVG_fonts">SVG Font</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esta característica está implementada bajo la preferencia <code>gfx.downloadable_fonts.woff2.enabled</code>, inicialmente con valor predeterminado de <code>false</code>. A partir de Gecko 39.0 {{geckoRelease("39.0")}}, esta preferencia tiene valor predeterminado de <code>true</code>.</p>
+
+<p>[2] Esta característica aun no está implementada. Véase {{bug("119490")}}.</p>
diff --git a/files/es/web/css/@font-face/unicode-range/index.html b/files/es/web/css/@font-face/unicode-range/index.html
new file mode 100644
index 0000000000..61638788ac
--- /dev/null
+++ b/files/es/web/css/@font-face/unicode-range/index.html
@@ -0,0 +1,86 @@
+---
+title: unicode-range
+slug: Web/CSS/@font-face/unicode-range
+tags:
+  - CSS
+  - Experimental
+  - Layout
+  - Reference
+translation_of: Web/CSS/@font-face/unicode-range
+---
+<div>{{cssref}}</div>
+
+<p>La regla CSS <strong><code>unicode-range</code></strong> especifica un rango específico de caracteres a ser usados por una fuente definida  {{cssxref("@font-face")}} y hacerla disponible para su uso en la página actual. Si la página no usa algún caracter en ese rango, la fuente no es descargada; si usa al menos uno de ellos, la fuente es descargada.</p>
+
+<p>El propósito de esta regla es permitir a las fuente ser segmentados, así el navegador solo necesita descargar la fuente necesitada para el contexto de texto en una página en particular. Por ejemplo, un sitio con muchas localizaciones podría proveer fuentes separadas para el inglés, griego y japonés. Para los usuarios que ven la versión en inglés de la página, las fuentes para el griego y el japonés no son necesarias, y por lo tanto no se descargan, ahorrando ancho de banda.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* valores &lt;unicode-range&gt; */
+unicode-range: U+26;               /* un único código */
+unicode-range: U+0-7F;
+unicode-range: U+0025-00FF;        /* rango de códigos */
+unicode-range: U+4??;              /* rango por expresión */
+unicode-range: U+0025-00FF, U+4??; /* multiples valores */
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><em><strong>un único código</strong></em></dt>
+ <dd>Un único código de caracter Unicode, por ejemplo <code>U+26</code>.</dd>
+ <dt><em><strong>un rango de código</strong></em></dt>
+ <dd>Un rango de códigos de caracter Unicode. Asi que, por ejemplo, <code>U+0025-00FF</code> significa <em>incluir todos caracteres en el rango <code>U+0025</code> a <code>U+00FF</code></em>.</dd>
+ <dt><em><strong>rango por expresión</strong></em></dt>
+ <dd>Un rango de códigos Unicode que contienen caracteres comodín, usando el caracter <code>'?'</code>, asi que, por ejemplo <code>U+4??</code> significa <em>incluir todos los caracteres en el rango <code>U+400</code> a <code>U+4FF</code></em>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Hemos creado una etiqueta HTML que contiene un elemento {{HTMLElement("div")}}, que incluye un simbolo &amp;, el cual queremos que se muestre con una fuente diferente. Para hacerlo obvio,  usaremos una fuente sans-serif, <em>Helvetica</em> para el texto, y una fuente serif, <em>Times New Roman</em>, para el caracter &amp;.</p>
+
+<div class="example">
+<pre class="brush: html">&lt;div&gt;Me &amp; You = Us&lt;/div&gt;</pre>
+</div>
+
+<p>En el CSS, puedes ver que en efecto estamos definiendo una separación completa {{cssxref("@font-face")}} el cual solo incluye un caracter, significando que solo ese caracter será estilizado con esa fuente. Podríamos haber hecho esto tambien encapsulando el caracter &amp; en un elemento {{HTMLElement("span")}} y aplicando una fuente solo a ese elemento, pero esto es un elemento y una regla extra.</p>
+
+<div class="example">
+<pre class="brush: css">@font-face {
+  font-family: 'Ampersand';
+  src: local('Times New Roman');
+  unicode-range: U+26;
+}
+
+div {
+  font-size: 4em;
+  font-family: Ampersand, Helvetica, sans-serif;
+}</pre>
+
+<h3 id="Reultado">Reultado</h3>
+
+<p><img alt="What the example should looks like if your browser supports it." src="https://mdn.mozillademos.org/files/6043/Refresult.png"></p>
+</div>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-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>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.at-rules.font-face.unicode-range")}}</p>