Você sabe o que são fontes do Google? Antes de entrarmos em bits técnicos, vamos primeiro falar sobre o que sabemos como definição de Google Fonts. Ou, como você queira chamar fontes do Google.
O Google Fonts é um serviço em que o Google fornece acesso a tipografia da web gratuita para qualquer pessoa. Para entender por que isso é importante, vamos fazer um rápido tour pela história das fontes da web.
Saiba o que são fontes do Google
Primeiramente, em uma breve história da tipografia da web.
Para entender o significado do Google Fonts, você precisa saber que em épocas anteriores não havia fontes especiais para websites. Em vez disso, as letras nas quais os sites eram exibidos dependiam do navegador. Desse modo, você escolhia no seu código HTML, tipos de fontes como: arial, verdana, etc.
Mais tarde, o webmaster ganhou a capacidade de controlar a tipografia até certo ponto. No entanto, eles eram limitados a um punhado de fontes centrais que precisavam ser instaladas no computador do usuário para funcionar.
Embora as soluções alternativas estivessem disponíveis, elas eram frequentemente incômodas, como o uso de Flash ou imagens codificadas de letras para formar texto.
Prossiga para ver mais detalhes sobre como usar fontes do Google.
Quando os navegadores da web ganharam o poder de baixar fontes
Foi somente quando o CSS2 saiu que os navegadores da web ganharam a capacidade de baixar fontes de sites . Entretanto, para que funcionasse, você tinha que possuir o tipo de letra que queria usar em seu site. Geralmente, teria que comprar essas fontes.
Além disso, houve controvérsia sobre essas técnicas, porque faz com que as fontes sejam baixadas gratuitamente para todos, mesmo que tenham uma licença comercial. Certamente, isso levava a uma clara violação em alguns casos ao usar fontes do Google, dessa maneira.
Em suma, o uso de fontes personalizadas em sites costumava ser caro e, ou complicado.
Muito disso mudou quando o Google Fonts foi lançado em 2010. Embora não seja o primeiro serviço desse tipo, já queo Typekit já existia anteriormente, o Google Fonts tornou-se o principal local para a tipografia da Web personalizada.
A razão mais óbvia para isso é o fato de que toda tipografia dentro da biblioteca está disponível sob uma licença livre. Com mais de 900 fontes disponíveis, muitas vezes em vários pontos fortes, tamanhos e estilos, esse é um forte argumento.
Em segundo lugar, como você verá, o serviço torna a implementação de suas fontes muito fácil e sem atrito em qualquer site. A melhor parte: você nem precisa hospedar a fonte em seu próprio servidor. Em vez disso, basta apontar o navegador do usuário para o Google e ele obterá a fonte diretamente deles.
Parece muito bom, certo? Agora, se você quiser saber como usar o Google Fonts com um site WordPress, continue lendo. É exatamente isso que vamos chegar agora.
Como Usar as fontes do Google?
Para usar o Google Fonts, primeiro você precisa escolher as famílias de fontes que gostaria de usar em seu projeto. Você pode pesquisar as fontes pelo nome ou navegar pelas centenas de fontes disponíveis, estreitando sua pesquisa usando filtros como serif, sans-serif, handwriting e display. Para ver qualquer uma das fontes no contexto, você pode digitar diretamente nos campos de texto que aparecem abaixo de cada família de fontes para obter uma visualização do que seu texto pode parecer em qualquer fonte específica.
Ir para o site Google Fonts
Depois de escolher sua fonte, pressione o ícone Mais no canto superior direito da caixa da fonte para adicioná-la à sua lista, e a caixa Famílias selecionadas aparecerá na parte inferior da página. Você pode escolher quantas famílias quiser. Mas, tem um detalhe: esteja ciente de que quanto mais fontes você vincular, maior será o tempo de carregamento da sua página.
Quando terminar de pesquisar, clique na caixa Famílias selecionadas e escolha entre as ponderações e os estilos disponíveis para suas famílias de fontes específicas na guia Personalizar.
Depois de selecionar todos os pesos e estilos de fontes, copie os links da guia Incorporar, para adicioná-los aos seus projetos. Existem duas maneiras diferentes de incorporar as fontes em seus projetos: você pode usar o link HTML na seção <head> do seu documento, assim:
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans" rel="stylesheet">
Ou você pode usar a regra CSS @import e colocar a regra @import na parte superior de suas folhas de estilo:
@import url('https://fonts.googleapis.com/css?family=Lato|Open+Sans');
O Google Fonts oferece opções para incorporar suas fontes dessas duas formas.
Para usar essas fontes em seus projetos, a etapa final é defini-las no seu CSS como você faria com qualquer outra fonte:
body{
font-family: "Lato", "Open Sans", sans-serif;
}
Como Enfileirar Fontes do Google no Tema WordPress
/**
* Register custom fonts.
*/
function themeslug_fonts_url() {
$fonts_url = '';
$fonts = array();
$subsets = 'latin,latin-ext';
/*
* Tradutores: se houver caracteres em seu idioma que não sejam suportados
* traduza isso para 'off'. Não traduza para o seu próprio idioma.
*/
if ( 'off' !== _x( 'on', 'Oswald font: on or off', 'themeslug' ) ) {
$fonts[] = 'Oswald:400,700';
}
/*
* Tradutores: se houver caracteres em seu idioma que não sejam suportados
* por Montserrat, traduz isso para 'off'. Não traduza em seu próprio idioma.
*/
if ( 'off' !== _x( 'on', 'Montserrat font: on or off', 'themeslug' ) ) {
$fonts[] = 'Montserrat:400,700';
}
if ( $fonts ) {
$fonts_url = add_query_arg( array(
'family' => urlencode( implode( '|', $fonts ) ),
'subset' => urlencode( $subsets ),
), 'https://fonts.googleapis.com/css' );
}
return esc_url_raw( $fonts_url );
}
Enfileirar scripts e estilos
/**
* Enqueue scripts and styles.
*/
function themeslug_scripts() {
// Add custom fonts, used in the main stylesheet.
wp_enqueue_style( 'themeslug-fonts', themeslug_fonts_url(), array(), null );
}
add_action( 'wp_enqueue_scripts', 'themeslug_scripts' );
Pronto. Você já sabe o que são fontes do Google e como usar em seu site.
