Como Fazer a Instalação de Fontes Customizadas?

fala Mestres beleza no vídeo de hoje nós vamos ver aqui como fazer a instalação de um arquivo de fonte né de fontes customizadas no nosso aplicativo usando Expo Beleza então antes da gente ir pro vídeo Eu gostaria de pedir que você deixe um like no vídeo se inscreva no canal e também acompanha a gente nas redes sociais os links estarão todos aí na descrição meu nome é Janer eu sou desenvolvedor aqui na Mestres e bora lá para mais um conteúdo [Música] bom então vamos iniciar aqui pela fonte de Fato né porque a gente precisa a

gente vai precisar de um arquivo de fonte para tá fazendo a instalação tá E até antes da gente falar do arquivo de fonte pesquisar aqui por Expo fonte pra gente ir na documentação do Expo Porque aqui nós vamos encontrar o seguinte deixa eu procurar aqui essa tabela aqui ó que ela vai falar pra gente o formato né do arquivo de fonte e a compatibilidade com web IOS e Android Então a gente vai fazer o uso aqui do formato TTF que é um formato que vai ser compatível aí com web IOS e Android e eu estou

aqui no site da Google Google Fontes Porque aqui nós temos muitas Fontes é tudo open source então eu vou conseguir dar esse exemplo para vocês usando aqui h uma família de fontes que eu vou pegar e da Google tá então eu tô aqui com a página do do popins né que é uma fonte bem famosa Você pode buscar aqui pelas Fontes que você deseja né Aqui tem todo tipo de fonte a gente não não precisa explorar isso agora mas uma vez que você tenha né e escolhido aí a sua fonte aqui na Google a gente

vai conseguir e a gente clica aqui em get fonte né ele vai vir para essa página aqui onde a gente pode pegar o a a fonte remotamente né que seria aí o um arquivo um um link né pro arquivo de fonte ou fazer o download clicando aqui em fazer download ele vai baixar um zip né um uma pasta zipada e dentro dessa pasta a gente vai ter e os arquivos aí de fonte as famílias de fonte né e eu já fiz isso e eu extraí essas Fontes aqui dentro do projeto tá então nós temos aqui

né o diretório assets eu criei aqui um diretório Fontes é o diretório Pops que no caso é a a família da fonte né E aqui nós temos as variações Então tem um arquivo de fonte né Pops black black italic B enfim todos os tipos da de fonte aqui da fonte popins né Nós temos aqui o arquivo então uma vez tendo o arquivo de fonte a gente vai precisar e para fazer o uso né da a instalação como nós estamos num projeto Expo a gente vai usar um pacote do próprio pessoal do Expo né que é

o Expo fonte então a gente instala Esse pacote e vai usar ele para fazer o carregamento das fontes e vai ser muito parecido com o que nós fizemos para carregar a fonte que nós instalamos do pacote na verdade vai ser praticamente idêntico tá é realmente muito prático fazer isso é muito parecido com o que nós fizemos na aula passada que nós baixamos direto um pacote de fontes né com as famílias dentro agora a diferença é que eu tenho um arquivo de de fonte fora e eu vou fazer o carregamento mas o processo de carregar ele

é idêntico do que o que nós fizemos na aula passada eu deixei tudo comentado aqui eh a gente vai provavelmente copiar e colar isso aqui pra gente não perder tempo aí eh refazendo um um conceito que nós já já passamos mas eu vou explicar sim cada passo aqui caso você tenha caído direto aqui nesse vídeo tá Então primeiramente nós temos que instalar o Expo Fontes tá então eu vou parar aqui o projeto o projeto tá rodando e eu vou dar aqui um Expo install tá é interessante a gente usar sempre o Expo install ao invés

de npm install porque o Expo install ele vai instalar o pacote na versão compatível com a versão da SDK da do Expo que nós estamos usando então aqui nesse caso ó por exemplo esse projeto nosso nós estamos com o Expo 48 SDK 48 então o Expo fonte né que é o pacote de que gerencia Fontes ele tem uma versão específica que é compatível com a SDK 48 e para pegar essa versão a gente usa o Expo install Expo fonte n que é o nome do pacote e ele vai fazer a instalação aqui pra gente certo

então enquanto ele instala aqui é já instalou né então vou dar aqui npm start pra gente já botar o projeto para rodar no diretório no nosso projeto votar aqui para abrir no Android o emulador também já tá rodando e ele vai carregar aqui pra gente certo então vamos voltar aqui no layout né que é o ponto de início aqui da nossa aplicação E como eu já expliquei né como nós estamos usando o app router esse App router ele é um R ele faz o roteamento baseado nos diretórios E aí em cada no caso diretório app

né então dentro de app nós temos aqui o ponto de entrada que é esse arquivo underline layout tá com esse arquivo underline layout vai ser a primeira coisa que o aplicativo vai carregar e como é a primeira coisa a gente vai fazer o carregamento das fontes também aqui nesse arquivo né no caso nessa componente que é a componente que nós chamamos aqui de Main layout que ela retorna um stack Navigator então o carregamento das fontes ele é basicamente o seguinte eu vou pedir para que as fontes sejam carregadas que é essa primeira parte aqui e

aí e enquanto as fontes estão sendo carregadas eu vou ficar retornando nulo né ou ou melhor esse retorno nulo é basicamente que eu não quero retornar nada para que seja exibido na tela só que na prática o que vai acontecer é que a minha Splash screen ela vai estar sendo exibida né O que que é a Splash screen quando a gente recarrega o app aqui a gente vai ver que ele fica esse círculo aqui né E esse círculo é a Splash screen padrão do Expo e que tá basicamente um desenho que não tem significado nenhum

mas no caso da do nosso app né se eu tenho um app de delivery vai ter ali o o o ícone do app né o fundo aqui vai ser da cor do app que é essa tela de Splash a gente chama de Splash screen que é a tela de carregamento então enquanto o aplicativo está carregando a Splash screen vai ser exibida e o que eu faço aqui é basicamente de definir né o Splash screen prevent Auto ayn Ou seja eu vou falar pro pra minha Splash screen ela não ser escondida né removida automaticamente eu quero

remover ela manualmente via código e eu faço isso nessa linha de comando aqui ó splashscreen Hide ayn então basicamente defino PR Splash screen ficar sendo exibida E aí quando eu quiser eu vou falar olha Splash screen pode sair e entrega o meu aplicativo aí pro meu usuário e eu vou pedir isso né eu vou pedir paraa Splash screen ser oculta quando as fontes foram forem carregadas né Então nesse nesse primeiro trecho de código aqui eu vou eu vou tirar o comentário aqui ele usa aqui esse use Fontes né use Fontes é um Hook que vai

tá fazendo aí o carregamento das nossas fontes e nesse caso eu vou importar o Hook use e fontes do pacote que eu instalei que é o Expo Fontes tá então eu chamo aqui use fontes e aqui os parâmetros para esse Hook vai ser basicamente o nome da fonte no caso aqui eu vou carregar popins Black né então vou chamar aqui ó popins Black e nesse caso aqui a diferença vai ser que o valor desse desse desse dessa chave né Desse objeto O valor vai ser um require Ou seja eu vou importar um arquivo né E

que arquivo é esse é meu arquivo de fontes então aqui na string eu vou passar o diretório relativo aonde eu estou que vai se encontrar aí essa minha fonte Na verdade eu vou passar o arquivo né Então para mim chegar aqui no arquivo popins Black Eu tô aqui em layout né eu vou ter que voltar um diretório então é ponto pon barra né vou entrar em assets vou entrar em fontes popins e aqui dentro Eu tenho Poppins black.ttf que é o arquivo então então quando eu faço isso eu estou basicamente importando um arquivo esse arquivo

eu tô dando o nome da fonte né que vai ser popin Black e ele vai ser carregado na minha aplicação através do Hook use Fontes tá então aqui essa parte do US effect eu vou tirar o comentário aqui e vai ser basicamente essa lógica quando as fontes esem carregadas eu vou chamar o splashscreen Hide né eu vou pedir para Splash screen ser ocultada né E aqui no meu arrei de dependências desse effect tá os dois valores que o Hook use e fontes retorna que é basicamente se as fontes foram carregadas ou não Ou se teve

algum erro então esse effect aqui ele vai ficando ele vai ser executado sempre que esses valores mudarem né e e aqui embaixo eu verifico né se as minhas Fontes não forem não foram carregadas ou se existir algum erro do carregamento das fontes eu vou retornar nulo que é basicamente eu vou retornar uma tela em branco né não vai mostrar nada na minha aplicação só vai mostrar quando esse não entrar nesse if né que vai retornar aqui o meu stack screen que vai o meu stack naveg né que vai ser aí as minhas telas a minha

aplicação de fato então se eu voltar aqui no app deixa eu salvar aqui né esse effect e tudo e não teve alteração nenhuma no app não teve nenhum erro eu vou recarregar aqui o app abrir aqui o meu terminal dar um Reload o aplicativo ele tá carregando tá passando a Splash screen ela aparece depois some então para testar se as fontes estão sendo carregadas né que no caso que eu dei o nome de popins black eu vou vir aqui no nosso na tela inicial né que é a Home Screen que é o index aqui do

nosso Tab Navigator o navegador em aba né esse esse projeto aqui a gente já vem desenvolvendo ele há bastante tempo então se você caiu de paraquedas aqui nesse vídeo essa estrutura pode estar um pouco confusa mas a gente vem desenvolvendo isso aqui há bastante tempo tem muito vídeo aí falando sobre tudo isso que nós estamos desenvolvendo para você é conseguir entender melhor tá mas o que que eu tô fazendo aqui é basicamente abrindo a tela inicial que é essa tela que está sendo exibida aqui no aplicativo nesse momento e eu tenho aqui um texto né

o Hello from home Font size 40 então aqui eu vou passar o Font Family Ou seja a família de fontes vai ser o nome que eu dei que é Pops Black da fonte que eu carreguei né então quando eu salvo isso a nossa fonte é substituída né pelo pobs Black o que prova que esse importe nosso aí né Essa essa forma de carregar essa forma de de usar né um arquivo de fonte funciona tá então basicamente o processo é esse é muito parecido né com o que nós vimos na aula passada muda só basicamente o

require aqui né que eu importo um arquivo ao invés de usar um que já veio dentro da biblioteca e o resto do processo de uso é tudo idêntico tá é tudo bem prático é bem tranquilo pra gente tá fazendo então só PR finalizar aqui né para melhorar e Nós criamos né na aula passada esse enum que é o enum basicamente pra gente usar e como referência do nome da fonte né então vou criar aqui um outro enum vou copiar e colar e esse aqui vai ser o poping Fontes né o en1 eu vou chamar ele

aqui de e Pop fontes e aqui eu vou ter a fonte b né e a Fonte bold o nome que eu dei para ela é aqui ó popins black que vai ser essa string n então basicamente Quando eu for usar n quando eu quiser que uma fonte seja popins Black aqui em fonte Family eu vou usar o meu en1 né que é o e fontes b n que seria não é nem b n seria o black que é a Black de fontes da família Pops né então a gente faria o o que a gente quiser

na verdade eu carregaria né as fontes que a a minha aplicação vai usar dou um nome para essas fontes e aí coloco no N1 E aí eu conseguiria usar em todo o canto da minha aplicação Beleza então para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode est deixando um comentário logo abaixo e é isso aí muito obrigado e até a próxima n