Usando fontes externas baixadas - @Curso em Vídeo HTML5 e CSS3

Já chegamos aqui a mais um vídeo relativo a Capítulo 14 no seu material [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 e CSS como você deve tá tendo aí né a gente tá no capítulo 14 a gente tá falando sobre Fontes já falei sobre várias características de fontes já classificamos já aprendemos quais são os componentes anatômicos de uma fonte de vimos como aplicar uma fonte genérica no nosso site no vídeo anterior aplicamos fontes do Google fonte e a gente conseguiu ter a ampliação de quase mil Fontes ao nosso site só que às vezes o teu cliente não precisa de milfontes esses de uma só e essa única fonte não está no Golfo como você vai fazer para colocar essa fonte no seu site Será que é possível eu vou te dizer que é muito possível e É nesse vídeo que eu vou te ensinar como fazer então vamos colocar as mãos à obra e vamos começar a praticar o eu vou dar uma pausa rapidinho na sua aula para contar uma história muito especial que a gente como hoje trouxe aqui para gente E como você sabe a Record tem iniciativas pelo Brasil inteiro com o objetivo de preparar a galera pelo mercado de trabalho e a história que eu trouxe hoje aqui para você é do Rafael Silva que é morador aqui do Rio de Janeiro na comunidade do Quitanda aqui em costa barros e ele participou de uma das grandes iniciativas da Record que a Record próprio ele foi um dos selecionados ganha um treinamento completo de desenvolvimento fustec no fim de todo o processo ele foi contratado e hoje trabalha no setor de desenvolvimento de um grande Banco Nacional se você quiser conhecer a história toda do Rafael Silva é só você apontar a câmera do seu celular para esse código QR que tá aparecendo na sua tela e na nossa página especial que foi criada pela Record vai dar o vídeo completo que a gente mostrou só algumas cenas aqui e também vários links para você conhecer todas as iniciativas que a Record traz para você se você preferir o link que está aparecendo aqui também está na descrição do vídeo a recusa pelo patrocínio do curso e parabéns a toda equipe e principalmente pelo Rafael pela grande conquista Então olha só já estou aqui esse aqui é o exercício anterior tá vou deixar até aberto para a gente poder usar como base para criar o fonte 02 fonte 02. HTML mas eu botei htm; botão direito vamos renomear vai ser ponta da PM é agora sim vamos colocar aqui fiz besteira a gente dá para resolver tá se você fizer em casa não tem problema pt-br vamos colocar aqui Fontes externas aqui eu vou fazer a mesma coisa hum h um com o título e um parágrafo com nós vamos abrir aqui ó lá em documentos estudos HTML exercícios o meu exercício 18 fonte dois beleza toma fonte junto aqui todas as contas aqui vieram do Google fonts já viu como no vídeo anterior se você não viu acompanha o vídeo anterior agora nós vamos fazer o seguinte aqui também vou criar um Style low Não dá para ser externo também sem problema vou criar um baile e nesse bar e vou colocar tudo com Font Family vou escolher uma das não serifadas o padrão aqui e vou fazer o meu H1 ser uma fonte serifada Tais Show Já tá feito ali eu não aumentar daqui três vezes o tamanho padrão pa eu quero botar uma fonte aqui é meu cliente fosse uma seu nenhuma dessas fontes do Google fonts é a que eu preciso eu preciso de uma fonte com coraçõezinhos pegar uma fonte aqui existem vários sites que você pegar Fontes externas decisão gratuito e eu acho muito da fonte dafont. com pronomes do cliente já vai te dar um arquivo de fonte que geralmente é pff enfim e eu vou vir aqui ó da fonte e vou falar namorado aqui que eu falei que tem coração aqui você tem vários cara lembra que eu falei sobre algumas Fontes específicas Que são fontes góticas na subcategoria aí nós fonte de comemorativas tá aqui ó Fontes góticas uma coisa que é importante é o seguinte quando você vai escolher uma fonte apresentar saber carai daqui ler eu falar Nossa essa fonte é é só clica aqui que você vai ver os glifos Onde estão os grifos são aqui ó lembrem grifo que a gente viu durante as aulas aqui ó tá em todas maiúsculas e minúsculas só que olha isso ela não tem nenhum grupo de acentuação só a gente que vão utilizar caracteres acentuados para usar essa fonte aqui não vai rolar já nessa segunda aqui ó eu voltar aqui old London essa Odilon não se eu não me engano tem todos os glifos é uma das coisas que você tem que se preocupar tá vendo agora eu tenho a com acento a com crase se você escolher essa outra fonte aqui como eu tinha Lauber cai você não vai conseguir escrever nada acentuada tá fica ligadinha aí fica ligadinha porque é muito importante é prestar atenção essas dicas que eu tô chegando aqui depois nós janta reclamar mas eu quero aqui namorado Vou ver aqui se eu tenho celulose Hillary ontem aplicação o resto aqui tenho Fontes acentuadas que tudo bonitinho ela só não tem fonte minúscula está vendo ela só tem fonte de maiúsculo até o a minúscula igual a maiúsculo tá tem que ficar ligado nisso daí vai beleza eu quero usar essa e vou by eu vou pegar um arquivo TTF Tom Ele já baixou o arquivo zip aqui para mim vou mandar mostrar na pasta que a nossa pasta de download não tem um arquivo zipado eu vou ter que descompactar ele então vou botar o botão direito e vamos Extra estudo ele vai criar uma pasta Love Harry e o Eu tenho um formato odf e tem o formato e PF a gente já vai falar de formato está então eu tenho aqui uma pasta logo eu tenho esses dois forma vou pegar os dois arquivos control c nem sempre nem toda fonte te dar o outro fttf tá Já já a gente vai falar sobre isso mas eu vou copiar e vou jogar aqui dentro documentos estudos para terminar o CSS exercícios exercícios de 18 até o fonte 002 na que eu quero usar vou jogar as fontes aqui tá então é lambari como que eu vou fazer para carregar essa imagem só que você vai botar lá no teu servidor assim como que eu vou poder usar essa fonte aqui nesse H1 por exemplo vou vir aqui eu vou estar aqui na minha página já foi lá no da fonte aqui ó nada feito né não foi I love lari não funciona por exemplo vou vir aqui no Font Family vou colocar lã Larry não vai funcionar não não vai ficar com coraçãozinho larga um não funciona isso porque eu não criei um font-face personalizado que é o assunto desta nossa aula você vai botar aqui em cima também como uma regra Na verdade é um seletor especial chamado fonte três anos você vai escolher essa primeira aqui em cima que ele já vai montar aqui ao font-family e you are All a sua URL nós vamos colocar o seguinte a Se você prestar atenção deixa eu deixar aqui no cantinho a gente tem o nome dos arquivos é Love Larry.

ATF love love. Br depende do navegador tem navegadores que funcionam melhores conta é free tem navegadores funcionam melhor com o pdf eu posso botar os dois posso tanto que eu escolhi essa fonte aqui justamente para isso que que eu vou fazer na URL eu vou colocar o nome do arquivo lance Larry. At cuidado cara tem que ser exatamente desse jeito aqui se tem E assim se não tens paciência não bota eles paciente tem que ter entre aspas certo esse lance Larry.

ATF Ela é a minha primeira URL e eu posso colocar aqui também espaço formas esse forma que eu vou colocar entre parêntesis o formato nesse o TF o formato pessoa TF ele pode ser Deixa eu botar um comentário aqui embaixo para você saber quais são os formatos tipos de formas você pode colocar em primeiro lugar opentype Pode colocar truetype opentype normalmente a gente bota Quando é o TF Open To Type geralmente TTF existem Fontes opentype que são pontos GPS tá tem que pesquisar aí para saber ou fazendo testes em todos os navegadores você também pode utilizar o rambert opentype tão tipo você vai se preparar e também existe também o chute Thai tracinho ats esse a ter significa a Apple Advance o chefe ta existe o último formato que é formato svg addmonths no nosso caso aqui esse ou efe ele é opentype Vou botar aqui formas Open time se você quiser outra URL você botar, e bota a outra e o Ariel e bota lá lance Larry. TTF no espacinho esse formato vai ser truta aí assim a gente já falou sobre esse vídeo sem áudio cada navegador vai ser compatível com o outro só toma cuidado lugar que é espaço o lugar que é com, o que tem diferença tá então se você precisa assistir esse vídeo de novo presta atenção onde eu botei espaço presta atenção quando eu botei, para não dar errado outra coisa que você pode colocar aqui também é o seu fonte when Vou botar aqui normal o padrão né A minha fonte é normal eu não tenho muitas variações e eu também tenho meu fonte Style e dá para botar sublinhado e não metálico perdão Eu posso também normal com e eu vou até apagar isso aqui tá a nossa isso daí Paulo vídeo Se precisar para anotar eu vou tirar não tiver aqui com isso a gente criou um font-family que a gente ainda não deu o nome tem que colocar o nome aqui em cima eu vou dar um nome de lance você pode o nome de que você quiser Love Larry eu vou só chamar de lã tudo minúsculo tá tudo menos falar não é entre aspas né vou ter que o Hélio Marcos aquilo font-family eu vou botar lance também é o mesmo nome que eu coloquei aqui em cima se por acaso Orlando não funcionar os a Tais perto então maior atualizou aqui ó já tá o título ali a uma outra coisa que eu tenho colocar aqui é o meu fonte Whey normal para ele não tentar fazer o que tá zuado isso aí esse normal aqui é para dizer que a fonte funciona melhor no normal Ah mas é que eu tive que configurar também manualmente então último título aqui pode botar o que você quiser por exemplo Olá, mundo exclamação fala lá no mundo tudo feito com coraçõezinhos que é a minha fonte personalizad cima aqui tá outra a dica é o seguinte normalmente a gente não larga a fonte aqui na pasta principal do nosso site a gente vai ver aqui vai querer a normalmente uma pasta chamada fonte e vai jogar os arquivos lá dentro ó tá se você fizer isso aqui vai parar de funcionar Você já parou tá ele pegou o time está vendo e tentou carregar e não conseguiu porque que ele não conseguiu porque Love Larry. F i love lari.

Ptf esses dois aqui não estão mais na pasta principal elas estão dentro da pasta Fontes então eu venho aqui ó com barra leve aqui também somos balas ler agora já tá funcionando de novo aqui fica muito mais organizado se você colocar uma pastinha para guardar suas fontes tá suas fontes personalizadas ficam em pastas chamadas fontes pode ser o nome se quiser mas normalmente a fonte na com letras minúsculas toma cuidado se são os estilos estiver em uma pasta chamada estilo você vai ter que botar aqui na frente ó a gente vai aprender direitinho ao meio de trabalhar com imagem. .