Google Font does not work in external CSS


I have been trying for some time to apply the Open Sans source in a project with HTML, CSS and the framework Bootstrap .

Link to import the source:

<link href="" rel="stylesheet">

The problem is that it only works with CSS3 using it in the form Internal Style sheet .


  • This way it works (adding the style element to HTML):

        <style type="text/css">
        h1 {
           font-family: Open Sans;
  • In this other way (in the .css file) no:

      h1 {
        font-family: Open Sans;

I have tried the different imports:

      @import url('');

According to what I have found, I have also tried to remove the http :, with @ font-face but it still does not work. Any ideas?

Head of HTML:

     <link href=',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=""></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=""></script>
     <script src="">
asked by MigherdCas 03.10.2017 в 19:42

2 answers


I think the problem is that you are missing the quotes in the css:

h1 {
  font-family: 'Open Sans', sans-serif;
<link href="" rel="stylesheet">
<h1>Open sans</h1>
<p>Otra letra</p>

The other possibility is that bootstrap is stepping on your choice of source, in which case it is probably sufficient to place your css at the end.

Another option is to customize bootstrap using sass or less.

answered by 04.10.2017 в 05:27

I have already found the solution: I just had to move the import of the .css file over the import of the Bootstrap.

answered by 04.10.2017 в 18:46