Saltar para: Post [1], Comentários [2], Pesquisa e Arquivos [3]

Ajuda Blogs

Um blog para tirar dúvidas sobre o SAPO Blogs. Se não encontrar a sua dúvida, deixe um comentário em qualquer post.

Ajuda Blogs

Um blog para tirar dúvidas sobre o SAPO Blogs. Se não encontrar a sua dúvida, deixe um comentário em qualquer post.

Como instalar uma Google font

O Google Fonts disponibiliza centenas de tipo de letras diferentes para instalação gratuita em blogs e não só. Se precisar de usar um tipo de letra diferente no seu blog SAPO, pode instalar uma ou mais fonts do Google. Para instalar uma Google Font no seu blog do SAPO, escolha um tipo de letra e siga as instruções abaixo.

Nota: este tutorial só funciona com templates mais recentes. Se utiliza um template antigo, consulte este post.

 

Passo 1: copie para o blog o código <link> fornecido pelo Google Fonts

standard.jpg

Depois de seleccionar o tipo de letra que quer usar, copie o código Standard fornecido pelo Google (semelhante àquele na imagem acima) e cole-o no blog SAPO, no campo Meta tags, na página Configurações (menu Definições).

 

 Passo 2: copie o código CSS, fornecido pelo Google Fonts

Na página de instalação do tipo de letra, copie o código CSS fornecido pelo Google (semelhante àquele código na imagem acima).

 

Passo 3: editar o código CSS

Precisa de adaptar o código CSS fornecido pelo Google ao template que está a usar e ao texto a que quer aplicar o tipo de letra. Use os exemplos abaixo como referência.

Nos exemplos abaixo usamos o tipo de letra "Source Code Pro" mas precisa de usar o tipo de letra que escolheu, tal e qual como copiado no passo 2.

 

Título do cabeçalho:

#container header h1 {font-family: 'Source Code Pro', sans-serif;}

 

Títulos dos posts:

.blog .posts h2 {font-family: 'Source Code Pro', sans-serif;}

 

Texto dos posts:

.blog .posts article {font-family: 'Source Code Pro', sans-serif;}

 

Títulos da coluna lateral:

.extras h3 {font-family: 'Source Code Pro', sans-serif;}

 

Passo 4: cole o código editado no blog

csspersonalizada.jpg

Depois de adaptar o código CSS, cole-o no campo CSS Personalizada na página CSS (menu Template).

41 comentários

Comentar post

Pág. 1/2

Dúvidas mais frequentes

Segurança e Privacidade

Personalização

Subscrever por e-mail

A subscrição é anónima e gera, no máximo, um e-mail por dia.