How to use available fonts from Google Fonts in HTML?

Asked

Viewed 19,178 times

2

Greeting to all,

I am new as Frond-End programmer and am learning to put the available fonts from Google Fonts in my HTML

Click Here

As you can see I put the link and the CSS settings and did not take, where did I go wrong?

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
    <title>Condonager</title>
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
    <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
</head>
<body>

<header>
   <div class="container">
      <img src="images/logo.png" width="220" height="100">
  </div>
</header>

<div class="lema">

   <p>Seja bem vindo ao novo conceito inovador e inteligente em gestão Condicional</p>

</div>

</body>
</html>

CSS

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

header{
    border-bottom: 1px solid #ccc;
}

header img{
    margin-top: 12px;
}

.container{
    width: 1200px;
    padding-left: 20px;
    padding-right: 15px;
    margin: 0;
}

.lema{
    text-align: center;
}

.lema > p {
    margin-top: 35px;
    margin-bottom: 15px;
    font-family: 'Pacifico', cursive;
}
css3
  • 1

    just strip and fix the posting.

  • I tested your code and it worked perfectly at first.

2 answers

3


Folder you choose your font and click Quick use

Imagem do Google Fonts

After that you can import the source to your code using 3 possible ways

HTML

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

CSS

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

Javascript

<script type="text/javascript">
WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }
    };
    (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
</script>

Choose one of the 3 and use, I particularly recommend using the HTML

After imported just make the source call on your CSS

font-family: 'Open Sans', sans-serif;

0

You must specify the font path provided on google fonts, right after the font is installed and ready to use, we have to use the specific name that the site provides to work properly. Take an example:

Using the @import:

@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

Ultilizing the font in the desired tag:

h1 {
    font-family: 'Titillium Web', sans-serif;
}

Remember: The @import is an element CSS, then if it is placed on <head> of HTML, it should always stay inside a tag . In this example, I used the source Dancing Script by Google Fonts, the code looks like this:

<style>
@import url(http://fonts.googleapis.com/css?family=Dancing+Script);
</style>

Using the tag <link>

The tag <link>, other than @import goes straight into the head of HTML. See the example with the same font used in the example above. 

<head>
    <title>Google Fonts</title>
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
</head>

In addition to the security of using Google Web Fonts fonts, we also have the facility, without needing to download anything, just copying the path of the desired source that is already hosted on the servers of the google and specifying your name in your CSS file.

Recalling that the Webfonts already provides ready-to-insert code in your CSS or HTML.

References:

  • Read more here
  • See a similar question here

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.