Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
14
respostas

Fontes html/css do google

Galera, eu estou fazendo o exercicio do curso de html e css e fiquei com a seguinte duvida, Eu coloquei o link da fonte do google

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700"> no <head> do meu arquivo html e depois utilizei a fonte para o <h1> e <h2> do meu arquivo css, dessa maneira:
h1,h2{
    font-family: "Open Sans Condensed"; 
}

Mas isso não está alterando em nada a fonte da minha página que está sendo criada, quando eu deixo desse jeito ele está utilizando a fonte padrão, como se algo estivesse errado, alguém sabe o que pode ser?

14 respostas

Igor, boa noite! Você poderia tentar explicar de novo? Não sei o que aconteceu, mas a explicação da sua dúvida ficou meio confusa.

Caso você tenha colocado o link no arquivo .CSS, aí está o erro. Esta tag precisa estar dentro do

de sua pagina.

E dentro do .CSS somente os nomes das fontes.

Boa noite Igor, coloque seu código CSS dentro da tag style se for deixar seus estilos na página HTML.

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

Opa Igor beleza? Velhinho oque você esta fazendo de errado é o seguinte. Na imagem que você esta mostrando, como vemos, tu esta chamando a tag la das fontes do Google dentro do arquivo.css , e isso nao é o correto. Faça o seguinte, pegue esta tag e jogue a para dentro do seu arquivo.html, la em cima aonde se encontram as outras importações de , entendeu? lembrando que os dois arquivos precisam ficar no mesmo diretório(pasta) para que quando o css for chamado para aplicar as definições de layout ele funcione perfeitamente. Ou seja no seu arquivo.css não ira ter tag de nenhum;

Paulo, veja bem, a tag das fontes do google estão no arquivo html, a unica coisa que tem no meu CSS é a declaração da fonte: font-family: "Open Sans Condensed", sans-serif; mas não está tendo efeito algum.

Igor, publica sua

completa aqui pra gente dar uma olhada.

HTML:

<!DOCTYPE = html >

Sobre mim

Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de qualidade, durabilidade e que agregam valor para meus clientes.

Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.

Como trabalho

Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. Não trabalho com escopo fechado: o cliente é que decide quando o produto está pronto.

Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.

Experiência

Já desenvolvi projetos para grandes empresas como BMW, UOL e IBM. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.

Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.

Comunidade

Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.

CSS:

h1{ font-size: 60px; text-align: center; background-color: #851944; color: rgb(255,250,255); font-family: "Open Sans Condensed", sans-serif;

}

h2{ font-size: 40px; font-family: "Open Sans Condensed", sans-serif; body{ font-family: "Crimson Text"; background-color: #F2FFFC; font-size: 20px; } p{ text-align: justify }

HTML:

<!DOCTYPE = html
>
<head>
        <!-- carrega a fonte Crimson Text nas versões normal, itálico e negrito -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
    <!-- carrega a fonte Open Sans Condensed na versão negrito, -->
    <!-- que é a única necessária para os cabeçalhos            -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    <meta charset = "utf-8">
    <title>Bio</title>
    <link rel = "icon" href = "favicon.png">
    <link rel = "stylesheet" href="bio.css">
</head>
<body>
    <h1>Sobre mim</h1>
    <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>
    <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

    <h2>Como trabalho</h2>

    <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado:</strong> o cliente é que decide quando o produto está pronto.</p>

    <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada.</strong></p>

    <h2>Experiência</h2>

    <p>Já desenvolvi projetos para grandes empresas como BMW, UOL e IBM. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>
    <p>Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

    <h2>Comunidade</h2>

    Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.


</body>

CSS:


h1{ 
    font-size: 60px;
    text-align: center;
    background-color: #851944;
    color: rgb(255,250,255);
    font-family: "Open Sans Condensed", sans-serif; 

    }


h2{
    font-size: 40px;
    font-family: "Open Sans Condensed", sans-serif; 
body{
    font-family: "Crimson Text";
    background-color: #F2FFFC;
    font-size: 20px;
}
p{
    text-align: justify
}

Aqui seu código funcionou sem problemas ,de todo modo, tente setar o font-weight para 700, visto que você só importa a fonte neste tamanho.

O código funcionou, os arquivos estão na mesma pasta ? Caso não coloque na mesma e atualize.

No de vocês a fonte saiu a "opens sans condesed"? Aqui se eu tirar a font family fica a mesma coisa, como se a fonte que estivesse fosse a padrão do navegador.

Aqui saiu sim.

solução!

o h2 no seu css não esta fechado: {}

Galera, muitissimo obrigado pela ajuda, acho que o problema realmente era na chave do h2, devia ter bugado alguma coisa, obrigado mesmo a todos que me ajudaram!!