• Usar fuentes no estándar

    Publicado en septiembre 9, 2013 por en PageSpeed Insights, Seo On Page

    uso de fuentes no estandares en la web

    Uso de fuentes no estándar en la web

    Sobre tipografías o fuentes se puede escribir un master y es uno de los retos con los que cualquier diseñador web ha de enfrentarse cada día.

    Como breve información para novatos cabe explicar que:

    • Si usamos una fuente no estándar en el diseño de una web sólo la verán aquellas personas que la tengan instalada en su pc.
    • Muchas fuentes tienen derechos de autor y es preciso adquirir una licencia para poder usarlas.
    • Puede suceder que su visibilidad no sea compatible con la mayoría de los navegadores.

    Es por ello que hoy voy  a comentar un modo adicional de usar tipografías no estándares en la web usando la API de Google Fonts.

    Ventajas de usar Google Fonts Api

    • Ante todo y como primera ventaja es que tenemos un abanico más que generoso de fuentes de alta calidad y open source disponibles para usarlas en nuestras páginas web.
    • Se ven bien en la mayoría de los navegadores (nos han ahorrado el trabajo de testearlas)
    • Es muy fácil usarlas.

    Esto ya cambia un poquito nuestra visión con respecto al diseño web ¿verdad? Sin embargo creo que se hace imprescindible señalar que no debemos abusar del uso de fuentes no estándares porque ralentizan nuestra web y todos sabemos la especial importancia que Google le está dando ahora mismo a la velocidad del sitio en sus análisis.

    Este artículo no habría tenido lugar de no ser por esto que acabo de mencionar. Días atrás intentando mejorar precisamente la velocidad de mi sitio web para niños, hube de cambiar algunas cosas con respecto a las fuentes (uso la fuente Lukiest Guy de Google ) y los scripts (hago un uno moderado de scripts).

    Insertando el código en nuestras páginas web

    Una vez hemos localizado la fuente tipográfica que queremos usar Google (yo tomaré como referencia la que uso en mi web) nos da información sobre ella, uno de los datos es el impacto que tendrá en la descarga del sitio y nos hace la advertencia de que usar demasiados estilos de fuentes puede reducir la velocidad de nuestra web.

    Si la fuente dispone de más de un juego de caracteres nos advierte de que escojamos sólo aquellos que vayamos a necesitar.

    Finalmente nos ofrece 3 opciones para insertar la fuente en nuestro sitio web:

    • Standard: <link href=’http://fonts.googleapis.com/css?family=Luckiest+Guy’ rel=’stylesheet’ type=’text/css’>
      Esta instrucción la agregaríamos en cada documento de nuestro sitio web justo debajo de los metas.
    • Con la directiva @import: @import url(http://fonts.googleapis.com/css?family=Luckiest+Guy);
      Esta instrucción la pondríamos en un archivo CSS (hoja de estilos).
    • Con un javascript:

    <script type=”text/javascript”>
    WebFontConfig = {
    google: { families: [ ‘Luckiest+Guy::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>

    Este conjunto de código se puede colocar donde mejor convenga a lo largo del documento web.

    Una vez elijamos el modo de insertar la fuente en nuestro sitio web sólo nos queda integrarla en nuestras hojas de estilo CSS y se hace de la siguiente manera:  font-family: ‘Luckiest Guy’, cursive;

    Por ejemplo, si como es mi caso, queremos usar esta fuente únicamente para los titulares (etiquetas h1) la integraríamos de la siguiente forma:

    h1 {font-size: 28px;margin-top: 3px;display: inline;line-height: 46px;font-style: normal;font-family: “Luckiest Guy”;}

     

    ¿Cual de las tres maneras de usar la fuente es la mejor?

    Para ser honestos a la verdad tendría que responder no lo sé.  Esa disertación se la dejaré a  los expertos.  Sin embargo yo te voy a razonar porqué he descartado cada uno de los métodos y finalmente me he decantado por uno concreto.

    Modo Standard: el primer inconveniente que le encuentro es tener que incluir la instrucción entre las etiquetas “<head></head>” de cada documento.

    ¿Qué pasa si luego me canso de la fuente, veo otra que me gusta más y quiero cambiarla? ¿Os imagináis ese cambio en un sitio con 20  mil páginas? Me dan escalofríos sólo de pensarlo. (En mi caso no uso un gestor de contenidos, usándolo es tan simple como editar el header.php y con ello se actualiza todo el sitio)

    Sin embargo por ignorancia este fue mi primer método de uso y he aprendido con sudor y trabajo que hay que buscar la manera más eficiente a todos los niveles de uso.

    Sin embargo no me voy a quedar ahí, y el segundo motivo por el que he descartado esta opción es porque el propio Google así me lo ha indicado en su página de PageSpeed Insights:

    Optimize CSS Delivery of the following: http://fonts.googleapis.com/css?family=Luckiest+Guy

    Con la directiva @import: Esta es la opción más lógica de uso. Se incluye la fuente en una hoja de estilos que afecta a todo el sitio y sólo habría que cambiar aquí la instrucción en caso de cambio de fuente.  Esta es la instrucción que yo usaría si no tuviera tanto empeño en mejorar mi velocidad y dado que en Google Speed me da un mensaje de alerta advirtiéndome que ninguno de los contenidos  que hay por debajo de las instrucciones de más abajo se mostrarán hasta que estos archivos se carguen y me sugiere de que o bien aplace la carga de manera asíncrona o bien incluya los recursos directamente en el html pues he determinado que por ahora esta opción no es la que más me conviene.
    ·  Optimize CSS Delivery of the following:

    • http://www.miweb.com/css/styles.css
    • http://fonts.googleapis.com/css?family=Luckiest+Guy

    Con un javascript:  Si incluyo el código en un archivo JS tendría el mismo problema de parar la carga natural del sitio hasta que no se hubiera completado la lectura del JS por completo a no ser que lo cargase de manera asíncrona. Sin embargo visualmente no me agrada porque dependiendo de la velocidad de carga de conexión del visitante los titulares de mi sitio no se verían como yo quiero que se vean hasta que no se cargase ese archivo.

    Sin embargo puedo optar por incluir esa porción de código en cada documento de mi pagina web. Y me dirás, “si pero eso se contradice con la opción 1, ¿y si tienes 20 mil páginas?”.

    No asustarse :), tenemos la ventaja de que esta porción de código se puede insertar entre las etiquetas “<body></body>” con lo que si uso un gestor de contenidos (que no es mi caso) puedo incluirlo en la sección donde voy a necesitar que se cargue la fuente (generalmente en el head.php) y si uso un documento html puedo insertarlo usando el include donde cargo la cabecera del sitio:

    <?php   include $_SERVER[‘DOCUMENT_ROOT’] . ‘/include/cabecera.php’;  ?>

    De esta forma, si necesito cambiar la fuente lo haría de manera global en todo el sitio a la vez y se carga justo cuando necesito que lo haga con lo cual también mejoro la velocidad de mi sitio y gestiono mejor la descarga de los recursos que necesito.

    Evidentemente  esto es lo que mejor me ha venido a mi para un sitio en concreto y es el razonamiento usado en base a los resultados del análisis con Google Speed, luego cada quien es libre de usar lo que mejor le vaya 🙂

    Si tuviera que acogerme a una metología de programación sin dudarlo usaría la opción 2 porque es la manera más ordenada y lógica de usar los recursos.


Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

CERRAR
Leer entrada anterior
Leverage Browser Caching
PageSpeed Insights: Leverage Browser Caching

Leverage Browser Caching: Headers de Expiración Una de las maneras que tenemos para agilizar la velocidad de nuestro sitio es...

Cerrar