1

Quiero añadir hojas de estilo a mi CSS, pero no puedo. He probado dirigiéndome a la web donde están :

@import url(“https://fonts.googleapis.com/css?family=Poiret+One”);
@import url(“fonts.googleapis.com/css?family=Ubuntu+Condensed”);

Sin resultado, por lo que me descargue esas mismas APIs en mi archivo CSS, poniéndoles un nombre cualquiera. He intento acceder a ellas de varias formas, revisando documentación de MDN y de w3schools, sin éxito.

Alguien puede decirme la forma correcta para conseguir añadir esos estilos. Gracias.

3
  • 1
    Después de importarlas ¿has hecho la declaración @font-face?
    – asantana o
    Commented el 22 oct. 2017 a las 22:50
  • No, como he de hacerlo...? Commented el 23 oct. 2017 a las 7:02
  • Tambien tengo que decir que la estoy poniendo en una aplicacion, por eso las descargue en un archivo, las tengo en mi carpeta CSS. No se si es que para lo que quiero no vale, pues se supone que no estoy conectado, de ahi que las tenga em archivos. Gracias por la ayuda Commented el 23 oct. 2017 a las 7:10

1 respuesta 1

3

Un posible ejemplo:

/* Importamos fuentes, ¡importante! que este al principio de tu CSS tu @import. */

@import url('https://fonts.googleapis.com/css?family=Poiret+One');
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');

/* Creamos nuestras fuentes */

.poiret {
  font-family: 'Poiret One', cursive;
  font-size: 30px;
}

.ubuntu {
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 30px;
}
<p class="poiret">Soy la fuente Poiret One</p>
  <p class="ubuntu">Soy la fuente Ubuntu Condensed</p>


Una alternativa seria usar Font Squirrel y descargar la fuente como .ttf y lo conviertes en una fuente valido para tu web, sería necesario 3 formatos (woff, eot, ttf).

Descargar Poiret .ttf
Descargar Ubuntu .ttf

Una vez descargado las fuentes los conviertes en un formato valido mediante un generador que puedes encontrar en la misma página. Seleccionas modo EXPERT para así seleccionar los 3 formatos necesarios (TrueType, WOFF, EOT Lite).

WebFont generador

Las fuentes que has convertidos los debes incluir a tu carpeta raiz de tu proyecto web, personalmente crearía una carpeta llamado fonts para tenerlo organizado.

Carpeta raiz

fonts

  • poiretone-regular-webfont.eot
  • poiretone-regular-webfont.woff
  • poiretone-regular-webfont.ttf

Tu archivo CSS quedara algo así para añadir nuestra fuente:

@font-face {
    font-family: 'poiret_oneregular';
    src: url('fonts/poiretone-regular-webfont.eot');
    src: url('fonts/poiretone-regular-webfont.eot?#iefix') format('embedded-opentype'),             
         url('fonts/poiretone-regular-webfont.woff') format('woff'),
         url('fonts/poiretone-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

/* Si deseas usar la fuente */
body {
  font-family: 'poiret_oneregular';
}
7
  • Hola, asi ya lo tengo, pero no me las reconoce. No se porque , pero n funciona Commented el 23 oct. 2017 a las 7:03
  • 1
    @MiguelEspeso que raro, ¿has mirado que tus @import url estén al principio de tu CSS? Digamos es lo primero que debería ir. Te he dejado también un ejemplo alternativo usando Font Squirrel .
    – D.Bulten
    Commented el 23 oct. 2017 a las 11:00
  • Muchas gracias, voy a practicarlo, el problema, era que no entendia lo de format('.......................'). Creo que ahora lo pille. gracias de nuevo Commented el 23 oct. 2017 a las 13:06
  • 1
    De nada @MiguelEspeso, una vez generas las fuentes y lo descargas, tu archivo winrar también te ofrece un ejemplo CSS, si te ha valido la respuesta después de tus pruebas podrías aceptarla como solución, así podrá servir a otros usuarios con el mismo problema. Un saludo.
    – D.Bulten
    Commented el 23 oct. 2017 a las 14:16
  • 2
    @Miguel el ✔️ a la izquierda de esta respuesta, debajo de las flechas para votar... Ambos ganan reputación
    – Mariano
    Commented el 23 oct. 2017 a las 19:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.