Google Fonts! Já ouviu falar? Se não está satisfeito com os tipos de letras ou fontes possíveis de definir no seu site, saiba que pode adicionar fontes personalizadas, e melhor ainda, estas são gratuitas.
O Google Fonts disponibiliza centenas de fontes gratuitamente que pode utilizar no tema do seu site.
Adicionar estas é extremamente simples, basta escolher a fonte no Google Fonts, inserir o link no cabeçalho do site (entre as tags ) e definir o estilo ligando partes do seu site à fonte escolhida.
Para este exemplo escolhi duas fontes, Courgette e Permanenet Marker.
Carregar o tipo de letra, tornando disponível para qualquer página do site, incluir na secção HEAD:
<link rel=preconnect href=https://fonts.googleapis.com>
<link rel=preconnect href=https://fonts.gstatic.com crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel=stylesheet>
Pode ser importada também:
<style>/*<![CDATA[*/@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');/*]]>*/</style>
Para que a possamos usar vamos criar uma classe para usamos na nossa página, formatando o texto.
.texto-courgette {
font-family: "Courgette", cursive;
font-weight: 400;
font-size:1.2em;
font-style: normal;
}
Para que a possamos usar vamos criar uma classe para usamos na nossa página, formatando o texto.
<span class=texto-courgette>Texto de teste na fonte Courgette</span>
O estilo CSS pode ser atribuído a toda a secção “Body” directamente ou através de uma folha de estilo.
O exemplo de html que apresento utilizando o “span” para marcar uma zona e definir um formato ou estilo pode ser outro, desde que identifique o texto ou zona a formatar, tal como div, H1, H2, p, entre outros.
Na escolha das fontes deve levar em conta o impacto que o carregamento destas fontes terão no seu site, por exemplo veja em baixo na imagem em kB do impacto das fontes escolhidas no carregamento desta página.
Este factor pode ser importante no caso de escolher vários tipos de fonte, estas terão de ser carregadas para estarem disponíveis.
No Google fonts irá encontrar fontes muitas fontes, escape à tentação de colocar mais do que 2 fontes, para que seja fácil a definição dos estilos e para que, como já mencionei, não atrapalhe o carregamento das suas páginas.
No WordPress a inclusão do link para a fonte pode ser feita automaticamente através da utilização do ficheiro functions.php do seu tema incluindo isto:
add_action("wp_head", "add_fonte_personalizada");
function add_fonte_personalizada() {
echo '<link rel=preconnect href=https://fonts.googleapis.com>
<link rel=preconnect href=https://fonts.gstatic.com crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel=stylesheet>';
}
Já experimentou este serviço? Qual a sua fonte preferida?