Como Incorporar Google Fonts em Seu Tema WordPress ou HTML

Fácil
15%

Veja abaixo como incorporar uma ou mais fontes do GoogleFonts em seu tema WordPress ou até mesmo em um site HTML:

– Acesse: GoogleFont
– Procure as fontes desejadas e as adicione à “Collection”. Neste exemplo iremos utilizar as fontes “Roboto” e “Oswald” (ver tela)
– Após selecionar as fontes, clique em “Use” no canto inferior direito da página (ver tela)
– Escolha as variações de cada fonte. Vamos selecionar as variações de intensidade 300, 400 e 700 (ver tela)
– Role a página e copie o código gerado (ver tela)

Incorporando

– Cole o código dentro da tag header, dessa forma:

<header>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700|Oswald:400,700,300' rel='stylesheet' type='text/css'>
</header>

– Abaixo um exemplo de como configurar as fontes “Roboto” com cada intensidade via CSS:

.roboto-fina {
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
}
.roboto-normal {
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
}
.roboto-negrito {
   font-family: 'Roboto', sans-serif;
   font-weight: 700;
}

– Usando a fonte “Roboto” fina:

<span class="roboto-fina">Seu texto aqui</span>

Deixe sua Pergunta ou Comentário:

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Por favor, digite os caracteres desta imagem na caixa de entrada

Por favor digite o código da imagem

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>