Sustituir Google fonts o cargarlas de forma asíncrona

[KomsiKomsa]

Buenos días.

Necesito mejorar la velocidad de carga de mi página. Buscando, buscando ya he mejorado en el apartado Rendimiento todo lo de la caché, el html comprimido, etc. Pero sigo teniendo problema con las tipografías de google que utiliza mi plantilla.

También buscando he visto que tengo dos posibles soluciones:

1. Sustituir el enlace a la tipografía de google por la misma tipografía descargada en mi carpeta font del tema que uso.

2. Cargar las fuentes de forma asíncrona

¿Qué me recomendáis? Y sobre todo ¿cómo hacerlo?

Para sustituir las fuentes ya he visto que tengo que hacer cambios en mi archivo global.css de la plantilla, y ya me he descargado la tipografía. Pero necesitaría saber pasito a pasito cómo hacerlo, que tengo varias respuestas en foros guardadas donde se explica de manera diferente.

Para cargar las fuentes de forma asíncrona he encontrado un código javascript que se pega no se dónde, pero era para WordPress.

Y aquí estoy, dándole vueltas a la cabeza y a Internet en domingo...

Tengo Prestashop 1.6.1.16, y mi web, por si me queréis comentar sobre la volocidad (o cualquier otra mejora) es: https://www.komsikomsa.com/

Un saludo, 

[joseantgv]

1 hour ago, KomsiKomsa said:

Buenos días.

Necesito mejorar la velocidad de carga de mi página. Buscando, buscando ya he mejorado en el apartado Rendimiento todo lo de la caché, el html comprimido, etc. Pero sigo teniendo problema con las tipografías de google que utiliza mi plantilla.

También buscando he visto que tengo dos posibles soluciones:

1. Sustituir el enlace a la tipografía de google por la misma tipografía descargada en mi carpeta font del tema que uso.

2. Cargar las fuentes de forma asíncrona

¿Qué me recomendáis? Y sobre todo ¿cómo hacerlo?

Para sustituir las fuentes ya he visto que tengo que hacer cambios en mi archivo global.css de la plantilla, y ya me he descargado la tipografía. Pero necesitaría saber pasito a pasito cómo hacerlo, que tengo varias respuestas en foros guardadas donde se explica de manera diferente.

Para cargar las fuentes de forma asíncrona he encontrado un código javascript que se pega no se dónde, pero era para WordPress.

Y aquí estoy, dándole vueltas a la cabeza y a Internet en domingo...

Tengo Prestashop 1.6.1.16, y mi web, por si me queréis comentar sobre la volocidad (o cualquier otra mejora) es: https://www.komsikomsa.com/

Un saludo, 

 

La 1ª opción sin duda. El cambio es sencillo. Bájate los ficheros desde Google Fonts y súbelas a la carpeta /themes/theme1188/fonts/.

 

Luego en tu página tienes definidas las fuentes así:

 

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);@font-face {
    font-family: 'FontAwesome';
    src: url(https://www.komsikomsa.com/themes/theme1188/css/../fonts/fontawesome-webfont.eot?v=4.1.0);
    src: url(https://www.komsikomsa.com/themes/theme1188/css/../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0) format("embedded-opentype") , url(https://www.komsikomsa.com/themes/theme1188/css/../fonts/fontawesome-webfont.woff?v=4.1.0) format("woff") , url(https://www.komsikomsa.com/themes/theme1188/css/../fonts/fontawesome-webfont.ttf?v=4.1.0) format("truetype") , url(https://www.komsikomsa.com/themes/theme1188/css/../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular) format("svg");
    font-weight: normal;
    font-style: normal
}

Tendrías que buscar en qué CSS lo define y sustituir la URL por la carpeta.

Algunos themes tienen un configurador que permiten cambiar la fuente, por lo que esa info la generan dinámicamente.

[KomsiKomsa]

Hola de nuevo, gracias por contestar tan pronto.

Me he descargado la tipografía ROBOTO SLAB de google, pero solo está en formato .ttf
En fontsquirrel.com he encontrado los otros formatos pero se llama RobotoSlab-Regular-webfont

 

Estoy viendo que tanto global.css como casi todos los archivos de la carpeta css comienzan por:

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);

Y debo sustituirlo por algo así como esto que viene en un archivo css acompañando a la fuente.? ¿En todos los casos?

@font-face {
    font-family: 'roboto_slabregular';
    src: url('RobotoSlab-Regular-webfont.eot');
    src: url('RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('RobotoSlab-Regular-webfont.woff2') format('woff2'),
         url('RobotoSlab-Regular-webfont.woff') format('woff'),
         url('RobotoSlab-Regular-webfont.ttf') format('truetype'),
         url('RobotoSlab-Regular-webfont.svg#roboto_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

 

También he visto que en header.tpl hay:

{$HOOK_HEADER}
        <link rel="stylesheet" href="http{if Tools::usingSecureMode()}s{/if}://fonts.googleapis.com/css?family=Open+Sans:300,600&amp;subset=latin,latin-ext,cyrillic-ext" type="text/css" media="all" />

 

Estoy haciendo un clonado de la tienda para experimentar en ella. Porque miedo me da, cuando empiece a liarla.

Saludos.

[joseantgv]

13 hours ago, KomsiKomsa said:

Hola de nuevo, gracias por contestar tan pronto.

Me he descargado la tipografía ROBOTO SLAB de google, pero solo está en formato .ttf
En fontsquirrel.com he encontrado los otros formatos pero se llama RobotoSlab-Regular-webfont

 

Estoy viendo que tanto global.css como casi todos los archivos de la carpeta css comienzan por:

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);

Y debo sustituirlo por algo así como esto que viene en un archivo css acompañando a la fuente.? ¿En todos los casos?

@font-face {
    font-family: 'roboto_slabregular';
    src: url('RobotoSlab-Regular-webfont.eot');
    src: url('RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('RobotoSlab-Regular-webfont.woff2') format('woff2'),
         url('RobotoSlab-Regular-webfont.woff') format('woff'),
         url('RobotoSlab-Regular-webfont.ttf') format('truetype'),
         url('RobotoSlab-Regular-webfont.svg#roboto_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

 

También he visto que en header.tpl hay:

{$HOOK_HEADER}
        <link rel="stylesheet" href="http{if Tools::usingSecureMode()}s{/if}://fonts.googleapis.com/css?family=Open+Sans:300,600&amp;subset=latin,latin-ext,cyrillic-ext" type="text/css" media="all" />

 

Estoy haciendo un clonado de la tienda para experimentar en ella. Porque miedo me da, cuando empiece a liarla.

Saludos.

 

En font-family deja "Roboto Slab", que es como la referencias:

 

font: 400 18px/22px "Roboto Slab",serif;