google fonts importacao e css - marco madruga...

IMPORTAÇÃO DE TIPOGRAFIA DO GOOGLE FONTS E CSS

GOOGLE FONTShttps://fonts.google.com/

https://fonts.google.com/

GOOGLE FONTS

Escolher a(as) font a utilizar


GOOGLE FONTS

Abrir as familias de fontsseleccionadas


GOOGLE FONTS

Podemos fazer o download das fonts e instalar no nosso computador


GOOGLE FONTS

Em CUSTOMIZE escolhero corpo (Weight) das fontsque queremos utilizar.

O número irá ser usado no CSS dos Headers,em FONT-WEIGHT:


GOOGLE FONTS

Voltamos a EMBED


GOOGLE FONTS

Em EMBED clicamos em IMPORT


GOOGLE FONTS

Em IMPORT seleccionamos o texto entre as tags <style></style>


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');


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


Depois de activar o Custom CSS vamos clicar em ENABLE Advanced editor e clicar em SAVE


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


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;}



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;}


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');


h1 { font-family: 'Lobster', cursive; font-size: 40px !important; font-weight: 300; /*color: #333333;*/ line-height: 1.5em !important; margin: 0 !important;}








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;}


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;}


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;}


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




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




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;


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)


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;}


h4 { font-family: 'Merriweather', serif; font-size: 25px !important; font-weight: 300; /*color: #CCCCCC;*/ line-height: 1.3em !important; margin: 0 !important;}





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.


Aplicação dos estilos de Headerse Parágrafos


Resultado

google fonts importacao e css - marco madruga...

Documents