miércoles, 11 de febrero de 2015

Uso de fuentes externas sólo en fichero CSS

Si se desean usar fuentes externas, como por ejemplo Google Fonts, normalmente nos indicarán que para hacerlo necesitamos hacer un link href en la cabecera de nuestra página, y luego en nuestro fichero CSS ya podremos hacer referencia a la fuente. He aqui un ejemplo:
<link href="http://fonts.googleapis.com/css?family=Cuprum" type="text/css" rel="stylesheet" />
body {
  font-family: 'Cuprum', serif;
  font-size: 48px;
}
En ocasiones no nos interesa hacerlo así, ya que en cada página tendremos que incluir la referencia a la fuente, y si queremos cambiarla tendremos que ir página a página. O puede que estemos editando un fichero CSS de WordPress y queramos incluir una fuente sin tener acceso a las páginas HTML o PHP. En estos casos, podemos importar la fuente directamente desde dentro del fichero CSS. Hay varias formas de hacerlo, y aquí vamos a ver dos de ellas:

Forma 1
@font-face{
  font-family:'Droid Serif';
  font-style:normal;
  font-weight:400;
  src:local('Droid Serif'),local('DroidSerif'),url(http://fonts.gstatic.com/s/droidserif/v6/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
 }
body {
  font-family: 'Droid Serif';
  font-size: 14px;
}
Forma 2
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
  font-family: 'Open Sans';
  font-size: 14px;
}
Facil, ¿verdad?

0 comentarios :

Publicar un comentario

 

Copyright @ 2015 Tosblama