Foros del Web » Creando para Internet » CSS »

Varias tipografías en el css de google fonts

Estas en el tema de Varias tipografías en el css de google fonts en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 04/09/2015, 10:33
Avatar de Benderzuelo  
Fecha de Ingreso: mayo-2013
Ubicación: España
Mensajes: 223
Antigüedad: 11 años, 6 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
  #2 (permalink)  
Antiguo 04/09/2015, 15:26
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años
Puntos: 91
Respuesta: Varias tipografías en el css de google fonts

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
  #3 (permalink)  
Antiguo 05/09/2015, 12:49
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Varias tipografías en el css de google fonts

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

Código CSS:
Ver original
  1. <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.
__________________
(:
  #4 (permalink)  
Antiguo 07/09/2015, 00:21
Avatar de Benderzuelo  
Fecha de Ingreso: mayo-2013
Ubicación: España
Mensajes: 223
Antigüedad: 11 años, 6 meses
Puntos: 5
Respuesta: Varias tipografías en el css de google fonts

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

Etiquetas: fonts, import, javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:20.