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@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:
Ver original<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
:
Ver original<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