Cuando queremos usar una fuente de google fonts se nos proporciona un código para incorporar al .css o mediante una etiqueta <style> , por ejemplo:
@import url(‘https://fonts.googleapis.com/css?family=Roboto‘);
Esto tiene tres problemas.
* Con el import lo que haces es cargar un archivo .css externo. Es poco peso, pero no deja de ser un archivo mas, otra llamada al servidor, etc.
* Meter un css dentro de otro ralentiza el render de la pagina, al cargarlos de forma secuencial y tener que esperar a estar todos cargados para empezar con el render de la pagina.
* Carga a veces fuentes innecesarias.
El codigo anterior por ejemplo, si abrimos directamente la url en el navegador podremos ver que carga versiones de la fuente en cirilico, vietnamita, griego, etc. hasta 7 versiones distintas.
Se supone que estas fuentes especificas por idioma solo se cargan cuando son utilizados caracteres del idioma en cuestion, pero si tu web no la tienes traducida a esos idiomas es innecesario meter todo ese codigo.
Es mas sensato copiar solo los font-face del codigo de google que vayamos a utilizar, usualmente, algo así:
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
.