GOOGLE FONTS IMPORTACAO e CSS - Marco Madruga...

IMPORTAÇÃO DE TIPOGRAFIA DO GOOGLE FONTS E CSS

GOOGLE FONTShttps://fonts.google.com/

GOOGLE FONTS

Escolher a(as) font a utilizar

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

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

Transcript of GOOGLE FONTS IMPORTACAO e CSS - Marco Madruga...

A Importacao de Cenceitos Modernistas No Planejamento Urbano de Florianopolis

O Lúdico no Ensino do Português na ESAD

ESAD/ Matosinhos Escola supErior dE artEs E dEsign€¦ · ESAD Escola Superior de Arte e Design de Matosinhos Ano 2010 _ Falar de identidade da cidade: Um projecto de desenho para

Treinamento Módulo Importacao Datasul

Manual Declaracao Aduaneira Importacao Vrs 1 Internet

Importacao por conta e ordem

Material Importacao EAD

SUMÁRIO - idg.receita.fazenda.gov.bridg.receita.fazenda.gov.br/orientacao/aduaneira/importacao-e... · 4.10.1. Requisitos prévios à solicitação do tratamento tarifário preferencial.....

Leiaute de Importacao Do AC Fiscal

Importacao de cafe - Folha

Guia Orientativo Para Importacao de Insumos

Apostila de Casos - Importacao

Sistematica Importacao e Exportacao

Esad Chasing and Repousse 2009

Xerox EX-i C60/C70 Print Server Powered by Fiery · • Japan Colour 2011 Colour Fontes • 138 Adobe Fonts • 81 PCL Fonts Segurança • Secure Erase • Scan to Mailbox • SNMPv3

Projeto Analise de Viabilidade de Importacao

FEUP + ESAD

Importacao de Arquivos XML pelo Totvs ColaboracaoTotvs Colaboracao_TFUAJL

Importacao de Furos

eBook Iniciando Importacao