View
1
Download
0
Category
Preview:
Citation preview
IMPORTAÇÃO DE TIPOGRAFIA DO GOOGLE FONTS E CSS
GOOGLE FONTS
Escolher a(as) font a utilizar
https://fonts.google.com/
GOOGLE FONTS
Escolher a(as) font a utilizar
https://fonts.google.com/
GOOGLE FONTS
Abrir as familias de fontsseleccionadas
https://fonts.google.com/
GOOGLE FONTS
Podemos fazer o download das fonts e instalar no nosso computador
https://fonts.google.com/
GOOGLE FONTS
Podemos fazer o download das fonts e instalar no nosso computador
https://fonts.google.com/
GOOGLE FONTS
Em CUSTOMIZE escolhero corpo (Weight) das fontsque queremos utilizar.
O número irá ser usado no CSS dos Headers,em FONT-WEIGHT:
https://fonts.google.com/
GOOGLE FONTS
Voltamos a EMBED
https://fonts.google.com/
GOOGLE FONTS
Em EMBED clicamos em IMPORT
https://fonts.google.com/
GOOGLE FONTS
Em IMPORT seleccionamos o texto entre as tags <style></style>
https://fonts.google.com/
GOOGLE FONTS
Copiamos a linha de CSS e passamos para um ficheiro TXT(também podemos passar directamente para o Custom CSS no Wordpress)
Vamos criar um comentário entre /* ... */ para sabermos que este CSS é para importar as fonts do google
/* Importacao de fonts do Google fonts */ @import url('https://fonts.googleapis.com/css?family=Merriweather:400,700|Roboto:300,400,700');
https://fonts.google.com/
GOOGLE FONTShttps://fonts.google.com/
Copiamos as linhas de CSS que contém o nome das familias de font que estamos a usar e passamos para um ficheiro TXT(também podemos passar directamente para o Custom CSS no Wordpress)
Vamos criar um comentário entre /* ... */ para sabermos que este CSS é para importar as familias de fonts,mas agora deixamos todo este texto como comentário para podermos ir buscar os nomesdas familias sempre que quisermos usar nos HEADERS (H1, H2....)
/* Importacao de familias de fonts do Google fonts */ /*font-family: 'Roboto', sans-serif;font-family: 'Merriweather', serif;*/
GOOGLE FONTSUtilização do CSS
Se ainda não tivermos o Plugin CUSTOM CSS instalado,vamos buscalo em PLUGINS>ADD NEW e vamos procura-lo, instalar e activar
GOOGLE FONTSUtilização do CSS
Depois de activar o Custom CSS vamos clicar em ENABLE Advanced editor e clicar em SAVE
GOOGLE FONTSUtilização do CSS
Vamos buscar o CSS que copiamos e colar na janela do Custom CSS, e clicar em SAVE.
Já temos a importação das FONTS do Google
GOOGLE FONTSUtilização do CSS
No ficheiro que fizeste o download na aula:CSS IMPORTAR e ALTERAR FONTS.txt
tens o CSS para definires o uso do estilo das fontsque foste buscar ao Google Fonts
/* IMPORTAR FONTS */@import url('https://fonts.googleapis.com/css?family=Lobster|Roboto+Slab:400,700|Roboto:300,400,500,700');
/* HEADERS (TITULOS) escolha da familia da font e tamanho */
h1 { font-family: 'Lobster', cursive; font-size: 40px !important; font-weight: 300; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}
h2 { font-family: 'Roboto Slab', serif; font-size: 30px !important; font-weight: 700; /*color: #CCCCCC;*/ line-height: 1.5em !important; margin: 0 !important;}
h3 { font-family: 'Roboto Slab', serif; font-size: 25px !important; font-weight: 400; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}
h4 { font-family: 'Roboto Slab', serif; font-size: 25px !important; font-weight: 300; /*color: #CCCCCC;*/ line-height: 1.5em !important; margin: 0 !important;}
h5 { font-family: 'Roboto Slab', serif; font-size: 21px !important; font-weight: 300; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}
h6 { font-family: 'Roboto', sans-serif; font-size: 18px !important; font-weight: 700; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}
p { font-family: 'Roboto', sans-serif; font-size: 14px !important; font-weight: 400; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}
GOOGLE FONTSUtilização do CSS
Na primeira linha esta a importação da font,que já a colocaste no Custom CSS,esta linha só serve de exemplo para perceberesque começamos por importar as fonts.então não é necessário copiar esta e podes apagar
/* IMPORTAR FONTS */@import url('https://fonts.googleapis.com/css?family=Lobster|Roboto+Slab:400,700|Roboto:300,400,500,700');
/* HEADERS (TITULOS) escolha da familia da font e tamanho */
h1 { font-family: 'Lobster', cursive; font-size: 40px !important; font-weight: 300; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}
h2 { font-family: 'Roboto Slab', serif; font-size: 30px !important; font-weight: 700; /*color: #CCCCCC;*/ line-height: 1.5em !important; margin: 0 !important;}
h3 { font-family: 'Roboto Slab', serif; font-size: 25px !important; font-weight: 400; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}
h4 { font-family: 'Roboto Slab', serif; font-size: 25px !important; font-weight: 300; /*color: #CCCCCC;*/ line-height: 1.5em !important; margin: 0 !important;}
h5 { font-family: 'Roboto Slab', serif; font-size: 21px !important; font-weight: 300; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}
h6 { font-family: 'Roboto', sans-serif; font-size: 18px !important; font-weight: 700; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}
p { font-family: 'Roboto', sans-serif; font-size: 14px !important; font-weight: 400; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}
GOOGLE FONTSUtilização do CSS
Vamos agora definir o estilo dos Headers ou Titulos (h) e Parágrafos (p)
As definições do estilo das classes tem de estar sempre de chavetas.e tem de terminar sempre com ponto-e-virgula
Podes comentar um dos elementos que não queres usar...neste caso estamos a comentara COR (color:) porque vamos usar a cor que queremosem cada um dos casos, e se não tivessemos a cor comentada aqui, este header (h1) iria tera mesma cor em todo o site.
h1 { font-family: 'Lobster', cursive !important; font-size: 40px !important; font-weight: 300; /* */color: #333333; line-height: 1.3em !important; margin: 0 !important;}
GOOGLE FONTSUtilização do CSS
Em CSS a utilização de !IMPORTANT é para o nossoestilo se sobrepôr ao CSS do Tema
h1 { font-family: 'Lobster', cursive ;!important font-size: 40px ;!important font-weight: 300; /*color: #333333;*/ line-height: 1.3em !important; margin: 0 !important;}
GOOGLE FONTSUtilização do CSS
Na definição dos titulos temos a familia da font,que vais buscar ao que copiaste do Google fonts,deves substituir o exemplo que enviei.
E acrescentar o !IMPORTANT para se sobrepôr a outra familiadefinida para este Header
h1 { font-family: 'Merriweather', serif; ;!important font-size: 40px !important; font-weight: 300; /*color: #333333;*/ line-height: 1.3em !important; margin: 0 !important;}
GOOGLE FONTSUtilização do CSS
Na definição dos titulos temos:
h1 { font-family: 'Roboto', sans-serif !important; font-size: 40px !important; font-weight: 300; /*color: #333333;*/ line-height: 1.3em !important; margin: 0 !important;}
O tamanho da font,em que podes usar as unidadespx, pt, (entre outras)
O "peso" da font,Se é Bold, Normal, Light, etc.
Estes números correspondem às fonts que importaste do Google Fonts
GOOGLE FONTSUtilização do CSS
Na definição dos titulos temos:
h1 { font-family: 'Roboto', sans-serif !important; font-size: 40px !important; font-weight: 300; /*color: #333333;*/ line-height: 1.3em !important; margin: 0 !important;}
A Cor da tipografia,A cor é definida em códigoHexadécimal.Aqui a cor está comentada, logo não é usada, iremos usar de outra forma.
O espaço entre as linhas de texto (entrelinhamento)Pode usar as unidades em, px, %, etc
GOOGLE FONTSUtilização do CSS
Na definição dos titulos temos:
h1 { font-family: 'Roboto', sans-serif !important; font-size: 40px !important; font-weight: 300; /*color: #333333;*/ line-height: 1.3em !important; margin: 0 !important;}
A margem em baixo do texto,que colocamos 0 para sermosnós, caso a caso a definir o espaço, mas caso quizessemosusar sempre uma margem em todoo site, colocariamos um valor em px (pixeis), por exemplo 10px;
GOOGLE FONTSUtilização do CSS
Vamos agora copiar o CSS fornecido no ficheiro CSS IMPORTAR e ALTERAR FONTS.txtpara o Cusmot CSS e definir os teus estilos dos Headers ou Titulos (h) e Parágrafos (p)
/* HEADERS (TITULOS) escolha da familia da font e tamanho */
h1 { font-family: 'Merriweather', serif; font-size: 40px !important; font-weight: 300; /*color: #333333;*/ line-height: 1.3em !important; margin: 0 !important;}
h2 { font-family: 'Merriweather', serif; font-size: 30px !important; font-weight: 700; /*color: #CCCCCC;*/ line-height: 1.3em !important; margin: 0 !important;}
h3 { font-family: 'Merriweather', serif; font-size: 25px !important; font-weight: 400; /*color: #333333;*/ line-height: 1.3em !important; margin: 0 !important;}
h4 { font-family: 'Merriweather', serif; font-size: 25px !important; font-weight: 300; /*color: #CCCCCC;*/ line-height: 1.3em !important; margin: 0 !important;}
h5 { font-family: 'Merriweather', serif; font-size: 21px !important; font-weight: 300; /*color: #333333;*/ line-height: 1.3em !important; margin: 0 !important;}
h6 { font-family: 'Roboto', sans-serif; font-size: 18px !important; font-weight: 700; /*color: #333333;*/ line-height: 1.3em !important; margin: 0 !important;}
p { font-family: 'Roboto', sans-serif; font-size: 14px !important; font-weight: 400; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}
GOOGLE FONTSUtilização do CSS
Vamos agora copiar o CSS fornecido no ficheiro CSS IMPORTAR e ALTERAR FONTS.txtpara o Cusmot CSS e definir os teus estilos dos Headers ou Titulos (h) e Parágrafos (p)
e clica em SAVE
Não te esqueças de juntar o CSS para alterar o Tema Agama.
GOOGLE FONTSUtilização do CSS
Aplicação dos estilos de Headerse Parágrafos
GOOGLE FONTSUtilização do CSS
Resultado
Recommended