Usando Google Fonts - @Curso em Vídeo HTML5 e CSS3

Olá esse vídeo ainda desrespeita o Capítulo 14 onde a gente tá falando bastante sobre Fontes [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do seu curso de html com CSS nós estamos jo capitulo de fonte eu tô tentando abordar o máximo aqui sobre tipografia tudo estudo das fontes classificações de agora tudo vai fazer sentido porque nós vamos começar a utilizar as fontes externas nesse vídeo usando o Google fonte eu vou te mostrar o repositório gratuito de fonte mantido pelo Google e que com certeza

não vai sair lá você pode utilizar diretamente no seu site vem comigo nosso recado mais uma vez aqui nessa aula é do estudo o Nauta e dessa vez eu vim falar sobre um curso muito maneiro que não precisa de conhecimento de programação e não é para criação de sites ele é um curso especial que te ensina produção de vídeos você está assistindo esse curso desde o início você sabe que eu tô gravando esse curso dentro do meu apartamento daqui é um pequeno cômodo que eu uso como escritório e o transformei ele completamente um estúdio de

gravação e dentro do Studio na alta nós temos e nós temos vários módulos Na verdade até o momento são seis módulos lançados que vão te ensinar a produzir o seu conteúdo em vídeo nesse curso existem módulos que vão te ensinar a tratar a iluminação captação de som de vídeo vai te ensinar também a editar vídeos no Premiere né fazer os cortes esses cortes que você vê acontecendo aí inclusive que acabou de acontecer um também vai aprender a fazer pequenas animações com After Effects e também a utilizar o Photoshop para criar sua Camp E para isso

é só você se tornar aluno do estudo na alta e pagando o valor mensal pequenininho vai ter acesso a todos esses módulos EA muitos outros módulos de outros cursos que eu sempre vem apresentando aqui para você é só você acessar esse link que está aqui ó apontando a câmera do seu celular para esse QR Code e lá você vai ter maiores informações inclusive um cadastro de reserva caso as nossas vagas tenham se encerrado temporariamente um grande abraço hoje tudo na alta Obrigado aí pelo Patrocínio e voltamos agora a nossa aula normal né E então é

só como você sabe aquele jeito que a gente usou para inserção de fontes Ele é bem limitado né então a gente tem que horas documentos estudos a HTML exercícios nós estamos no Exercício 17 né não exercício 17 a gente fez isso daqui eu abrir para você aqui o documento trabalhamos com fontes lá inclusive e a gente usou uma fonte que não estava instalado na nossa máquina porque a gente não fica tendo muita opção então basicamente que eu vou fazer aqui é o seguinte ó nós vamos clicar com o botão direito criar uma nova pasta que

o exercício 018 a gente vai falar sobre famílias de fontes externas e nós vamos abrir essa parte aqui no visual Studio code então o botão direito abrir com code e nós vamos criar a inserção de fontes externas Vamos organizar essa tela aqui que a resolução sempre muda deixar aqui tudo organizadinho para a gente poder trabalha Então olha só olha sofreu uma atualização aqui seria que eu vou gravando os dias as atualizações são quase diárias aqui no negócio de coco então exercício 18 a criar aqui ó pont0 um ponto HTML essa fonte 01 nós vamos fazer

uso de Google fonte está vou botar exclamação aqui é tudo igual tá pt-br aqui ó Fontes com Google Fox eu vou botar aqui ó H1 e nós vamos botar aqui ó título e vamos fazer aqui um parágrafo com Glória tá só para usar como base Vamos abrir esse documento de 18 aqui ó tá aqui ó o que eu quero fazer o seguinte a gente tá muito limitado né quando a gente usa essas Fontes aqui ó eu criar um estilo aqui dentro quando a gente usa sei lá vou botar aqui no Bari a minha font-family vai

ser sem serifa por padrão o meu font-size posso fazer isso tudo com sorte ainda a gente aprendeu isso último vídeo mas vou colocar aqui 16 pixels que é o tamanho padrão né eu nem precisava mudar para não botar aqui color Black ficar Ponte Preta Então tá beleza o meu H1 vou fazer com uma fonte serifada então meu font-family vai ser time só que cara eu quero uma fonte mais bonitinha que eu quero uma fonte mais tá e eu quero mais que uma fonte mais versátil e o que a gente tem é muito limitado que já

vem embutido nos navegadores só que existe Olha só isso vou dar uma olhada aqui no navegador ficar metade e vou abrir um site aqui chamado Fontes. Google.com nome do site obviamente Google foi nesse site do Google fonts a gente tem muitos muitos tipos de fontes para as famílias várias famílias tipográficas e tal por exemplo aquela que eu tinha feito que era o Ortiz somos a horizons ela é uma o tipo variável tá vendo e ela tem cara nada mais nada menos Olha a quantidade de estilos que ela tem a família de fotografar ela é uma

das mais complexas porque a gente usou na aula passada Inclusive eu vou fazer com outros anos não eu vou poder categorizar organizar as fontes por categorias e utilizá-las no nosso site Então vamos lá olha só quando você vem aqui você pode procurar por categorias o ladrão vem todas as categorias marcadas Mas você pode não vou desmarcar todas meu Deus fez besteira eu desmarcar todas as besteira só voltei na que eu não tem foto nenhuma o bonequinho com a cara triste então eu quero atualizar o meu título com uma fonte meio Hand Reading eu não tinha

falado a gente viu né nos vídeos lá de categorias de fontes se eu não me engano tipografia Parte 2 o segundo vídeo desse Capítulo se eu não me engano paz procura aí na lista eu falei sobre Font Candy Rain eu só voltei aqui ó marquei ele só vai me mostrar Fontes and White então eu vou escolher qual a fonte que eu quero mostrar o meu título ela vou escolher uma fonte aqui eu gosto muito dessa aqui kaushan script aí você fala assim caramba como é que eu faço para usar essa essa fonte a vou vir

aqui me fazer o download da família dela você pode até fazer isso mas eu vou te dar uma dica você vai precisar baixar nada claro que tá conectado na internet sempre vocês até o site mas se você tá fazendo um site você tá conectado à internet né então site vai ficar conectado na internet então basicamente eu vou escolher aqui a fonte eu quero essa daqui kaushan script mas a decorar nada disso você só vai clicar aqui ó select Style clicou esse Alex Style ele já vai vir aqui para sua família selecionada se por acaso não

aparecer esse daqui ó até fechar É só você clicar nesse quadradinho aqui de cima que tem uma bolinha clica nele vai aparecer essa mesma janela aqui ó eu tenho uma calça script ela só tem uma variação tá ela só tem avaliação de regular ela não tem Light ela não tem bold ela não tem nada ela só tem essa opção de regular tá vendo É eu não adianta eu querer botar uma fonte em se ela não tem alegria Então essa fonte não teria a Vamos botar essa daqui para eu poder colocar ela no meu site eu

posso fazer o download clicando aqui em fazer download e depois a gente vai aprender isso no próximo vídeo mas eu posso vir aqui cara que tem fazer download nenhum eu clico aqui ó em renda e aqui eu tenho a opção de link dentro do HTML ou importe dentro do CSS você vai colocar aqui imports tá para ele colocar importação aqui nas folhas de estilo aqui ó você vai simplesmente selecionar essa parte aqui ó é uma regra é o arroba e se eu excluir a Style excluiu Barbie Style só selecionar essa linha aqui botar contra você

vou vir aqui no meu código na primeira linha logo depois da tex'style eu vou botar isso aqui importa e é justamente aquele código que a gente colocou na aula anterior toma toma não pode dar aula anterior tinha um código gigante É claro é porque eu tinha importado todas as variações toda a família tipográfica daquela o Titãs depois a gente vai ver na prática aqui está funcionando vamos importará a Hortência também vamos voltar para tela principal para voltar para tela principal só você clicar aqui ó na setinha Bros Fontes se você quiser você pode vir aqui

e botar um nome da fonte ou aqui ó você pode botar em Quintais em ter voltar por exemplo curso em vídeo para você ver como fica aplicada essa fonte ao seu texto tá mas vou procurar aqui aquela work Sans Até porque eu botei que rende drive ela não é hand-release elas são seres Mortais work Sans Olha isso ela tem um monte de tipo ela tem o final em Itálico o Extra Light Extra Light 200 Itálico Laís 300 você pode vir aqui ó deixa eu remover essa vem aqui em ele viu e vou remover essa fonte

que eu já copiei tá não tenho nenhuma selecionada eu vou ver aqui ó e vou adicionar todas elas todas vão se você não vai usar todas marca as horas que você quer usar a eu quero aí eu não vou usar ele em Itálico remove aqui tá eu vou adicionar toda só para você ter uma ideia de como é fácil tô adicionando todos os elementos Eu acho minha opinião seria muito mais fácil Se eu tivesse um botão para adicionar todas elas Pode ser que no momento que você esteja fazendo aí ele já o Google já tenha

adicionado Por que o Google fonte está mudando constantemente o site fiz aqui ó já adicionei todas as famílias beleza vem aqui ó em inglês e eu tenho no arruma Import download control c vou vir aqui e vou dar outro importa falar bem dois em claro que aquilo não estou usando a fonte né inclusive bem olha aqui e no outro mais enfim vou colocar aqui ó essa fonte aqui olha até te dar uma forma de incluir no seu código CSS então contra você aqui depois que você fez o arrombo imports esse daqui tá vendo importei todas

as famílias por isso que ficou grande aqui no Bari em vez de usar esse daqui eu vou usar esse font-family que eu acabei de copiar pode FEB works antes Se você quiser você pode botar aqui Arial Verdana estão ser Reef lembra sempre de botar o tipo genérico aqui no final é que se der tudo errado e aqui em vez de time eu vou utilizar essa fonte aqui de cima o calça skript ver se eu consigo fazer na mão aqui vou jogar essa família aqui em vez de work Sans eu vou colocar caos Run free vamos

ver se vai funcionar Olha só então já configurei aqui os tipos já tá exatamente do tipo que eu coloquei que vou colocar aqui um font-size ele tá duas vezes nem vou botar três vezes o valor normal a gente já falou que soube tamanhos também nesse capítulo e tal ele vai fazer percebe seguinte quando atualizo ele tem um o tipo é de um jeito e muda rapidinho que ele vai lá no Google fonte tá então essa ponte aqui é a hortelã e essa fonte aqui é a minha calça scripta se por acaso no meu documento HTML

aqui eu quero um h2oh h2oh botar aqui subtítulo nem sei se tem não tem fim não subtítulo acho que assim e vou botar outro Lauren aqui ó você percebe que o subtítulo ficou também com os anjos se você quiser você pode vir aqui seu H2 vai ser também o Font Family também essa daqui essa daqui ela é uma fonte se eu não conseguir carregar ela Ele vai ter uma fonte serifada normal eu vou pegar esse mesmo código aqui vou colocar aqui e meu font-size vai ser duas vezes o padrão Kel de 16 pixels aqui em

cima atualizando ó eu já fiz título e subtítulo e aqui eu tenho a minha fonte que é o old Spice para cada fonte que você importar você vai ter que colocar uma roupa Import lembrando nem CSS tudo que começa com arroba tem que ser colocado logo embaixo hoje ou como primeira linha as primeiras linhas de um documento do CSS separado que a gente viu também que eu vou fazer e ela tem que estar fora nem seletor tá isso aqui é uma regra esse daqui é um seletor isso aqui são declarações onde muito sempre propriedades e

valores a gente viu isso também durante o capítulo anterior Fechou então a gente conseguiu Cê pode fazer qualquer coisa com qualquer fonte aqui do Google fonts tá você consegue organizar Aqui ó pela categoria aqui você consegue pela linguagem né pelo idioma se você quiser uma fonte específica arábica enfim aqui algumas propriedades se você quiser uma fonte com mais características né que tenha mais mais Itálico né que tem a possibilidade de dentro da família aqui é uma forma de visualizar tá vendo maior ou menor para você conseguir escolher a sua fonte enfim você consegue experimentar aqui

no Google fonts eu sei que existem outros sites mas eu gosto muito do Google fonts se por acaso que algo fonte no momento que eu tô gravando ela tem em 91 família não precisa ter uma Fontes aqui para você poder usar a vontade gratuitamente sem problema nenhum E aí você pode usar essa maneira claro que isso aqui não pode não te atender 100 porcento das casas por exemplo seu cliente a logo dele usa uma fonte específica que ele comprou o que achou em outro site gratuito que não tem no Google fonte como é que faz

para você adicionar eu vou te mostrar isso no próximo vídeo mas para você adicionar uma aqui já tenha a grande maioria das vezes já vai te atender aqui no Google fonte você consegue fazer autorizar passar aqui ó olha que legal essa aqui é meio escrita no papel esquecerem quadro né mano escrito sua vida aqui ó vem aqui eu tenho Nossa na que eu vou remover tudo aqui antes vou adicionar é se esse estilo aqui vou aí embedar na verdade você vai selecionar todos e ainda dá tudo na mesma forma em pé daqui ó pelo Import

tá no em Beta pelo HTML não que não vai tirar mais trabalho se você quiser usar em todos os seus sites na em todas as suas páginas do site e você pode criar mais o esporte aqui na hora que você quiser aí eu quero que meu H1 tenha é a fonte aqui ó essa fonte aqui estão no meu H1 em vez do Calção eu vou utilizar essa aqui Frederick The Great tá lá quando eu atualizar tá lá seu site tá utilizando deixa eu ver se ele tira o daqui acho que é fonte waves aqui não

quero nome é isso querendo ele ficou muito forte aqui tá Agora é contigo cara usa o Google fontes de forma inteligente não exagera também na quantidade de fontes do seu site normalmente a gente tem três tipos de fontes um tá grandes títulos um para destaque em uma fonte normal né três quatro família de fonte são mais que suficientes também Teu site que não exagera em nesse próximas Estações uma bagunça assim como tinha feito com as cores fechou três coisas que todo produtor de conteúdo sempre pede e comigo não vai ser diferente se você está gostando

desse curso ou de qualquer outro curso ou um vídeo do canal do curso em vídeo não se esquece sempre de deixar o seu like deixa também um comentário de incentivo ou até mesmo comentário de dúvida Isso facilita muito o algoritmo do you eu sabia que você tá gostando que te oferecer mais e mais conteúdos nossos e não se esquece também de se inscrever no canal e agora até o sistema de inscrição mudou um pouquinho na hora que você abrir o Sininho você tem que dizer que quer receber todas as notificações ajuda aí o canal do

curso em vídeo A continuar relevante pra galera as tecnologias EA gente continua daqui produzindo vídeos de qualidade então aprendemos como utilizar Fontes externas o nosso site mais usando o Google fonts mas isso se o cliente quiser usar uma fonte que é dele que ele comprou o que ele baixou o que foi gratuito mas não tem no Google Som isso vou te ensinar no próximo vídeo você não perde por esperar esperar só mais um pouquinho aí que já já a gente chega com mais um conteúdo esquece de anotar isso tudo não se esquece de praticar na

sua casa antes de partir para o próximo vídeo Um grande abraço e se vê na próxima a E aí [Aplausos] [Música]