Varias tipografías en el css de google fonts

[Benderzuelo]

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:

@import url(https://fonts.googleapis.com/css?family=Cabin:400,700);
@import url(https://fonts.googleapis.com/css?family=Arimo);
@import url(https://fonts.googleapis.com/css?family=Vollkorn:400,400italic);
 

Luego en el head tengo estas tres:

Código HTML:

<link href='https://fonts.googleapis.com/css?family=Cabin:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<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:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Cabin:400,700: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>
 
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Arimo::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>
 
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Vollkorn:400,400italic: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>
 

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

[AngelKrak]

no se pueden poner 2 enlaces un una misma linea amigo, tienen que ser como las tienes amigo, ya que si no no te las lee y no ahi forma de hacerlo que lo lea hasta donde yo se jejeje xD

[pzin]

Puedes hacer solo una llamada a la API de Google con varias fuentes:

Código CSS:

<link href="https://fonts.googleapis.com/css?family=Cabin:400,700|Arimo|Vollkorn:400,400italic" rel="stylesheet">
 

Supongo que podrás hacer lo mismo para tu código JavaScript.

También puedes usar @import y meterlo en un fichero CSS.

[Benderzuelo]

gracias Pzin, lo último lo de usar @import y meterlo en un CSS, te refieres a ponerlo los imports en un mismo css no?, si es así, ya lo tengo si no, te agradecería que me lo explicaras :)

Muchas gracias por la respuesta