4

He descargado las fuentes de Google Fonts y quiero saber si es posible utilizar @import y @font-face en un mismo proyecto para por si acaso alguna de las 2 formas de cargar fuentes no funciona. ejemplo:

@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900';

@font-face {
  font-family: robotoReplacement;
  src: url(Roboto-light.ttf),
       url(Roboto-thin.ttf),
       url(Roboto-Regular.ttf),
       url(Roboto-Medium.ttf),
       url(Roboto-Bold.ttf),
       url(Roboto-black.ttf); 
}

body {
  font-family: 'Roboto', robotoReplacement;
}

p {
  font-weight: normal;
}

h1 {
  font-weight: bold;
}

¿Es posible?

7
  • 4
    No veo porque no, ¿has tenido algón problema con eso?
    – user7176
    Commented el 22 jun. 2016 a las 7:51
  • 2
    Esto sólo hará la carga más lenta sin ningún beneficio, saludos. Commented el 22 jun. 2016 a las 9:37
  • Deberías de usar tan solo la fuente guardada en local dado que es más eficiente y seguro
    – hakai
    Commented el 22 jun. 2016 a las 14:21
  • Claro que se puede, si no funciona una, fubciona la otra
    – jonathan
    Commented el 27 jun. 2016 a las 2:46
  • 1
    @hakai entendí seguridad de otra manera, yo a eso lo llamo fiabilidad. Sobre la petición remota, eso no es del todo correcto: tendrás una conexión a otro servidor que puede (o no) ser más lento que el que sirve la página, no tiene por qué tardar más en cargar la fuente. Con CDN/Google Fonts puede que otro sitio ya haya usado la fuente y el navegador la tenga disponible tardando mucho menos en cargar. También al tenerlas en tu propio servidor estarías usando una conexión adicional para cargar la fuente, lo que hará que el resto de contenido tarde más en cargarse (por los límites de conexiones)
    – Alvaro Montoro
    Commented el 21 sept. 2016 a las 12:47

1 respuesta 1

1

Sí, ya que son dos cosas diferentes.

El @import es para importar otro fichero de hojas de estilo (.css) y el @font-face es exclusivamente para añadir fuentes de texto.

Encontrarás más información en este enlace:

http://www.htmldog.com/guides/css/advanced/atrules/

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.