Saltar para: Post [1], Comentar [2], Pesquisa e Arquivos [3]

Ajuda Blogs

Um blog para esclarecer dúvidas sobre o SAPO Blogs.

Ajuda Blogs

Um blog para esclarecer dúvidas sobre o SAPO Blogs.

Como instalar uma Google font

01.06.15

O Google Fonts disponibiliza centenas de tipos de letras diferentes para instalação gratuita em blogs e não só. Se precisam de usar um tipo de letra diferente no vosso blog SAPO, podem instalar uma ou mais fonts do Google.

Para instalarem uma Google Font no vosso blog do SAPO, escolham um tipo de letra e sigam os 4 passos explicados abaixo.

Nota: este tutorial é aplicável à maioria dos nossos templates mais recentes. Se utilizam um template antigo, recomendamos consultar este post. O Google Fonts é um serviço externo ao SAPO, pelo que dúvidas ou dificuldades devem ser reportadas ao apoio ao cliente desse serviço.

 

Passo 1: copiar o código <link> fornecido pelo Google Fonts

standard.jpg

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

 

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

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

 

Passo 3: editar o código CSS

Precisam de adaptar o código CSS fornecido pelo Google ao template que estão a usar e ao texto a que querem aplicar o tipo de letra. Podem usar os exemplos abaixo como referência (que podem não ser aplicáveis em todos os casos).

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

 

Título do cabeçalho:

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

Em alguns templates, a definição aplicável poderá ser esta:

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

 

 

Descrição do cabeçalho (não aplicável a todos os templates):

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

Em alguns templates, a definição aplicável poderá ser esta:

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

 

Títulos dos posts:

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

 

Subtítulos dos posts:

.blog .posts h3 {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;}

 

Títulos dos posts em destaque:

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

 

Texto do menu do cabeçalho:

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

 

 

Passo 4: colar o código editado no blog

csspersonalizada.jpg

Depois de adaptarem o código CSS, tal como exemplificamos no passo 3, copiem o código para o campo CSS Personalizada, na página CSS (menu Template). Guardem as alterações. Google Font instalada!

2 comentários

  • Imagem de perfil

    Pedro 18.10.2016

    Bom dia,
    na página Personalização, no separador Letras, pode alterar tipo e tamanho de letra da descrição.
  • Comentar:

    Comentar via SAPO Blogs

    Se preenchido, o e-mail é usado apenas para notificação de respostas.

    Este blog tem comentários moderados.