Google Font does not work in external CSS

Question

Google Font does not work in external CSS

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

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="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

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

Code:

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

    <style type="text/css">
    h1 {
       font-family: Open Sans;
    }
    </style>

In this other way (in the .css file) no:
```
  h1 {
    font-family: Open Sans;
  }
```

I have tried the different imports:

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

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:

  <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>

html css3 fonts google-fonts

asked by MigherdCas 03.10.2017 в 19:42

source

2 answers

delete node in a binary search tree Error in conditional with estamento in: "requires string as left operand, not set"

score 2 · Answer 1

I think the problem is that you are missing the quotes in the 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>

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.

score 0 · Answer 2

0

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