6

Importar fuentes en CSS

11Nov
en CSS, CSS 3, Desarrollo web, Tutoriales

Cuando utilizamos la propiedad font-family de css, solo podemos especificar fuentes que se encuentren en el sistema del cliente. Para lograr añadir nuevas fuentes utilizaremos la regla @font-face con el fin de incorporarlas a los sistemas clientes.
Ejemplo:

@font-face {
    font-family: "nombre_de_la_fuente";
    src: url(dirección/relativa/de/la/fuente.ttf) format("truetype");
}

Aquí agregamos una fuente que llamaremos “nombre_de_la_fuente” de tipo True Type, luego con src especificamos la ubicacion del archivo fuente en formato ttf, se pueden especificar varias ubicaciones separadas por comas ya que no todos los navegadores reconocen el mismo formato, por ejemplo, para IE solo reconoce el formato eot.
Ahora podemos utilizar la fuente en alguna etiqueta font-family, por ejemplo:

#ident {
    font-family: "nombre_de_la_fuente";
    font-size: 10px;
    color:#123;
    }

6 Comentarios

  1. Nilmr dice:

    Muy importante ahora que se utilizan los iconos hechos con fuentes.

  2. Lilia Gutierrez dice:

    Muy buen articulo, gracias por el aporte!

  3. Pedro E. Palau dice:

    Está incompleto este artículo. Podrían mencionar además, que tipos de fuentes son compatibles con qué navegador. Pues existen otras extensiones como woff, ttf, svg, en fin. Agregen más información para que los muchachos que visiten este blog, pues tengan más información disponible sobre temas de desarrollo de software y tecnologías.

    • abs dice:

      Al igual que Ud. creo que sobre el tema hay mucho de que hablar. Más que ponerlo todo en un post, sería interesante y necesario para nosotros que personas como Ud, que conocen del tema hagan sus aportes a la comunidad, ya bien en los comentarios o en la redacción de artículos para el blog. Cualquiera de las variantes serán bienvenidas.
      Saludos

  4. El rubio dice:

    Lo probe y funciono perfectamente gracias por el tema

Dejar un comentario