Como alterar o font family do site \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 09 Horas 50 Min 52 Seg Tempo restante da oferta: 09 50 52 [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) Como alterar o font family do site [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # Como alterar o font family do site Nesse artigo veremos como você pode alterar o font family de seu site. Aprenderemos também as diferentes possibilidades de fazê-lo. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 3 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/08/Como-alterar-o-font-family-do-site.jpg) [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-AULA-GRATUITA-1700x850-1.jpg) ](https://www.treinaweb.com.br/lp/aula-gratis/) Normalmente quando criamos uma página, por mais bonita que nossa página fique, algo precisa ser alterado. Saber alterar o font family do seu site é algo extremamente importante para todos os desenvolvedores front end. E é isso que iremos abordar nesse artigo. ## Formas de se alterar o font family Antes de aprender a como importar, ou seja, como podemos trazer uma família de fonte que não existe por padrão nos navegadores, devemos saber como alterar o font family dos elementos HTML. Você pode fazer uma declaração genérica, alterando todos os elementos da sua página, ou, até mesmo, pode definir apenas um elemento com fonte diferente. Para alterar a fonte apenas de um elemento, basta usar qualquer tipo de [seletor CSS](https://www.treinaweb.com.br/blog/seletores-avancados-do-css "seletor CSS") para aplicar a estilização. [ ![HTML5 + CSS3 - Propriedades e seletores avançados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Propriedades e seletores avançados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-propriedades-e-seletores-avancados) ```css .meu-elemento { font-family: "Helvetica", Arial, sans-serif; } ``` Dessa forma, apenas os elementos HTML que possuem essa classe receberão essa alteração de fonte. Caso, queira deixar todos os elementos do seu site com a fonte personalizada, você deve usar um seletor que aplique o estilo em todos os elementos, dessa forma: ```css * { font-family: Arial, sans-serif; } ``` Vimos como podemos alterar o font family de um elemento individualmente e como aplicamos a alteração para todos os elementos, mas vamos entender melhor as duas declarações. Quando você usa a propriedade `font-family`, o primeiro valor é o tipo de fonte que você quer aplicar, por exemplo, a fonte `Arial`, ou `Helvetica`. O segundo valor que passamos é uma opção caso o navegador não encontre a primeira opção. Já a última declaração você dá ao navegador a liberdade de adicionar qualquer fonte `sans-serif` caso ele não tenha nenhuma opção anterior, garantindo assim que tenha uma fonte pelo menos similar ao que você precisa. [ ![HTML5 + CSS3 - Box model e Posicionamento de Elementos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Box model e Posicionamento de Elementos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-box-model-e-posicionamento-de-elementos) ## Adicionando fonte externa Além do padrão que já vimos e que conhecemos, podemos alterar o font family com fontes externas, ou seja, algo mais personalizado. Existem algumas formas de fazer isso com CSS, vamos ver as duas forma mais usadas para essa personalização. ### Alterando font family com font-face Uma das formas de se trazer uma fonte específica é utilizando a propriedade font-face. Nesse caso é necessário fazer o donwload da fonte, adicionar a mesma junto dos arquivos. Quando fazemos download de uma fonte específica, podemos encontrar vários formatos. Os formatos aceitos pelo CSS são: - WOFF (Web Open Font Format): Este é o formato de fonte da web mais amplamente suportado e recomendado. Ele oferece uma boa compressão e qualidade. Use arquivos com extensão .woff ou .woff2; - WOFF2 (Web Open Font Format 2.0): Uma versão mais recente e eficiente do WOFF, que oferece melhor compactação e desempenho. Use arquivos com extensão .woff2; - TTF (TrueType Font): Um formato comum usado para fontes. Embora seja menos otimizado para a web em comparação com WOFF, ainda é suportado em muitos navegadores; - OTF (OpenType Font): Outro formato comum de fonte, semelhante ao TTF. Ele também é aceito por vários navegadores; - SVG (Scalable Vector Graphics): Um formato vetorial que pode ser usado para fontes. Geralmente, é menos usado hoje em dia, mas ainda é compatível com alguns navegadores mais antigos. Para adicionar de fato, o arquivo ao projeto, no CSS passamos o local do arquivo e na propriedade font-family informamos o nome da fonte, dessa forma: ```css @font-face { font-family: "NomeDaFonte"; src: url("font.woff2") format("woff2"); } ``` Veja que nesse caso usamos duas propriedades, a `font-family`, e `src`. Na propriedade `src` passamos o caminho do arquivo com `url`, o formato do arquivo no o `format`. Agora que importamos nossa fonte, precisamos aplicá-la no projeto. Isso é feito da mesma forma que vimos anteriormente, através do seletor CSS. ```css * { font-family: 'NomeDaFonte', sans-serif; } ``` [ ![HTML5 + CSS3 - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-fundamentos) ### Serviço de fonte externo A utilização de um serviço externo de fonte pode ser uma boa opção, pelo fato de ser bem prático sua utilização. Seu uso é bem simples, basta você acessar qualquer serviço disponível na internet, o mais comum e confiável é o do próprio Google, que se chama [Google Fonts](https://fonts.google.com "Google Fonts"). Nele você seleciona a fonte que quer usar e o site irá gerar uma tag de `link`, basta adicionar esse link dentro do `head` do seu site e pronto, essa fonte já pode ser usada. Vou fazer um exemplo utilizando a fonte `Roboto`, uma fonte bastante utilizada, primeiro vou adicionar os `link` no meu HTML que peguei do site Google fonts. ```html Meu site ``` Agora que temos o `link` no projeto, basta aplicar a fonte em todos os elementos HTML com CSS, dessa forma: ```css * { font-family: 'Roboto', sans-serif; } ``` Vale ressaltar que a adição desses links no projeto, pode acarretar em perda de desempenho, tendo em vista que o navegador irá precisar acessar o local externo para pegar essa fonte após e só após isso aplicá-la no site. [ ![Desenvolvedor Especialista Front-end](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Formação Desenvolvedor Especialista Front-end Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-especialista-front-end) ## Conclusão Em resumo, a utilização e manipulação do font family com CSS oferece um poderoso meio de personalização de páginas. Através da seleção de fontes, é possível transmitir uma identidade única, melhorar a legibilidade e criar uma experiência de usuário agradável. Agora, sabemos como podemos alterar o font family nos nossos projetos. Pratique, faça testes, e veja qual melhor forma você encontra de personalizar seu HTML. Caso queira, aqui na plataforma existem cursos e formações completas para te auxiliar a compreender melhor o HTML e CSS e ter o poder de manipular do jeito que for necessário seus projetos. - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #font-family ](https://www.treinaweb.com.br/blog/tag/font-family) - [ #fontes ](https://www.treinaweb.com.br/blog/tag/fontes) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## 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/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/POSITIONS-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Position, estilizando elementos com CSS. ](https://www.treinaweb.com.br/blog/position-estilizando-elementos-com-css) Neste artigo nos iremos aprender sobre position em elementos no CSS, e sua importância para estilizações das nossas páginas web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/CSS-IN-JS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ CSS in JS ](https://www.treinaweb.com.br/blog/css-in-js) Veja neste artigo o CSS in JS, a técnica que permite escrever estilos CSS no JavaScript, deixando a aplicação flexível e modularizada. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/17135411/html-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 9 anos atrás ## [ O que é e como começar com HTML e CSS? ](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css) Quer iniciar seus estudos em HTML e CSS e não sabe por onde começar? Veja o que preparamos pra você. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Trabalhando com data no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-data-no-javascript) Neste artigo veremos como manipular datas no JavaScript, utilizando a classe Date, como pegar a data atual e utilizar os métodos da classe. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/ARRAYS-OBJETOS-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Trabalhando com arrays e objetos no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-arrays-e-objetos-no-javascript) Confira neste artigo como trabalhar com Arrays e Objetos no JavaScript. Vamos aprender a declarar e manipular Arrays e Objetos com exemplos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/05145511/444-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ Barra de progresso que muda de tamanho e cor com apenas uma variável do CSS ](https://www.treinaweb.com.br/blog/barra-de-progresso-que-muda-de-tamanho-e-cor-com-apenas-uma-variavel-do-css) Veremos como aproveitar variáveis do CSS para criar uma barra de progresso bem simples e controlar sua largura e cor usando apenas uma variável. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/Como_instalar_e_utilizar_o_Bootstrap_via_npm-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Como instalar e utilizar o Bootstrap via npm ](https://www.treinaweb.com.br/blog/como-instalar-e-utilizar-o-bootstrap-via-npm) Instalar Bootstrap via npm e alterar suas variáveis, é mais simples do que imagina. Hoje iremos juntos fazer o download do Bootstrap 5. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/04112944/DJANGO-PROJETOS-PYCHARM-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Como criar comandos customizados no Django ](https://www.treinaweb.com.br/blog/como-criar-comandos-customizados-no-django) Aprenda a criar comandos customizados no Django para automatizar tarefas, personalizar funcionalidades e integrar sistemas externos! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/Como_criar_uma_modal_com_a_tag_dialog-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Como criar uma modal com a tag dialog ](https://www.treinaweb.com.br/blog/como-criar-uma-modal-com-a-tag-dialog) Domine modais em HTML com a tag 'dialog'. Crie, personalize e interaja em seu site. Torne-o envolvente e moderno! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Como instalar a Golang e executar nosso primeiro exemplo ](https://www.treinaweb.com.br/blog/como-instalar-a-golang-e-executar-nosso-primeiro-exemplo) Neste artigo iremos aprender como instalar a Golang nos sistemas Windows, Linux e macOS e como executar nosso primeiro exemplo. 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 **09h 50min 52s** - 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