¿Cómo agregar alguna fuente no estándar a un sitio web?
¿Existe alguna manera de agregar alguna fuente personalizada en un sitio web sin usar imágenes, Flash u otros gráficos?
Por ejemplo, estaba trabajando en un sitio web de bodas y encontré muchas fuentes bonitas para ese tema. Pero no encuentro la manera correcta de agregar esa fuente en el servidor. ¿Y cómo incluyo esa fuente con CSS en el HTML? ¿Es posible prescindir de los gráficos?
Esto se podría hacer a través de CSS:
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
Es compatible con todos los navegadores habituales si utiliza TrueType-Fonts (TTF), Web Open Font Format (WOFF) o Embedded Opentype (EOT).
Puede agregar algunas fuentes a través de Google Web Fonts .
Técnicamente, las fuentes están alojadas en Google y las vinculas en el encabezado HTML. Luego, puedes usarlos libremente en CSS con @font-face( leer sobre esto ).
Por ejemplo:
En la <head>sección:
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
Luego en CSS:
h1 { font-family: 'Droid Sans', arial, serif; }
La solución parece bastante fiable (incluso Smashing Magazine la utiliza para el título de un artículo ). Sin embargo, hasta el momento no hay tantas fuentes disponibles en Google Font Directory .
El camino a seguir es utilizar la declaración CSS @font-face, que permite a los autores especificar fuentes en línea para mostrar texto en sus páginas web. Al permitir que los autores proporcionen sus propias fuentes, @font-face elimina la necesidad de depender del número limitado de fuentes que los usuarios han instalado en sus computadoras.
Eche un vistazo a la siguiente tabla:
Como puede ver, hay varios formatos que necesita conocer principalmente debido a la compatibilidad entre navegadores. El escenario en los dispositivos móviles no es muy diferente.
Soluciones:
1 - Compatibilidad total con el navegador
Este es el método que cuenta con el mayor apoyo posible en este momento:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 - La mayor parte del navegador
Sin embargo, las cosas están cambiando mucho hacia WOFF , por lo que probablemente puedas salirte con la tuya:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
3 - Sólo los navegadores más recientes
O incluso simplemente WOFF.
Luego lo usas así:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
Referencias y lecturas adicionales:
Eso es principalmente lo que necesita saber sobre la implementación de esta función. Si desea investigar más sobre el tema, le recomiendo que consulte los siguientes recursos. La mayor parte de lo que pongo aquí está extraído de lo siguiente
- Usando Font Face (Muy recomendado)
- Sintaxis @font-face a prueba de balas
- ¿Puedo utilizar fuentes web @font-face?
- Cómo archivar compatibilidad con Cross-Browser @font-face
- @font-face en la red de desarrolladores CSS Mozilla
