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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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