CSS Não consigo mudar a fonte do h1 (HTML - CSS)

Arthur.l.f · 19 de abril de 2018

Bom, quero mudar o título mas não estou conseguindo. Estou assistindo umas vídeo aulas, e parei em um ponto onde não consigo trocar a fonte do h1.

Usei o método de pegar uma fonte externa do Google, e interna com a propriedade @font-face.

Agora tentei passei o h1 para h2 e, o que estava como h2 para h3 e funcionou, alguém sabe me explicar, por favor?

Aqui estão os códigos do HTML e do CSS:

HTML:

  <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Tudo sobre Google Glass</title>
    <link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet">
    <link rel="stylesheet" href="_css/estilo.css">
    
</head>
<body>
    <div id="interface">
    
        <header id="cabecalho">
            <hgroup>
                <h1>Google Glass</h1>
                <h2>A revolução do Google está chegando</h2>
            </hgroup>

CSS:

body{
    background-color: #dddddd;
    color: rgba(0,0,0,1);
}
#cabecalho{
     border-bottom: 1px #606060 solid;
     height: 150px;
     background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px;
}
#cabecalho h2{
    font-family: 'Bubblegum Sans', cursive;
    font-size: 30pt;
    color: #888888;
    font-size: 15pt;
    margin-top: 0px;
    padding: 0px;
}    
#cabecalho h1{
    font-family: 'Bubblegum Sans', cursive;
    margin-bottom: 0px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6)
    padding: 0px;
}

lucsilva · 19 de abril de 2018

Se eu não estiver enganado:

Você citou a font-family no h1 do estilo.css?

Ou pode ser simplesmente o .html dando preferência ao estilo.css por ser um arquivo da pasta enquanto o outro é referenciado da internet.

Arthur.l.f · 19 de abril de 2018

4 horas atrás, lucsilva disse:

Se eu não estiver enganado:

<link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet">
<link rel="stylesheet" href="_css/estilo.css">

Você citou a font-family no h1 do estilo.css?

Ou pode ser simplesmente o .html dando preferência ao estilo.css por ser um arquivo da pasta enquanto o outro é referenciado da internet.

Está desse jeito aqui olha:

#cabecalho h2{
    font-family: bubblegum sans, cursive;
    font-size: 30pt;
    color: #606060;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6)
    padding: 0px;
    margin-bottom: 0px;
}
#cabecalho h3{
    font-family: arial, sans-serif;
    color: #888888;
    font-size: 15pt;
    padding: 0px;
    margin-top: 0px;

}

Obs.: Ali onde está o h2 era o h1, depois de horas tentando fazer funcionar, só consegui mudar a fonte após alterar de h1 para h2.

Mas o que eu quero entender é o porque de o h1 não funcionar... Só funcionou a partir do h2.

Matheus Evandro Rech · 19 de abril de 2018

você tentou criar com o css interno ?

Arthur.l.f · 19 de abril de 2018

1 minuto atrás, Matheus Evandro Rech disse:

você tentou criar com o css interno ?

Como assim?

Você diz usar os códigos do css junto com os códigos do html?

Se for isso, nem sei como faço kk

Matheus Evandro Rech · 19 de abril de 2018

eu dei uma olhada e coloquei com o css interno,

ficou assim:

 <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Tudo sobre Google Glass</title>
<style>
body{
    background-color: #dddddd;
    color: rgba(0,0,0,1);
}
#cabecalho{
     border-bottom: 1px #606060 solid;
     height: 150px;
     background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px;
}
#cabecalho h2{
    font-family: 'Bubblegum Sans', cursive;
    font-size: 30pt;
    color: #888888;
    font-size: 15pt;
    margin-top: 0px;
    padding: 0px;
}    
#cabecalhoh1{
    font-family: 'Bubblegum Sans', cursive;
    margin-bottom: 0px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6)
    padding: 0px;
}

</style>

</head>
<body>
    <div id="interface">
    
        <header id="cabecalho">
            <hgroup>
                <h1 id="cabecalhoh1">Google Glass</h1>
                <h2>A revolucao do Google esta chegando</h2>
            </hgroup>

Não sei se era assim que você queria mais no meu mudou a fonte

navegantenarede · 19 de abril de 2018

Qual editor de código você está usando? O seu código está aplicando a fonte corretamente tanto no <h1> quanto no <h2> de acordo com a sintaxe do CSS, mas aparentemente a indentação com espaços ou caracteres em branco está causando problemas.

Segue o código funcionando:

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Tudo sobre Google Glass</title>
    <link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet">
    
</head>
<body>
    <div id="interface">
    
        <header id="cabecalho">
            <hgroup>
                <h1>Google Glass</h1>
                <h2>A revolução do Google está chegando</h2>
</hgroup>

CSS:

body {
  background-color: #ddd;
  color: rgba(0,0,0,1);
}
#cabecalho {
  border-bottom: 1px #606060 solid;
  height: 150px;
  background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px;
}

#cabecalho h2 {
  font-family: 'Bubblegum Sans', cursive;
  font-size: 30pt;
  color: #888888;
  font-size: 15pt;
  margin-top: 0px;
  padding: 0px;
}

#cabecalho h1 {
  font-family: 'Bubblegum Sans', cursive;;
  margin-bottom: 0px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
  padding: 0px;
}

Pré visualização (JSFiddle):

Sempre que acontecer esse tipo de problema, use as ferramentas de desenvolvedor do seu navegador e cheque o elemento que está com problema, se é no CSS, observe a parte de estilos que vai indicar o problema.

lucsilva · 19 de abril de 2018

Amigo, o problema não é o css. Você referenciou errado. Você informou pro HTML qual a relação do link do google fonts, mas não o que ele deve representar.

Utilize:

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

(exemplo)

e referencia no css:

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

Matheus Evandro Rech · 19 de abril de 2018

css interno é quando no <head> você cria <style> e coloca o css assim

<style>
body{
    background-color: #dddddd;
    color: rgba(0,0,0,1);
}
#cabecalho{
     border-bottom: 1px #606060 solid;
     height: 150px;
     background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px;
}
#cabecalho h2{
    font-family: 'Bubblegum Sans', cursive;
    font-size: 30pt;
    color: #888888;
    font-size: 15pt;
    margin-top: 0px;
    padding: 0px;
}    
#cabecalhoh1{
    font-family: 'Bubblegum Sans', cursive;
    margin-bottom: 0px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6)
    padding: 0px;
}

</style>

dai por exemplo:

você queira mudar o h1 você coloca assim

 <h1 id="cabecalhoh1">Google Glass</h1>

o id vai puxar as configurações que você mudou no style assim você nao precisa criar um arquivo separado .css

ou se você quiser mudar o h2 você muda la no nome do style

h2#cabecalhoh2{

as informaçoes que você queira

}

navegantenarede · 19 de abril de 2018

@lucsilva, ele referenciou de forma correta sim, como está indicado no Google Fonts, veja aqui.

Arthur.l.f · 19 de abril de 2018

6 minutos atrás, navegantenarede disse:

Qual editor de código você está usando? O seu código está aplicando a fonte corretamente tanto no <h1> quanto no <h2> de acordo com a sintaxe do CSS, mas aparentemente a indentação com espaços ou caracteres em branco está causando problemas.

Segue o código funcionando:

HTML:


<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Tudo sobre Google Glass</title>
    <link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet">
    
</head>
<body>
    <div id="interface">
    
        <header id="cabecalho">
            <hgroup>
                <h1>Google Glass</h1>
                <h2>A revolução do Google está chegando</h2>
</hgroup>

CSS:


body {
  background-color: #ddd;
  color: rgba(0,0,0,1);
}
#cabecalho {
  border-bottom: 1px #606060 solid;
  height: 150px;
  background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px;
}

#cabecalho h1 {
  font-family: 'Bubblegum Sans', cursive;;
  margin-bottom: 0px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

#cabecalho h2 {
  font-family: 'Bubblegum Sans', cursive;
  font-size: 30pt;
  color: #888888;
  font-size: 15pt;
  margin-top: 0px;
  padding: 0px;
}

Pré visualização:

Sempre que acontecer esse tipo de problema, use as ferramentas de desenvolvedor do seu navegador e cheque o elemento que está com problema, se é no CSS, observe a parte de estilos que vai indicar o problema.

Estou usando o Sublime Text. Neste momento estou tentando montar o quebra-cabeças aqui kk, já atualizo se deu certo.

Arthur.l.f · 19 de abril de 2018

@navegantenarede Então, eu mexi aqui, fechei e abri o editor, modifiquei os arquivos, e deu certo. Só não sei ainda qual era o verdadeiro problema, possivelmente era algum erro de indentação ou no editor mesmo.

Agora o #cabecalho h1 está funcionando normalmente.

navegantenarede · 19 de abril de 2018

@Arthur.l.f , o Sublime Text é um excelente editor, mas é bom ficar bem atento à sintaxe do CSS. No seu post original, parecia estar faltando um semicolon na linha:

text-shadow: 1px 1px 1px rgba(0,0,0,0.6)

E logo após vinha a linha com o padding:

padding: 0px;

Fora isso, havia apenas o problema da indentação, que pode ter sido resultado da cópia pelo fórum.

De toda forma, é sempre bom conferir esses detalhes que podem causar problemas e fazer com que as regras do CSS não funcionem, e checar também com as ferramentas de desenvolvedor, que vai te apontar para a solução.