¿Cómo usar fuentes web?
Introducción
Solemos usar Google Fonts en nuestros procesos de diseño y desarrollo. Es la forma más sencilla de añadir fuentes a una web, y la selección de Google es excelente tanto en calidad como en compatibilidad. Cuando necesitamos fuentes personalizadas, recurrimos a Font Squirrel.
Aquí tienes una guía breve para empezar con estas herramientas.
Contenido
- ¿Cómo añadir una o varias fuentes con Google Fonts?
- ¿Cómo usar Google Fonts en local?
- ¿Cómo usar fuentes personalizadas?
- ¿Cómo conseguir que las fuentes web se vean igual en todas las plataformas?
Cómo añadir una o varias fuentes con Google Fonts
Entra en Google Fonts.
- Busca y añade las fuentes.
- Selecciona solo los estilos y ajustes imprescindibles (Light, Regular, Bold). No uses el cirílico extendido; en la mayoría de los casos basta con el cirílico básico. Las versiones extendidas incluyen símbolos de alfabetos poco comunes con letras antiguas y eclesiásticas. (Algunas todavía se usan en poblaciones de Siberia).
- Copia y pega en tu proyecto el enlace a las fuentes que vas a usar.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:400,700" rel="stylesheet"/>
Si ves más de dos fuentes personalizadas con más de tres estilos distintos, confírmalo con tu diseñador. Afectará negativamente a la velocidad de carga de la página.
Cómo usar Google Fonts en local
Usamos google-webfonts-helper para descargar fuentes ya preparadas de la base de datos de Google Fonts.
- Busca la fuente.
- Elige los estilos.
- Copia el CSS.
- Descarga el kit.
Para usar las fuentes en una aplicación Ruby on Rails, copia los archivos del comprimido en el directorio assets/fonts. Crea un archivo adicional, fonts.css.scss, en assets/stylesheets/application y pega ahí el CSS del tercer paso. Por último, sustituye la ruta de las fuentes para que funcione con el asset helper.
@font-face { font-family: 'Poiret One'; font-style: normal; font-weight: 400; src: url(font_path('poiret-one-v4-cyrillic_latin-regular.eot')); /* IE9 Compat Modes */ src: local('Poiret One'), local('PoiretOne-Regular'), url(font_path('poiret-one-v4-cyrillic_latin-regular.eot?#iefix')) format('embedded-opentype'), /* IE6-IE8 */ url(font_path('poiret-one-v4-cyrillic_latin-regular.woff2')) format('woff2'), /* Super Modern Browsers */ url(font_path('poiret-one-v4-cyrillic_latin-regular.woff')) format('woff'), /* Modern Browsers */ url(font_path('poiret-one-v4-cyrillic_latin-regular.ttf')) format('truetype'), /* Safari, Android, iOS */ url(font_path('poiret-one-v4-cyrillic_latin-regular.svg#PoiretOne')) format('svg'); /* Legacy iOS */}
Cómo usar fuentes personalizadas
A veces necesitarás fuentes personalizadas que no están en Google Fonts. Para eso nos gusta Font Squirrel. Es un servicio muy fácil de usar para convertir fuentes al formato web, y en el modo experto encontrarás muchos ajustes de conversión. Eso sí, ten en cuenta que no obtendrás exactamente la misma calidad que con una fuente web original.
Cómo conseguir que las fuentes web se vean igual en todas las plataformas
Puede que ya te hayas dado cuenta de que las fuentes se ven ligeramente distintas en macOS, Linux y Windows. En macOS y Linux parecen más gruesas.
Para evitarlo y que las fuentes se vean igual en todas las plataformas, te recomendamos usar font-smoothing: antialiased. La propiedad CSS font-smooth controla cómo se aplica el suavizado (anti-aliasing) al renderizar las fuentes. El antialiasing suaviza las fuentes a nivel de píxel, en lugar de a nivel de subpíxel. Pasar del renderizado por subpíxeles al antialiasing en textos claros sobre fondos oscuros hace que las fuentes se vean más finas.
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
