00:00:00
e na vídeo aula de hoje eu vou mostrar
00:00:02
para vocês como trocar algumas Fontes
00:00:05
aqui como embelezar um pouquinho mais o
00:00:08
meu mudo Ou seja eu vou falar um pouco
00:00:10
de customização de mudo tá bom É bem
00:00:13
interessante porque eu vou mostrar como
00:00:15
você vai aplicar uma fonte no seu mudou
00:00:17
de uma forma bem simples bem fácil tá
00:00:20
não precisa ser desenvolvedor não
00:00:22
precisa conhecer muito digo código é
00:00:25
claro que uma é algo tão simples assim
00:00:27
mas eu vou explicar de uma forma bem
00:00:30
bacana bem vou tentar simplificar ao
00:00:32
máximo para que ficar para que fique
00:00:34
fácil para você que não conhece nada de
00:00:36
código é
00:00:38
essa Sem dúvida nenhuma é a forma mais
00:00:40
fácil de fazer o que eu vou mostrar a
00:00:42
tem outras formas mais complexas é mais
00:00:46
avançadas que não mente quem faz são
00:00:48
desenvolvedores assim como nós fazemos
00:00:50
aqui na Madre Produções a madeira de
00:00:52
produções quando a gente vai customizar
00:00:54
um template para algum cliente a gente
00:00:56
faz a forma mais difícil mas complexa
00:00:58
porque ela é mais duradora E tem alguns
00:01:01
benefícios
00:01:02
diferentes porque a gente tá fazendo uma
00:01:04
customização maior mas para
00:01:06
customizações mais pontuais assim isso
00:01:08
vai servir muito bem para você tá bom
00:01:11
então basta você ter o que uma senha de
00:01:14
administrador e uma boa vontade para
00:01:17
fazer uma primeira coisa que eu preciso
00:01:19
a enfim mas antes até deixa eu explicar
00:01:22
para quem não sabe o que eu tô falando
00:01:24
de fonte fonte isso aqui tá são os tipos
00:01:29
aqui são as letras né então
00:01:32
você pode trocar isso tenho diferentes
00:01:35
tipos de letras e a gente vai ver isso
00:01:36
agora sabe vamos fazer o seguinte vamos
00:01:39
no Google né aqui no buscador do Google
00:01:42
e tem um ambiente aqui que ele é
00:01:44
riquíssimo em oferta e oferece uma
00:01:47
porção de fontes diferentes assim e
00:01:51
gratuitamente e você vai se surpreender
00:01:53
com quem quem é que faz isso nada mais
00:01:56
nada menos do que o nosso amigo Google
00:01:58
fonts até Ok
00:02:02
Google onde no Google e ele vai te dar a
00:02:05
própria página dele e ele fornece Fontes
00:02:08
gratuitamente para todos nós gente pode
00:02:11
usar aqui
00:02:13
quais eu quiser uma centena que sei lá
00:02:16
quantos tempo nunca parei para contar
00:02:19
mas são muitas pontos tá bom então a
00:02:23
gente vai fazer eu vou escolher uma
00:02:24
fonte aqui qualquer mas vou escolher uma
00:02:26
fonte que vai causar um impacto um pouco
00:02:29
maior que é para que vocês vejam que
00:02:31
realmente está mudando Tá eu vou pegar
00:02:33
uma muito simplesinha sim pode ficar
00:02:35
calado dessa que mudou não mudou elas
00:02:37
são muito parecidas
00:02:39
essa aqui ó moldar tá Ela é meia animada
00:02:44
assim é uma fonte que animada né Que tem
00:02:47
uma certa alegria nela tá mas antes até
00:02:51
isso é só um exemplo eu não tô falando
00:02:53
para você usar essa fonte não que você
00:02:55
deva usar essa fonte A fonte água é
00:02:57
muito importante tem que levar em
00:02:59
consideração quando o ar e pessoas irão
00:03:02
ler aqui conteúdo ela tem querer Então
00:03:05
dependendo da fonte que você for colocar
00:03:08
pode ficar difícil para as pessoas ler
00:03:10
um problema de visão pode causar uma
00:03:12
dificuldade dependendo da fonte que você
00:03:15
escolher tá bom então bastante cuidado
00:03:17
nisso tá e use que forma bem moderada é
00:03:20
para que não fique quero deixar algo
00:03:23
legal e de repente Cansativo demais tá
00:03:25
bom tá uma fonte que eu escolher aqui
00:03:27
ela é apenas para ilustrar o que o
00:03:30
ensinando para vocês não é para você
00:03:32
seguir exatamente que eu tô falando qual
00:03:35
é usar está fonte
00:03:36
toma bom antes de eu continuar aqui já
00:03:40
deixa seu like aqui no vídeo é assim
00:03:43
nosso canal se você não é assinante
00:03:44
também esse tipo de conteúdo você não
00:03:47
vai encontrar em lugar nenhum aqui na
00:03:48
internet Aliás se você for comprar um
00:03:51
curso por aí nem curso pago do mundo
00:03:54
você vai encontrar no ser o meu curso lá
00:03:57
no curso de customização mudo você o
00:04:00
dicas iguais a essas é iguais a essa e
00:04:03
outras mais legais eu vou deixar até o
00:04:05
link aqui na descrição caso você queira
00:04:07
saber um pouco mais sobre o curso de
00:04:09
customização muda tá bom então vamos
00:04:12
continuar já definir qual é a minha
00:04:14
fonte minha fonte vai ser amor aqui eu
00:04:17
vou clicar aqui ó selecionar essa ponte
00:04:19
Então seria o clicar nos cãozinho demais
00:04:21
quando eu clico aqui ele abre aqui
00:04:23
embaixo para mim uma uma vasilhinha vou
00:04:28
clicar pela subir pronto eu tenho tudo
00:04:30
que eu preciso aqui nem faço nem sempre
00:04:33
eu vou copiar
00:04:35
esses dois itens aqui e vou colar um
00:04:38
bloco de notas
00:04:42
é uma vou copiar esse aqui primeiro
00:04:45
copiar ou colar aqui no bloco de notas
00:04:50
em volta aqui vou copiar aqui o Font
00:04:53
family
00:04:56
o colar aqui no meu bloquinho de notas e
00:04:59
pronto aqui no Google eu já fiz tudo que
00:05:01
eu preciso tá bom mor eu vou voltar lá
00:05:04
para o meu mundo
00:05:05
pronto aqui no mudo agora eu vou definir
00:05:08
Quais as fontes que eu quero trocar meu
00:05:10
não vou trocar tudo tá eu vou trocar
00:05:13
pontualmente uma fonte outra não vou
00:05:14
trocar de todo o meu mundo tá eu vou
00:05:17
fazer uma graça que eu vou trocar
00:05:19
pontualmente Então vamos lá eu vou aqui
00:05:22
na página inicial
00:05:25
pronto e vou trocar aqui ó o a parte que
00:05:30
dá teu nome da instituição que aqui no
00:05:33
meu caso Madrid Produções Tá bom eu vou
00:05:36
trocar essa fonte aqui
00:05:39
para eu fazer isso eu vou te Claro aqui
00:05:42
f12 do meu teclado aí vai abrir este
00:05:46
editor Zinho aqui do lado que a gente
00:05:47
nós somos de inspetor de elementos tá
00:05:50
bom para quem fez o curso de
00:05:52
customização mudou para quem está
00:05:54
fazendo vai entender bem isso aqui pô é
00:05:57
bastante sobre como fazer esse tipo de
00:06:00
coisa lá em clusive não são usar a fonte
00:06:02
mas a gente ensina outras coisas também
00:06:04
e todas elas utilizam esse sistema
00:06:06
utiliza aqui essa ferramenta de inspetor
00:06:09
de elementos que eu estou usando o
00:06:10
navegador Chrome Mas você pode fazer
00:06:12
isso também não Firefox tá na mesma
00:06:14
forma eles são semelhantes embora tem as
00:06:16
suas diferenças aí mas é a forma de
00:06:19
trabalhar é a mesma tá então eu vou
00:06:21
procurar aqui pela setinha que chama
00:06:23
respeito de elemento que essa setinha
00:06:25
aqui no canto também clico nela para
00:06:28
visitar ela e toda vez que eu passar um
00:06:30
áudio em algum lugar
00:06:32
lendo ela marca de azul tá também eu vou
00:06:38
que eu vou selecionar o que eu quero
00:06:39
mudar toda aquela selecionou toda a
00:06:41
caixa aqui se eu for mais próximo do
00:06:44
texto ela seleciona só o texto seja só o
00:06:47
que eu quero mudar e eu vou dar um
00:06:49
clique para congelar pronto
00:06:53
e esse meu clique foi o suficiente para
00:06:56
congelar o meu código aqui tá aqui você
00:06:59
pode ver que ela marcou de azul porque
00:07:00
eu selecionei lá vendo o azul que tava
00:07:03
lá passou para cá para a tela da direita
00:07:05
onde está escrito Madrid Produções e
00:07:07
aqui entre aqui qual é o que abrem e
00:07:11
fecham a de produções é são essas tags
00:07:14
aqui ó H1 vendo a e quando eu vou aqui
00:07:17
para o meu CSS e os eu explico bem no
00:07:20
curso é o eu tenho aqui ó H1 H1 E ele
00:07:23
fala o tamanho da fonte aliás eu vou te
00:07:26
mostrar uma coisa legal para você tá
00:07:27
vendo font-size
00:07:29
2.34 de um número menos gigante mas só
00:07:32
clicar nele aqui ó E seu aumentaram
00:07:35
minha fonte aumentando rápido vem não
00:07:37
e o seu time minha fonte diminuir de
00:07:41
tamanho tá a planta ter uma ideia do que
00:07:44
dá para fazer aqui tá mais ou menos que
00:07:46
a gente vai mexer não é a gente vai
00:07:49
colocar a fonte eu escolhi Então vamos
00:07:51
lá é mais uma vez
00:07:53
eu vou clicar aqui no último na última
00:07:57
elements tiver apresentar que eu tenho
00:07:59
três tá se eu fosse mexendo tivesse três
00:08:02
e vai ficar sempre um ótimo tá ela pegou
00:08:05
clicar no útil e vou dar um enter ele
00:08:07
vai abrir aqui embaixo para mim é um
00:08:11
editor Zinho eu vou escrever fonte
00:08:15
e assina chame ele vai preenchendo para
00:08:18
mim que eu vou criar um som
00:08:20
certo doente e o que que eu tenho que
00:08:23
colocar aqui agora aquilo foi copiei lá
00:08:25
tá eu vou para lá ele vai sumir daqui tá
00:08:28
mas depois a gente escreve novamente
00:08:29
pode ser meu bloco de notas o que eu vou
00:08:32
precisar aqui então do mesmo bloco de
00:08:33
notas se esse font-family modak crciv
00:08:38
certo
00:08:40
mas isso aqui eu vou preencher um lá um
00:08:43
própria Editora que vai me ajudar a
00:08:44
preencher e isso aqui eu vou bloquear
00:08:47
daqui sem algo que vírgulas o miolinho
00:08:50
mesmo tá botão direito do mouse copiar
00:08:54
volto para lá fazer novamente aqui
00:08:57
doente
00:08:58
escreva aqui conte para cima carne
00:09:02
doente e cola aquele que eu copiei e lá
00:09:06
já mudou também e já mudou minha fonte
00:09:09
aqui certo é claro que
00:09:13
ela ainda não mudou eu ia mudar ela
00:09:16
ainda não tá igual a essa oração tem
00:09:18
nada a ver essa foto que você colocou
00:09:20
aqui com essa fonte que você colocou
00:09:23
aqui pela minha minha gordinha minha
00:09:26
fofinha aqui para animada mesmo parece
00:09:28
uma fonte de
00:09:29
você olhar aqui não é não tá exatamente
00:09:32
como está aqui no Google mas a gente vai
00:09:35
fazer ficar como você vai vir aqui eu
00:09:39
vou abrir em outra aba a administração
00:09:41
do site
00:09:44
E aí
00:09:46
e aparência
00:09:50
e você vai aqui ó um código HTML
00:09:54
adicional
00:09:57
certo e aqui nesse primeiro campo aqui
00:10:00
onde está escrito dentro da tag head
00:10:03
você vai colar e só que ficou que nós
00:10:06
colocamos no bloco de notas também desse
00:10:08
link aqui ó ET vai copiar ele
00:10:15
e vai pular aqui
00:10:18
e pronto certo eu vou salvar agora
00:10:24
salve salve vou voltar aqui vou dar um
00:10:27
F5 ele vai sumir do jeito que tá né Tudo
00:10:30
bem sem problema agora eu vou lá de novo
00:10:33
no meu H1 fazer de novo aquele processo
00:10:35
antes de chopp aqui ó
00:10:44
bom então agora novamente eu dou o Inter
00:10:47
lá no finalzinho Será que escrevo fonte
00:10:50
para mim
00:10:52
e colo Afonso que eu copiei agora sem
00:10:57
óculos ficou mais quem está querendo é o
00:11:00
outro ela mesma fonte lá do Google fotos
00:11:03
sabe agora foi aplicada aqui Ah tá mas
00:11:07
então é só isso não só dá um F5 vai
00:11:09
sumir TV sumiu tá Por quê Porque você
00:11:12
não é um inspetor de elemento eu uso
00:11:15
essa ferramenta para inspecionar e fazer
00:11:18
as alterações somente para eu ver como
00:11:21
fica E aí eu tenho que copiar o código e
00:11:23
colar em algum lugar então vamos fazer
00:11:24
isso agora tá então mais uma vez vou
00:11:28
selecionar H1 agora vai ser bem
00:11:30
rapidinho fonte
00:11:33
um tracinho Femme ela já aparece aqui
00:11:36
assim você vê tá vendo a gente vai
00:11:38
digitando ela vai aparecendo fonte para
00:11:40
mim Igualmente e colo novamente pronto
00:11:44
apareceu certo tudo aquilo que eu
00:11:47
preciso Ok agora eu vou copiar isso aqui
00:11:49
foi um mouse que seleciono e Puxe para
00:11:52
baixo para selecionar tudo copio
00:11:56
volto lá
00:11:59
a onde eu colei o meu Google fonts Font
00:12:03
e colo aqui
00:12:07
não não vai funcionar tem mais um código
00:12:10
que eu tenho que colocar aqui então
00:12:12
vocês podem copiar escolhe igual para
00:12:14
todo mundo Depois eu explico melhor isso
00:12:17
aqui no final do vídeo que está el certo
00:12:22
ai
00:12:24
e a igual
00:12:27
e
00:12:28
ali" e flecha minha Card aqui e aqui eu
00:12:31
ponho
00:12:34
fez/se fiz certo
00:12:37
e é isso que eu preciso fazer e agora
00:12:41
aqui embaixo eu vou fazer assim eu vou
00:12:44
escrever estarão e vou fechar Tá certo
00:12:49
então
00:12:51
táxi já fiz o meu código
00:12:53
agora vou salvar
00:12:56
aqui está o código agora um ponto de
00:12:59
atenção bastante importante é quando eu
00:13:03
tava mexendo aqui é lógico que eu cortei
00:13:05
o vídeo mas eu coloquei essa barra aqui
00:13:09
ó eu inverti sem perceber E aí eu salvei
00:13:13
quando eu fiz isso deu erro no meu mundo
00:13:15
meu mudou saiu do ar tá por conta de uma
00:13:19
barra que eu coloquei errado então isso
00:13:20
Serviu de alerta até para eu mesmo é dar
00:13:23
uma informação importante para você
00:13:25
espremer o ideal é que você é isso no
00:13:28
ambiente de teste primeiro antes de
00:13:29
fazer no ambiente de produção de vocês
00:13:31
se por acaso não tem uma mente teste vai
00:13:34
fazendo uma mente de produção faça um
00:13:36
backup antes e se você tiver algum
00:13:38
problema eu não seria responsável como
00:13:40
eu com mesmo com experiência já fiz isso
00:13:42
algumas dezenas de vezes eu acabei
00:13:44
errando Então não é incomum alguém errar
00:13:48
então bastante cuidado e a outra coisa é
00:13:52
dá uma conferida antes de salvar vê se
00:13:55
tá tudo certinho assim antes de você
00:13:57
fechar de fato Tá bom então vamos lá
00:14:00
então é o que que eu fiz aqui e agora é
00:14:05
o que eu vou explica eu colei o link lá
00:14:07
que eu copiei não é salvamos aqui lá do
00:14:10
Google certo esse link é Aí nós ficamos
00:14:14
com esse font-family aqui também lá do
00:14:17
nosso que a gente copiou do Google e o
00:14:19
que eu implementei aqui foi o H1 que eu
00:14:22
fiz quando eu deporei lá quando eu fiz o
00:14:25
especial na inspecionar elemento os sais
00:14:28
aqui que é o tamanho da fonte ele veio
00:14:30
de Alegre aqui porque eu copiei veio
00:14:31
tudo né então vou deletar ele e vou
00:14:34
deixar só a família da fonte que eu tô
00:14:36
pedindo era um fonte para mim mandar
00:14:38
esse vídeo que eu coloquei lá hahaha é o
00:14:42
que para vocês sempre vai ser igual ou
00:14:45
TC para um pouco mais aqui e sempre vai
00:14:49
manter e o que não esse link aqui como
00:14:52
eu falei se não copiar do Google da
00:14:54
fonte que você escolheu cada fonte tem
00:14:55
um link
00:14:57
personalizado tá é esse font-family
00:15:00
mudar ficou se vi também é de acordo com
00:15:02
a fonte de vocês ir lá o Google fonts
00:15:05
que vai te fonte pode fornecer Isso oh1
00:15:08
é o que eu escolhi eu escolhi a tag H1
00:15:11
para mudar até ganhar um essa aqui que
00:15:13
fica em cima é o meu título principal tá
00:15:16
se eu for pegar um subtítulo por exemplo
00:15:18
só que deve ser um H4 tá isso aqui é um
00:15:21
peixe baralho Pode ser que em algum
00:15:24
outro
00:15:25
alguma outra classe é isso a outra
00:15:29
metade em cima lá no curso é isso aqui ó
00:15:32
esse H1 que eu escolhi só vai mudar
00:15:35
aonde tivesse a tarde H1 obviamente não
00:15:37
vai mudar uma o site todo eu nem desejo
00:15:39
que isso aconteça Tá bom então vamos lá
00:15:43
agora sim eu vou salvar
00:15:47
e pronto então eu salvei aí já veio para
00:15:51
cá já com a alteração também qualquer
00:15:53
pai se eu volto aqui para minha página
00:15:55
inicial
00:15:56
e
00:15:57
aqui profissões agora eu posso dar F5
00:16:01
acessar de qualquer computador que essa
00:16:04
é a fonte que eu vou utilizar tá bom
00:16:06
deixa carregar aqui tá vendo essa é a
00:16:10
fonte que eu vou usar em qualquer lugar
00:16:12
tá
00:16:13
E se eu quiser colocar em outros lugares
00:16:16
essa fonte por exemplo sei lá vou entrar
00:16:19
dentro de um curso
00:16:21
que já aparece porque que aqui é um H1
00:16:25
então onde eu coloquei H1 vai puxar
00:16:28
fonte que eu escolhi aqui por exemplo
00:16:30
não é uma então e não puxou aqui no menu
00:16:33
não é uma dá um mas se eu quiser mudar
00:16:35
no menu vamos ver se a gente consegue eu
00:16:38
vou clicar o f12 né selecionar aqui o
00:16:42
meu inspetor de elemento vou selecionar
00:16:45
o que eu quero mudar por exemplo Que
00:16:47
participantes ele mostra que meu
00:16:49
participantes e aquele me dá como mídia
00:16:52
mãe se eu colocar aqui fonte
00:16:59
e fale hum
00:17:05
o remo daqui né
00:17:16
mudas, preciso não
00:17:19
esquece
00:17:20
mudou tudo tá pode ser aqui não ficou
00:17:24
legal é aquilo que eu falei para tomar
00:17:25
cuidado com a fonte que você usa mudou
00:17:27
tudo mas é ruim até de ler tá vendo
00:17:31
Então é claro que aqui a fonte ela não
00:17:34
se apressa a fonte não se aplica ou seja
00:17:36
essa fonte aqui não é interessante para
00:17:38
este conteúdo então é melhor eu não usar
00:17:42
Tá bom então é isso espero que você
00:17:44
tenha gostado do vídeo deixe seu like
00:17:47
acompanha o canal Então faça a inscrição
00:17:49
acione o seguinte fiquei para você ser
00:17:51
notificado toda vez que tiver uma
00:17:53
modificação e se você gostou do conteúdo
00:17:56
desse e deseja fazer um curso mais
00:17:58
profissional aprender mais coisas ainda
00:18:01
vou deixar o link aqui dos cursos aqui
00:18:03
em baixo tá bom um grande bom e até mais
