Você quer adicionar fontes personalizadas no WordPress? Fontes personalizadas aprimoram a tipografia e a experiência do usuário do seu site, permitindo que você use uma gama diversificada de fontes bonitas.
Na WPBeginner, adicionamos fontes personalizadas a muitos dos sites de nossos parceiros, então sabemos o quanto elas podem aprimorar o apelo visual de um site.
Além de serem bonitas, as fontes personalizadas também podem ajudar você a melhorar a legibilidade, criar uma imagem de marca e aumentar o tempo que os usuários passam no seu site WordPress.
Neste artigo, mostraremos como adicionar fontes personalizadas no WordPress usando Google Fonts, TypeKit e o método CSS3 @Font-Face.
Observação: Carregar muitas fontes pode deixar seu site lento. Recomendamos escolher duas fontes e usá-las em todo o seu site. Também mostraremos como carregá-las corretamente sem deixar seu site lento.
Antes de vermos como adicionar fontes personalizadas no WordPress, vamos dar uma olhada em como encontrar fontes personalizadas que você pode usar.
Como Encontrar Fontes Personalizadas para Usar no WordPress
Fontes costumavam ser caras, mas não mais. Existem muitos lugares para encontrar ótimas fontes web gratuitas, como Google Fonts, Adobe Fonts (anteriormente Typekit), FontSquirrel e fonts.com.
Se você não sabe como misturar e combinar fontes, experimente o Font Pair. Ele ajuda os designers a combinar belas fontes do Google.
Ao escolher suas fontes, lembre-se de que usar muitas fontes personalizadas deixará seu site lento. É por isso que você deve selecionar duas fontes e usá-las em todo o seu design. Isso também trará consistência ao seu design do WordPress.
Dito isso, vamos ver como adicionar fontes personalizadas no WordPress. É isso que abordaremos neste tutorial:
- Adicionando Fontes Personalizadas no WordPress a partir do Google Fonts
- Adicionando Fontes Personalizadas no WordPress Usando Adobe Fonts
- Adicionando Fontes Personalizadas no WordPress Usando CSS3 @font-face
Adicionando Fontes Personalizadas no WordPress a partir do Google Fonts
O Google Fonts é a maior biblioteca de fontes gratuita e mais comumente usada entre os desenvolvedores de sites. Existem várias maneiras de adicionar e usar o Google Fonts no WordPress.
Método 1: Adicionando Google Fonts Usando um Plugin do WordPress
Se você deseja adicionar e usar o Google Fonts em seu site, este método é, de longe, o mais fácil e recomendado para iniciantes.
A primeira coisa que você precisa fazer é instalar e ativar o plugin Google Fonts Typography. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.
Oferta: Se você deseja obter a versão premium do plugin, certifique-se de usar nosso cupom Google Fonts for WordPress para um desconto de 20%. Isso permitirá que você altere a cor e o tamanho da fonte em seu tema WordPress e muito mais.
Após a ativação, você terá a oportunidade de inserir seu endereço de e-mail para receber o guia oficial Quickstart.
Em seguida, você precisará clicar em Plugin de Fontes » Personalizar Fontes na barra lateral de administração.
Isso o levará automaticamente ao personalizador de temas do WordPress e abrirá automaticamente a nova seção ‘Plugin de Fontes’.
Aqui, você pode escolher as fontes padrão para o seu site na seção ‘Configurações Básicas’ e as fontes para partes específicas do seu site em ‘Configurações Avançadas’.
Vamos começar clicando em ‘Configurações Básicas’. A partir daqui, você pode selecionar as fontes para seu conteúdo, títulos, botões e campos.
Os menus suspensos ‘Família da Fonte’ permitem que você escolha uma nova fonte. Você encontrará a fonte padrão no topo, depois as fontes do sistema e, finalmente, uma enorme lista de mais de 1455 fontes do Google.
Ao escolher uma nova fonte, a pré-visualização mudará automaticamente para mostrar como ela fica.
Agora, você pode usar as configurações avançadas do plugin para ajustar suas seleções de fontes.
Você precisará clicar no botão de seta para voltar ‘<‘ no canto superior esquerdo da página e, em seguida, clicar na seção ‘Configurações Avançadas’.
Aqui, você encontrará configurações para as diferentes seções do seu site, como o título do site, menu de navegação, área de conteúdo, barra lateral e rodapé.
Por exemplo, a seção ‘Conteúdo’ lhe dará opções para alterar a fonte de seus diferentes níveis de título e citações.
Você pode selecionar as fontes personalizadas que deseja usar nos menus suspensos.
Você pode escolher fontes personalizadas para sua área de barra lateral de maneira semelhante.
Simplesmente clique no botão de voltar e entre nas configurações de ‘Barra Lateral’. Lá você encontrará menus suspensos para selecionar fontes para os títulos e o conteúdo da sua barra lateral.
Quando estiver satisfeito com suas seleções de fontes personalizadas, não se esqueça de clicar no botão ‘Publicar’ para salvar suas alterações.
Método 2: Adicionando Fontes do Google Manualmente no WordPress
Este método exige que você adicione código aos arquivos do seu tema WordPress. Se você nunca fez isso antes, consulte nosso guia sobre como copiar e colar código no WordPress.
Primeiro, visite a biblioteca Google Fonts e selecione uma fonte que você deseja usar. Na página da fonte, você verá os estilos disponíveis para essa fonte.
Selecione os estilos que você deseja usar em seu projeto e clique no botão 'Visualizar famílias selecionadas' no topo.
Isso abrirá uma barra lateral onde você pode copiar o código de incorporação.
Existem duas maneiras de adicionar este código ao seu site WordPress.
Primeiro, você pode editar o arquivo header.php do seu tema e colar o código antes da tag <body>.
No entanto, se você não tem familiaridade com a edição de código no WordPress, pode usar um plugin para adicionar facilmente este código.
Simplesmente instale e ative o plugin WPCode. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.
Após a ativação, vá para a página Code Snippets » Header & Footer e cole o código de incorporação na caixa 'Header'.
Não se esqueça de clicar no botão 'Salvar Alterações' para armazenar suas modificações. O plugin agora começará a carregar o código de incorporação da Google Font em todas as páginas do seu site.
Você pode usar esta fonte na folha de estilos do seu tema assim:
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}
Para saber mais, consulte nosso guia sobre como adicionar fontes do Google em temas do WordPress.
Adicionando Fontes Personalizadas no WordPress Usando Adobe Fonts
Adobe Fonts, anteriormente conhecido como Typekit, é outro recurso gratuito e premium para fontes incríveis que você pode usar em seus projetos de design. Eles têm uma assinatura paga, bem como um plano gratuito limitado que você pode usar.
Simplesmente inscreva-se para uma conta Adobe Fonts e visite a seção 'Procurar Fontes'. A partir daqui, você precisa clicar no botão </> para selecionar uma fonte e criar um projeto.
Em seguida, você verá o código de incorporação com o seu ID de projeto. Ele também mostrará como usar a fonte no CSS do seu tema.
Você precisa copiar este código e colá-lo dentro da seção <head> do seu site.
Existem duas maneiras de adicionar este código ao seu site WordPress.
Primeiro, você pode editar o arquivo header.php do seu tema e colar o código antes da tag <body>.
No entanto, se você não está familiarizado com a edição de código no WordPress, pode usar um plugin para adicionar este código. Basta instalar e ativar o plugin gratuito WPCode.
Após a ativação, vá para a página Code Snippets » Header & Footer e cole o código de incorporação na caixa ‘Header’. Em seguida, clique no botão ‘Save Changes’.
É isso. Agora você pode usar a fonte Typekit que selecionou na folha de estilo do seu tema WordPress assim:
h1 .site-title {
font-family: gilbert, sans-serif;
}
Para instruções mais detalhadas, confira nosso tutorial sobre como adicionar tipografia incrível no WordPress usando Adobe Font (Typekit).
Adicionando Fontes Personalizadas no WordPress Usando CSS3 @font-face
A maneira mais direta de adicionar fontes personalizadas no WordPress é adicionando as fontes usando o método CSS3 @font-face. Este método permite que você use qualquer fonte que desejar em seu site.
Primeiro, você precisa baixar a fonte que deseja em um formato web. Se você não tiver o formato web para sua fonte, poderá convertê-la usando o FontSquirrel Webfont Generator.
Uma vez que você tenha os arquivos de fonte web, você precisará carregá-los no seu servidor de hospedagem WordPress. O melhor lugar para carregar as fontes é dentro de uma nova pasta “fonts” no diretório do seu tema ou tema filho.
Você pode usar FTP ou o Gerenciador de Arquivos do seu cPanel para fazer o upload da fonte.
Depois de fazer o upload da fonte, você precisa carregar a fonte na folha de estilos do seu tema usando a regra @font-face do CSS3, assim:
@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
Não se esqueça de substituir a família da fonte e o URL pelos seus.
Depois disso, você pode usar essa fonte em qualquer lugar na folha de estilos do seu tema, assim:
.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}
Carregar fontes diretamente usando @font-face do CSS3 nem sempre é a melhor solução. Por exemplo, se você estiver usando uma fonte do Google Fonts ou Typekit, é melhor servir a fonte diretamente do servidor deles para um desempenho ideal.
Esperamos que este tutorial tenha ajudado você a aprender como adicionar fontes personalizadas no WordPress. Você também pode querer aprender como personalizar cores no seu site WordPress, ou conferir nossa lista dos melhores construtores de páginas WordPress de arrastar e soltar.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Dennis Muthomi
Usei o plugin Google Fonts Typography mencionado no Método 1 para meus clientes e ele foi uma mão na roda. Um ponto a considerar é o impacto da velocidade de carregamento do seu site. Escolher um subconjunto da fonte (por exemplo, apenas caracteres latinos) pode fazer uma grande diferença nos tempos de carregamento, ao mesmo tempo em que obtém a aparência desejada.
Comentários WPBeginner
A velocidade de renderização seria a mesma em ambos os casos.
Kushal Phalak
Não consigo ficar sem fontes personalizadas. É como se algo ficasse incompleto se eu não usar uma fonte personalizada. Como designer e desenvolvedor, quero que minhas marcas sejam meticulosamente elaboradas, pois é o passo mais importante, e se eu usar qualquer fonte, não me sinto bem. Sei que algumas fontes padrão são boas, mas não encontro variedade suficiente nelas. No WordPress, acho que esse recurso deveria vir integrado, pois economizaria o incômodo extra de adicionar fontes personalizadas.
WPBeginner Support
It would depend on the theme but maybe in the future there will be an easier way
Admin
Jiří Vaněk
Obrigado pelo artigo útil. Nossa língua tem certas especificidades e características. A língua tcheca usa letras como ěščřž. Às vezes é muito problemático encontrar uma fonte que leve em conta esses caracteres e não os exiba de forma diferente. É por isso que agradeço este guia, que finalmente me ajudará a resolver o eterno problema de escrever em tcheco.
Jozef Fekete
As a Slovak I know exactly what you are talking about
In cases like this, it is advisable to use a filter to make searching for a suitable font easier. For example, look for fonts in the “Latin extended” category that support Czech and Slovak language.
Jiří Vaněk
Esse é um bom conselho. Obrigado por ele. Já rastreei algumas das letras. No entanto, alguns clientes não estão satisfeitos com elas e querem uma decorativa. Tentarei seu conselho de busca.
Moinuddin Waheed
Existem muitas fontes do Google que são muito boas e usadas por muitos desenvolvedores de ponta.
Sou fã de Poppins e Roboto há algum tempo e as usei em meus sites estáticos e também em sites WordPress.
Vi pessoas dizendo que usam fontes do Google de uma biblioteca local,
Não sei o que isso significa?
Eles argumentam que buscar do servidor pode diminuir a velocidade do site.
Se for assim, como podemos adicionar essas fontes de nossa própria biblioteca local, dado o fato de que são fontes do Google?
WPBeginner Support
O plugin do nosso guia tem uma opção para hospedar o arquivo de fonte localmente. Quando você não hospeda o arquivo localmente, significa que seus usuários precisariam esperar que a fonte fosse carregada do Google para vê-la em seu site.
Admin
Moinuddin Waheed
Obrigado pelo guia para manter as fontes localmente.
Ter que buscar do Google não é uma ideia tão boa para fins de velocidade. Vou me lembrar de mantê-las localmente ao usar fontes do Google.
Jiří Vaněk
Se uma fonte é usada localmente, significa que ela está armazenada na web. Ou seja, no FTP, assim como o WordPress. Isso ocorre porque, caso contrário, o WordPress teria que ir aos servidores do Google para buscar as fontes, o que diminui a resposta do site. Além disso, pode acontecer que os servidores do Google estejam lentos no momento, o que afetará a velocidade. Se você colocar seu site em alguma ferramenta de medição como PageSpeed Insight ou GTmetrix, verá quanto tempo pode levar para carregar fontes dos servidores do Google. Portanto, é uma prática comum fazer o upload de fontes localmente para o site, melhorando tanto a capacidade de resposta quanto as métricas do site. Eu também fiz dessa forma.
Ahmed Omar
Obrigado mais uma vez por um artigo útil.
Você saberia dizer por que minha fonte está sendo exibida corretamente no laptop, mas não no celular?
WPBeginner Support
O motivo mais provável seria se o seu tema substituir a estilização para dispositivos móveis. Se você verificar com o suporte do seu tema, eles deverão ser capazes de ajudar.
Admin
Brayden Fraser
Você deveria ter dito que era preciso ser um membro do WordPress para fazer isso. Enganoso.
WPBeginner Support
Todo o nosso conteúdo é para sites WordPress.org, você está no WordPress.com, você pode ver nossa comparação entre os dois em nosso artigo abaixo:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
Tarun Kashyap
Qual fonte você está usando neste site? Parece muito atraente
WPBeginner Support
We’re currently using Proxima Nova
Admin
Joshua
Você pode me dizer como você faz fotos animadas tão bonitas para o seu blog? Qual software você usa?
WPBeginner Support
There are multiple tools, for the moment you may want to take a look at Recordit for an option for creating a GIF
Admin
Manuel
Muito obrigado, eu estava tentando @font-face no WordPress, mas a fonte não estava aparecendo, então segui as recomendações de colocar as fontes dentro do diretório do tema e pronto!
WPBeginner Support
Glad our recommendation could help
Admin
Roshni Kanchan
Obrigado mais uma vez por um artigo útil.
Você saberia dizer por que minha fonte está sendo exibida corretamente no laptop, mas não no celular?
WPBeginner Support
Seu tema específico pode ter CSS específico do dispositivo que está substituindo a fonte que você adicionou. Se você verificar com o suporte do seu tema, eles devem ser capazes de informar.
Admin
Vlad
Muito obrigado!
WPBeginner Support
You’re welcome
Admin
Katherine
Obrigado por fazer este vídeo simples. Corrigiu minha fonte em minutos com o segundo método. Você me poupou muito tempo mexendo no código do meu tema. Muito apreciado!
WPBeginner Support
Olá Katherine,
De nada. Ficamos felizes que você achou útil.
Admin
Ou
Olá, minha fonte não é uma fonte do Google. Eu a carreguei usando font face, mas não a vejo no personalizador do meu tema. Algum conselho?
giri
Oi, eu realmente tirei muito valor do seu post. Por favor, tenho 2 perguntas rápidas.
1. Qual é o número de plugins que todo blogueiro não deve exceder? Atualmente tenho cerca de 18 instalados, você consideraria esse número exagerado. Por favor, você poderia dar uma olhada no meu site e me oferecer um
2. Sua fonte é realmente linda. você sugeriria plugins que me dariam fontes lindas como a sua?
Finalmente, você pouparia alguns segund
WPBeginner Support
Olá Giri,
1. Por favor, veja nosso artigo sobre quantos plugins do WordPress você deve instalar em seu site.
2. Para fontes, por favor, veja melhores plugins de tipografia para WordPress.
Admin
Roshani
Eu fiz upload de URLs de fontes personalizadas em font-face, mas está mostrando erro 404 nas ferramentas do desenvolvedor. Antes de carregar a página da web, ela mostra fontes normais.
Por favor, me ajude com isso
Chamnan
Estou tendo problemas com a fonte Khmer ao usar o Google Font. O problema é que alguns dos textos estão mostrando símbolos.
ahmed aboubakr
obrigado por seus tutoriais, realmente ajuda, e obrigado por seu gentil esforço
Fadl
Ok, esquece… Consegui resolver removendo o código @font-face do campo css personalizado
Amy
Este é verdadeiramente o melhor guia para adicionar fontes que encontrei. Todos os métodos estão em um só lugar e cada método é fácil de seguir. Passei os últimos dias pesquisando na internet tentando descobrir como adicionar uma fonte personalizada que não fosse do Google ou do Typekit, e finalmente encontrei um guia fácil de seguir. Obrigado!
Amber
Ok, então eu usei o Font Squirrel e obtive os kits @font-face. Eu fiz o upload para o meu tema no Siteground. Então, certifiquei-me de alterar o URL no WP Editor -> Fontes. Aqui está um exemplo do que eu fiz:
@font-face { font-family: ‘walpurgis_nightregular’; src: url(‘www.example.com/public_html/wp-content/themes/pique/fonts/walpurgisnight-regular-webfont.woff2’) format(‘woff2’), url(‘www.wanderlustconqueror.com/public_html/wp-content/themes/pique/fonts/walpurgisnight-regular-webfont.woff’) format(‘woff’); font-weight: normal; font-style: normal;
}
Apesar de fazer isso, a fonte não aparece na seção “Tipografia” das opções de personalização. Pensei que talvez eu também devesse adicioná-la ao “Editor CSS Adicional”, então coloquei lá também. Isso também não pareceu funcionar.
Eu só quero poder usar minha fonte para meus Cabeçalhos. O que estou fazendo de errado aqui? Para que este tutorial seja para iniciantes, isso me faz sentir realmente estúpida. Estou perdendo alguma etapa? Existe um tutorial melhor e mais aprofundado apenas sobre o uso da opção Font Face? Ajuda!
WPBeginner Support
Oi Amber,
Não temos certeza. Por favor, tente seguir os passos mencionados acima mais uma vez.
Admin
Dan
Estou tendo um problema semelhante ao da Amber. Apesar de seguir as instruções passo a passo, minhas fontes ainda não estão carregando.
Estou usando um tema personalizado baseado no tema twenty seventeen. Meu arquivo css está localizado em wp-content/themes/twentyseventeen-child. É aqui que também coloquei minhas fontes. No arquivo css, tenho o seguinte:
No entanto, meu site ainda não está mostrando esta fonte! O que estou fazendo de errado?
Syed Abbas Ali Shah
Tenho uma pergunta também. Eu fiz o upload dos arquivos .ttf na minha
publichtml/nome-da-pasta-da-web/wp-content/theme/font
e adicionei o nome da fonte no stylesheet css do tema no editor do wordpress. Mas ele não está pegando a fonte.
Por favor, me dê a solução
Raghava
Obrigado pelas informações valiosas. Tentei e está funcionando bem. Usei duas fontes do Google, ao usar o site de fontes do Google o desempenho é um pouco lento.
Se você puder postar em detalhes como fazer upload de fontes diretamente no WordPress, seria apreciado.
Thanks,
Raghava
Allix
Se estou visualizando um "glifo" através do Photoshop que é um caractere especial em uma fonte que comprei – como posso transferir este glifo para o Photoshop?
Obrigado!
dsb
perguntas bobas, tenho certeza! Mas, na URL - onde diz 'your theme' isso deve ser substituído pelo título do nosso tema, correto? Ou deixamos essa parte como está?
Além disso, para fontes que têm nomes longos, você só precisa deixar espaços entre elas ou adicionar sinais de + ou algo assim?
por exemplo:
@font-face { font-family: Arvo example one; src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo example one-Regular.ttf); font-weight: normal; }1-click Use in WordPress
Muito obrigado
WPBeginner Support
Olá dsb,
Sim, você precisará substituir your-theme pelo nome real da pasta do seu tema. Se você fez o upload da sua fonte para o diretório de fontes do seu tema atual, então você pode ver o nome do arquivo da fonte. ou Copie o nome do arquivo e cole-o no CSS.
Admin
Vincent
“O melhor lugar para fazer o upload das fontes é dentro de uma nova pasta “fonts” no diretório do seu tema ou tema filho.”
Por que este é o melhor lugar, exatamente? Criar um tema filho para uma única fonte é um pouco chato, mas fazer o upload dela dentro do próprio tema significa que ela pode desaparecer quando o tema for atualizado, certo? Ou ela ainda estará segura disso, pois é tecnicamente um arquivo não relacionado?
Andrew
Eu provavelmente diria que é bobagem não ter um tema filho em geral, independentemente do que você o esteja usando.
E não, não seria seguro se o seu tema for atualizado. Ele seria sobrescrito pela atualização.
DaVince
> Eu provavelmente diria que é bobagem não ter um tema filho em geral, independentemente do que você o esteja usando.
Por que você pensa assim? Considere o caso em que alguém não está alterando o tema de forma alguma. Seria totalmente inútil usar um tema filho, e adiciona apenas mais uma camada de código em cima de tudo neste caso.
> E não, não seria seguro se o seu tema for atualizado. Ele seria sobrescrito pela atualização.
Eu meio que imaginei. Sinto que isso deveria ser destacado no artigo ou vai deixar algumas pessoas infelizes.
Shah
Olá,
Não tenho problemas em adicionar fontes personalizadas em qualquer lugar do meu tema, apenas quando eu ia mudar a fonte em wp-embed-template.php minhas fontes personalizadas não funcionam. Quero dizer, é como se elas não fossem @font-faced.
Você poderia me ajudar a mudar as fontes na parte de incorporação do WordPress? Devo adicionar @font-face novamente no php? Já está adicionado!
Muito obrigado desde já,
Robin
Obrigado pela sua ajuda!
Depois de fazer o upload da fonte para a minha pasta de fontes, eu a adiciono ao meu CSS? Deixo a família de fontes que já está lá? Porque eu a uso na maioria das vezes. Esta é uma fonte especializada usada apenas para ocasiões específicas.
Estou tão confuso.
Alice
Really great! Been struggling a while (I’m quite new to all this) but now it works
Thanks a lot!
Nicole
Olá. Obrigado por isso. Como encontro as informações de licenciamento de uma fonte? Algumas fontes estão por toda a web, e eu quero usar uma, mas é difícil encontrar as informações do EULA.
Vincent
Geralmente está incluído nos metadados da própria fonte. No Windows, você pode clicar com o botão direito e ver as propriedades de uma fonte. Se isso não for suficiente, você pode querer baixar um visualizador de fontes completo que suporte a exibição de metadados de fontes.
Andrea
Olá, qual extensão deve ter a fonte para ser instalada no WordPress?
Porque estou tendo problemas para instalar a minha
Mike
Olá pessoal, usei a última técnica (@fontface), ela adicionou a fonte ao wordpress, mas a tornou a fonte padrão. Eu só queria que fosse uma opção na minha lista de fontes. Vocês podem me ajudar?
ep
Usei o método CSS @font-face. Funciona perfeitamente. Obrigado.
Abdul Manan Abbasi
Assalam o Alaikum!
Eu sou iniciante em WordPress. Quero adicionar a fonte Noori Nastaleeq ao meu site. Como posso fazer isso? Preciso da sua ajuda.
Ildiko
Você pode fornecer uma comparação de desempenho entre esses métodos?
Asiyah
Olá,
Sou completamente novo no WordPress, então espero que você possa me ajudar. Acabei de comprar um domínio personalizado na Bluehost, instalei o WordPress e, por último, instalei e ativei o tema So Simple. Então, o que eu quero saber é se minhas alterações de fonte serão perdidas se eu atualizar meu tema no futuro, e se sim, como posso evitar isso?
É que notei que muitos outros sites recomendam adicionar um plugin de CSS personalizado primeiro e eu não tenho ideia de como fazer isso.
Atenciosamente
WPBeginner Support
Por favor, dê uma olhada em nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress.
Admin
Vikram
Muito obrigado. Ajudou.
Hashim Naushahi
Isso foi realmente útil! Muito obrigado!!!
Apenas uma pergunta rápida...
Como eu ajustaria o código se eu tivesse uma fonte com pesos diferentes?
Tenho uma versão regular e em negrito da fonte que gostaria de usar instalada no meu laptop. Usei o FontSquirrel para convertê-las em webfonts. E fiz o upload dessas webfonts para uma pasta no meu tema filho, como você explicou. Eu só não sei como usar @font-face para usar ambos os pesos.
Estou realmente ansioso pela sua resposta. A maneira como você explicou isso é ótima!
Agradeço desde já!
Atenciosamente,
Hashim
WPBeginner Support
Você usará font-weight em CSS. Assim:
h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }1-click Use in WordPress
Admin
Christina
Eu não vejo o botão "editor" no meu WordPress em Aparência. Usei o Font Squirrel para fazer o upload da minha fonte, mas quando fui adicioná-la no editor de temas, essa não era uma opção. Talvez eu tenha uma versão diferente do WordPress. Por favor, ajude. Obrigado.
Michelle
Você pode dar um exemplo da origem da URL para o exemplo @fontface? Estou fazendo algo errado e sinto que vou arrancar todos os meus cabelos :/
Sr.T
O jeito correto de adicionar fontes personalizadas do Google não é usando a função enqueue_script?
WPBeginner Support
É ideal, mas não necessário. Este método também está correto e é mais fácil para iniciantes.
Admin
James
Olá pessoal
Eu sempre leio seus posts e adoro o site, ótimo trabalho, você sempre me ajuda. Fiquei preso na migração de um site para um cliente e precisei mudar a fonte. Achei que tinha feito tudo, copiado os arquivos CSS etc., mas foi lendo isso que percebi que não tinha mudado o código no cabeçalho.
Fiquei preso nisso por uma semana!
Anyway just wanted to say thanks