Problema al utilizar @font-face para fuentes de Google, ¿cómo mejorarlo para alcanzar 100/100 en Google Pagespeed?

webcontigo · 18 Feb 2016

Hola amigos.

Hay ocasiones en las que me obsesiono con las cosas, y una de esas es lograr 100/100 en pagespeed de Google.

Estoy tratando de correr una fuente de Google utilizando @font-face pero no funciona, estoy usando el código de Google
https://developers.google.com/speed/pagespeed/module/filter-css-inline-google-fonts

Hago un quote

Insertar CODE, HTML o PHP:

<html>
  <head>
    <title>inline_google_font_css example</title>
    <style>@font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/abcd.woff) format('woff');
    }
    </style>
    <style>
      body {
        font-family: 'Roboto', sans-serif;
      }
    </style>
  </head>
  <body>
  The font should be slightly more robotic.
  </body>
</html>

Si corren el archivo, van a ver que "si funciona", pero si quito el sans serif del font family el código no funciona.

Insertar CODE, HTML o PHP:

font-family: 'Roboto';

Llevo muchas horas navegando y no encuentro mucha información sobre esto, será por que todos hacen un "<link>".

Ojalá alguien tenga esta info, será de mucha ayuda para todos! Gracias

softwareweb · 18 Feb 2016

yo lo aria asi

PHP:

<html>
  <head>
    <title>inline_google_font_css example</title>
    <style>
      @import url(https://fonts.googleapis.com/css?family=Roboto);
      body {
        font-family: 'Roboto', sans-serif;
      }
    </style>
  </head>
  <body>
  The font should be slightly more robotic.
  </body>
</html>

Problema al utilizar @font-face para fuentes de Google, ¿cómo mejorarlo para alcanzar 100/100 en Google Pagespeed?

webcontigo

softwareweb