Solucionado (ver solução)
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!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software