Configurando fontes em projetos Flutter \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 13 Horas 15 Min 45 Seg Tempo restante da oferta: 13 15 45 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Configurando fontes em projetos Flutter [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) # Configurando fontes em projetos Flutter Veja neste artigo como configurar fontes em projetos Flutter. [ Fagner Pinheiro ](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/22111106/FLUTTER-CONFIGURANDO-FONTES-EXTERNAS.png) Ao desenvolver um app, precisamos nos preocupar com os mínimos detalhes, desde sua paleta de cores até as fontes a serem utilizadas. No [Flutter](https://www.treinaweb.com.br/blog/configurando-fontes-em-projetos-flutter/ "Flutter"), o uso de fontes externas é relativamente simples, necessitando apenas de algumas configurações. Sendo assim, neste artigo veremos como configurar fontes em projetos Flutter. ## Como adicionar e configurar fontes no projeto flutter A configuração de fontes externas no Flutter possui dois passos, basicamente. Primeiro, precisamos criar o diretório e armazenar os arquivos de fontes nesta pasta. Depois, é necessário configurar este diretório no arquivo `pubspec.yaml` do projeto, como veremos nos tópicos abaixo. ### Onde armazenando fontes personalizadas no projeto Flutter O primeiro passo para utilizar fontes em um app Flutter é inserí-las no projeto. Para isso, na raiz do diretório do app, precisamos criar uma pasta chamada `assets`. É ela quem vai armazenar os arquivos estáticos do nosso projeto, sejam fontes, imagens, áudios, etc. ![Pasta para adicionar fontes externas no projeto flutter](https://dkrn4sk0rn31v.cloudfront.net/2020/04/27164842/pasta-adicionar-fontes-personalizadas-no-projeto-flutter.png)Lembre-se que esta pasta deve estar na raiz do projeto :) Depois disso, criamos um outro diretório (agora, dentro da pasta assets) chamado `fonts`. É ele quem vai armazenar as fontes do nosso projeto. Para este exemplo, vamos utilizar a fonte `Montserrat`, que pode ser baixada no site do [Google Fonts](https://fonts.google.com/specimen/Montserrat). No site, há diversas variações da fonte, mas utilizaremos apenas as versões `Montserrat-Light`, `Montserrat-Regular`, `Montserrat-Medium` e `Montserrat-Bold`. Para isso, copiamos os respectivos arquivos de fontes que baixamos e colamos no diretório `fonts` do projeto: ![Lista de fontes externas adicionadas ao projeto flutter](https://dkrn4sk0rn31v.cloudfront.net/2020/04/27164917/lista-de-fontes-externas-inseridas-no-projeto-flutter.png)Com isso, as fontes já estão no projeto. O próximo passo, então, é configurá-las no app. [ ![Flutter - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/flutter.svg) Curso Flutter - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/flutter-fundamentos) ### Configurando fontes externas no projeto Flutter Com as fontes presentes no projeto, agora precisamos configurá-las. Para isso, no arquivo `pubspec.yaml`, adicionamos a pasta `assets/fonts` para que o projeto reconheça o diretório que está armazenando os arquivos estáticos: ```yaml flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true assets: - assets/images/ - assets/fonts/ ``` Depois disso, é só especificar as fontes que serão utilizadas (também no arquivo `pubspec.yaml`). É nessa configuração que definimos a largura de cada tipo de fonte: ```yaml fonts: - family: Montserrat fonts: - asset: assets/fonts/Montserrat-Light.ttf weight: 300 - asset: assets/fonts/Montserrat-Regular.ttf weight: 400 - asset: assets/fonts/Montserrat-Medium.ttf weight: 500 - asset: assets/fonts/Montserrat-Bold.ttf weight: 700 ``` Agora, ao final dessa configuração, é só atualizar o `pubspec.yaml` para que o projeto reconheça as fontes: - Execute o comando `flutter pub get`, caso você esteja utilizando o terminal; - Se estiver utilizando o Android Studio, clique no botão `Packages get`; - Caso esteja utilizando o VS Code, clique no botão `Get Packages`. Ao final deste processo, a fonte já está pronta para ser utilizada no aplicativo, conforme o código de exemplo abaixo: ```java Text( "Teste", style: TextStyle( fontFamily: 'Montserrat', fontSize: 24, fontWeight: FontWeight.bold ), ) ``` O código acima irá renderizar um widget `Text()`, conforme a imagem abaixo, já com a fonte `Montserrat`. ![Widget text com fonte personalizada](https://dkrn4sk0rn31v.cloudfront.net/2020/04/22103736/3-1.png) - [ #Mobile ](https://www.treinaweb.com.br/blog/tag/mobile) - [ #dart ](https://www.treinaweb.com.br/blog/tag/dart) - [ #flutter ](https://www.treinaweb.com.br/blog/tag/flutter) Autor ![Fagner Pinheiro](//secure.gravatar.com/avatar/e622f7c7d686a0b11f8d977ce9725b67?d=mm) ## Fagner Pinheiro Professor na TreinaWeb e graduado em Sistemas de Informação pelo Instituto Federal da Bahia. Apaixonado por desenvolvimento web, desktop e mobile desde os 12 anos de idade. Já utilizou todos os sistemas operacionais possíveis, mas hoje se contenta com o OSX instalado em seu desktop. Quando não está trabalhando, é IGL e Awper do time de CS:GO da Treinaweb. Até passou em uma peneira do Cruzeiro, mas preferiu estudar Python. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/02163514/vscode-remote-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ Desenvolvendo seus projetos com o VS Code Remote Development ](https://www.treinaweb.com.br/blog/desenvolvendo-seus-projetos-com-o-vs-code-remote-development) Preparar nosso ambiente local de desenvolvimento pode ser uma tarefa bastante demorada. Pode levar horas, ou até dias para configurar todo o ambiente. Uma alternativa é utilizar um ambiente remoto para o desenvolvimento, porém sua experiência pode não ser a mesma que ao trabalhar em ambiente local. Isso tudo pode mudar com o VS Code Remote Development. Vamos entender nesse artigo como ele funciona. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/18161952/MAPEANDO-DB-DJANGO-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 8 anos atrás ## [ Mapeando banco de dados existente com Django ](https://www.treinaweb.com.br/blog/mapeando-banco-de-dados-existente-com-django) Veja neste artigo como utilizar o Django para mapear toda estrutura de um banco de dados existente em seus projetos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/maven-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Como instalar uma dependência com Maven e usar em seu projeto ](https://www.treinaweb.com.br/blog/como-instalar-uma-dependencia-com-maven-e-usar-em-seu-projeto) Confira neste artigo como instalar uma dependência com Maven e usar em seu projeto. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/10094842/service-stack-1-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Criando um Web Service com o ServiceStack - Parte 1 ](https://www.treinaweb.com.br/blog/criando-um-web-service-com-o-servicestack-parte-1) Nesta primeira parte, veja como criar um web service simples no .NET Core utilizando a biblioteca ServiceStack. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/201705171237-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Requisições Ajax no JavaScript com a Fetch API ](https://www.treinaweb.com.br/blog/requisicoes-ajax-no-javascript-com-a-fetch-api) A Fetch API veio para substituir a antiga XmlHttpRequest e o suporte dela já é bem consistente nos navegadores modernos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/08/07161700/gerenciamento-python-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 4 anos atrás ## [ Empacotando e publicando pacotes Python no PyPi ](https://www.treinaweb.com.br/blog/empacotando-e-publicando-pacotes-python-no-pypi) Neste artigo iremos aprender como funciona o processo de empacotar e distribuir nossos próprios pacotes Python no PyPi. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/03/o-que-e-fastapi-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com FastAPI ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-fastapi) Neste artigo nós iremos aprender um pouco mais sobre o FastAPI durante o desenvolvimento de uma API com todas as operações de CRUD. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/11153540/DJANGO-ADMIN-400x280.png) [ Django ](https://www.treinaweb.com.br/blog/categoria/django) 8 anos atrás ## [ Criando uma aplicação administrativa com Django Admin ](https://www.treinaweb.com.br/blog/criando-uma-aplicacao-administrativa-com-django-admin) Neste artigo veremos como criar uma aplicação administrativa com Django. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/introducao-ao-maven-aprenda-como-criar-e-gerenciar-projetos-java-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Introdução ao Maven, aprenda como criar e gerenciar projetos Java ](https://www.treinaweb.com.br/blog/introducao-ao-maven-aprenda-como-criar-e-gerenciar-projetos-java) Neste artigo veremos como instalar o Maven e como podemos utilizá-lo para nos auxiliar na criação e no gerenciamento de dependência de um projeto Java. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/01/criando-uma-api-com-spring-data-jpa-e-spring-web-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ Criando uma API com Spring Data JPA e Spring Web ](https://www.treinaweb.com.br/blog/criando-uma-api-com-spring-data-jpa-e-spring-web) Neste artigo vamos aprender como criar uma API com persistência de dados utilizando o Spring Web MVC e o Spring Data JPA. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/21103619/CAPA-GITHUB-20-05-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 8 anos atrás ## [ Hospedando o Portfólio criado com o Pingendo ](https://www.treinaweb.com.br/blog/hospedando-o-portfolio-criado-com-o-pingendo) Neste artigo veremos como hospedar o portfólio criado com o Pingendo no GitHub Pages. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/22213218/PRIMEIROS-PASSOS-GIT-400x280.png) [ Controle de versão ](https://www.treinaweb.com.br/blog/categoria/controle-de-versao) 8 anos atrás ## [ Primeiros passos com o Git ](https://www.treinaweb.com.br/blog/primeiros-passos-com-o-git) Neste artigo veremos o que é Git e seus principais comandos. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **13h 15min 45s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58