2

Saudação para todos,

sou novo como programador Frond-End e estou aprendendo a colocar as fontes disponíveis do Google Fonts no meu HTML

Clique Aqui

Como você pode ver eu coloquei o link e as configuração do CSS e não pegou, aonde será que errei?

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;
}
2
  • 1
    acabei de tira e corrigir a postagem.
    – user10264
    6/06/2016 às 12:26
  • Testei seu código e funcionou perfeitamente de primeira. 6/06/2016 às 12:46

2 Respostas 2

2

Pasta você escolher sua fonte e clicar quick use

Imagem do Google Fonts

Após isso você poderá importar a fonte pro seu código usando 3 formas possíveis

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>

Escolha uma das 3 e use, eu particularmente recomendo o uso do HTML

Após importada só fazer a chamada da fonte em seu CSS

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

Você deve especificar o caminho da fonte fornecido no google fonts, logo após a fonte está instalada e pronto para usar, temos que utilizar o nome específico que o site fornece para funcionar corretamente. Veja um exemplo:

Usando o @import:

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

Ultilizando a fonte na tag desejada:

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

Lembre-se: O @import é um elemento CSS, então caso seja colocado no <head> do HTML, ele sempre devera ficar dentro de uma tag . Nesse exemplo, usei a fonte Dancing Script pelo Google Fonts, o código fica assim:

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

Usando a tag <link>

A tag <link>, diferente do @import vai direto no head do HTML. Veja o exemplo com a mesma fonte usada no exemplo acima.

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

Além da segurança de usar fontes do Google Web Fonts, temos também a facilidade, sem precisar fazer download de nada, apenas copiando o caminho da fonte desejada que já está hospedada nos servidores do google e especificando o seu nome no seu arquivo CSS.

Lembrando que o WebFonts já fornece o código pronto para inserção no seu CSS ou HTML.

Referencias:

  • Leia mais aqui
  • Veja uma pergunta semelhante aqui

Você deve fazer log-in para responder a esta pergunta.