Actualmente prácticamente cualquier empresa tiene una página web, y cada vez son más los particulares que tienen su propio portal o blog. En un mundo en el que cualquiera puede abrir un portal sencillo con tan solo saber usar Google, el diseño de los sitios web puede marcar la diferencia.
El diseño de los sitios web, cada vez es más estilizado y más cuidado. Se utilizan multitud de recursos (imágenes, capas flotantes, efectos con JavaScript…) para que la experiencia para el usuario sea lo más agradable posible. Sin embargo, cuando diseñamos un sitio web tenemos que tener especial cuidado con las tipografías, ya que una página web puede ser visitada desde cualquier sistema operativo (Windows, Linux, Mac, y cada vez más, dispositivos móviles). Es por esto que tenemos que intentar que la fuente que escojamos sea una fuente «de sistema», que venga instalada por defecto en todos estos equipos. O por lo menos así era…
Las fuentes compatibles con todos los sistemas operativos nos son muchas, y al final están muy vistas, son siempre las mismas. Por ello vamos a analizar una serie de métodos que podemos usar para usar más fuentes en nuestros sitios web.
Añadiendo un archivo de fuente (TTF) a nuestro sitio.
Probablemente sea el método más sencillo, ya que nos permite incluir cualquier fuente que hayamos descargado de internet. Debemos subir el fichero *.ttf a nuestro servidor, y posteriormente en la hoja de estilos de la página lo añadiremos con el siguiente código:
|
1 2 3 4 |
@font-face{ font-family: 'nombre_fuente'; src: url('ruta_al_archivo'); } |
Posteriormente, cuando queramos usar la fuente que hemos subido, la asignaremos en los estilos como hacemos habitualmente con la propiedad font-family. Con el nombre que le pusimos en el código anterior.
Siguiendo este método, el archivo con la fuente queda alojado en nuestro servidor y es descargado cuando el cliente visita la página web.
Utilizando un servicio web para cargar las fuentes.
Cada vez son más las páginas que utilizan fuentes personalizadas, y empiezan a aparecer algunos servicios web que nos permiten incluir diversas fuentes en nuestros sitios. Este es el caso de por ejemplo Google Web Fonts o Fonts.com Web Fonts. En este caso explicare como funciona el servicio de Goole.
Una vez que demos con la imagen que deseamos usar, veremos un link «Quick-use». Este enlace nos llevará a una página detallada de la fuente, donde podremos elegir una serie de opciones para incluirla en nuestra web.
Debemos saber, que cuantos más estilos incluyamos para la página, y mayor sea el juego de caracteres que permitimos incluir, mayor será el tiempo de carga. Por lo que recomiendo que incluyamos únicamente los estilos que vamos a usar, y que si no vamos a usar ningún carácter extraño, solo incluyamos el juego de caracteres básico.
En último lugar, se nos muestra el código a usar para insertar la fuente. Nos da tres opciones:
- Incluir la fuente como si de un CSS externo se tratase: <link href=’http://fonts.googleapis.com/css?family=Alegreya+SC:400,700italic’ rel=’stylesheet’ type=’text/css’>
- Incluir la fuente mediante un @import desde nuestras hojas CSS: @import url(http://fonts.googleapis.com/css?family=Alegreya+SC:400,700italic);
- Mediante Javascript:
1234567891011121314<script type="text/javascript">WebFontConfig = {google: { families: [fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][ 'Alegreya+SC:400,700italic:latin' ] }};(function() {var wf = document.createElement('script');wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';wf.type = 'text/javascript';wf.async = 'true';var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(wf, s);})();</script>
Cuando queramos usar esta fuente en nuestra página web, solo debemos asignarla por CSS como cualquier otra fuente: font-family: ‘Alegreya SC’, serif;
Como vemos, es muy sencillo incluir más fuentes en nuestro sitio web, y las opciones de darle un aspecto distinto. Has elegido ya que fuente usaras en tu próximo proyecto?[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
hola, muy buen tutorial. Tengo este problema, yo estoy usando la fuente open type Helvetica Lt Std, de la cual uso 4 estilos. Al momento de subirlos a mi servidor para luego darle el código @font-face en el CSS externo, la URL que debo asignarle, cual debe ser? ya que me aparecen los 4 estilos y no como una fuente de familia. O debo agregar, a cada estilo, sus propias URLs??? GRACIAS y buena vibra!!!
Buenas tardes Fer,
La etiqueta @font-face vincula cada archivo *.ttf con un nombre que le asignas en el font-family. Si deseas añadir distintos estilos (bold, semi-bold…) deberás añadir más etiquetas @font-face, indicando en todas ellas el mismo font-family, e indicando el estilo de la fuente, lo cual lo haces añadiendo dentro de @font-face los valores font-weight o font-style.
Estoy redactando una entrada en la que explico más extensamente el uso del @font-face, en un rato estará disponible.
Un saludo!
[…] publiqué hace algún tiempo en la entrada “Incluir fuentes con CSS cuando programas tu web“ hay diversas formas de añadir fuentes en nuestra página […]