1

Llevo un tiempo intentando aplicar la fuente Open Sans en un proyecto con HTML, CSS y el framework Bootstrap.

Link para importar la fuente:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

El problema es que sólo funciona con el CSS3 utilizándolo en la forma Internal Style sheet.

Código:

  • De esta forma funciona (añadiendo el elemento style al HTML):

        <style type="text/css">
        h1 {
           font-family: Open Sans;
        }
        </style>
    
  • De esta otra forma (en el archivo .css) no:

      h1 {
        font-family: Open Sans;
      }
    

He probado los diferentes imports:

 <style>
      @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 </style>

Según lo que he encontrado, también he probado a quitar el http:, con @font-face pero sigue sin darme resultado. Alguna idea?

Head del HTML:

  <head>
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>Portfolio Webpage</title>
     <script src="https://use.fontawesome.com/fe361c97c5.js"></script>
     <link rel="stylesheet" href="style.css"/>
     <link href="C:\DESARROLLO WEB\FrontEnd\BOOTSTRAP\bootstrap-3.3.7-
      dist\css\bootstrap.min.css" rel="stylesheet"/>
     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js">
     </script>
 </head>
2
  • Estuve probando y si me funciona fijate
    – Alvarez
    el 3 oct. 2017 a las 18:00
  • Es probable estés teniendo un 404 con la fuente.
    – gugadev
    el 3 oct. 2017 a las 18:01

2 respuestas 2

2

Me parece que el problema es que te faltan las comillas en el css:

h1 {
  font-family: 'Open Sans', sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<h1>Open sans</h1>
<p>Otra letra</p>

La otra posibilidad es que bootstrap esté pisando tu elección de fuente, en ese caso seguramente sea suficiente con ubicar tu css al final.

Otra opción es customizar bootstrap utilizando sass o less.

2
  • Con comillas lo he probado, simples y dobles. Pero creo que lo de ponerlo al final no lo he hecho, voy a probarlo gracias.
    – MigherdCas
    el 4 oct. 2017 a las 6:40
  • Con o sin comillas igual se renderiza; sin embargo lo recomendado es siempre usar comillas.
    – gugadev
    el 4 oct. 2017 a las 16:51
0

Ya he encontrado la solución: Sólo he tenido que mover el import del archivo .css por encima del import del Bootstrap.

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.