Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/09/2015, 10:33
Avatar de Benderzuelo
Benderzuelo
 
Fecha de Ingreso: mayo-2013
Ubicación: España
Mensajes: 223
Antigüedad: 10 años, 9 meses
Puntos: 5
Información Varias tipografías en el css de google fonts

Hola amig@s,

hoy quería preguntaros si hay alguna otra forma de hacer que cuando incluimos fuentes de google fonts no incluir tantas líneas de código.

Ahora por ejemplo voy a incluir 3 fuentes y tengo 3 lineas de css, 3 links y 3 de javascript, por ejemplo:

Código CSS:
Ver original
  1. @import url(https://fonts.googleapis.com/css?family=Cabin:400,700);
  2. @import url(https://fonts.googleapis.com/css?family=Arimo);
  3. @import url(https://fonts.googleapis.com/css?family=Vollkorn:400,400italic);

Luego en el head tengo estas tres:

Código HTML:
Ver original
  1. <link href='https://fonts.googleapis.com/css?family=Cabin:400,700' rel='stylesheet' type='text/css'>
  2. <link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
  3. <link href='https://fonts.googleapis.com/css?family=Vollkorn:400,400italic' rel='stylesheet' type='text/css'>

y por ultimo en javascript tengo estas 3:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.   WebFontConfig = {
  3.     google: { families: [ 'Cabin:400,700:latin' ] }
  4.   };
  5.   (function() {
  6.     var wf = document.createElement('script');
  7.     wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  8.       '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  9.     wf.type = 'text/javascript';
  10.     wf.async = 'true';
  11.     var s = document.getElementsByTagName('script')[0];
  12.     s.parentNode.insertBefore(wf, s);
  13.   })(); </script>
  14.  
  15. <script type="text/javascript">
  16.   WebFontConfig = {
  17.     google: { families: [ 'Arimo::latin' ] }
  18.   };
  19.   (function() {
  20.     var wf = document.createElement('script');
  21.     wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  22.       '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  23.     wf.type = 'text/javascript';
  24.     wf.async = 'true';
  25.     var s = document.getElementsByTagName('script')[0];
  26.     s.parentNode.insertBefore(wf, s);
  27.   })(); </script>
  28.  
  29. <script type="text/javascript">
  30.   WebFontConfig = {
  31.     google: { families: [ 'Vollkorn:400,400italic:latin' ] }
  32.   };
  33.   (function() {
  34.     var wf = document.createElement('script');
  35.     wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  36.       '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  37.     wf.type = 'text/javascript';
  38.     wf.async = 'true';
  39.     var s = document.getElementsByTagName('script')[0];
  40.     s.parentNode.insertBefore(wf, s);
  41.   })(); </script>


En javascript seguro que se puede porque es añadir las otras dos familias después de la primera, pero no se como sería, no se si sería una coma y abrir corchetes por cada familia o como?, si alguien lo sabe por favor lo agradecería.

En los links de html imagino que al ser variables también se podría pero no se como tampoco y en CSS lo mismo...

Alguien sabe como hacerlo ó si se puede hacer?

Muchas gracias de antemano