Fontes

Configurações de fontes

• Para configurar um tipo de fonte em CSS use: font-family:
• Para configurar o tamanho de uma fonte em CSS use : font-size:
• px ou em
• ​​​​​​​
• Para configurar o peso da fonte em CSS use: fonte-weight:
• lighter, normal, bold, bolder ...
• Para configurar o estilo da fonte em CSS use: font-style:
• italico
• ​​​​​​​Dica:
• Para podemos usar todas essas configs em uma única linha usando o shothand!
• Próximo slide ---->

Shorthand

• Podemos usar o shorthand para fazer toda a config de font usando a propriedade: font:
• Para isso lembre-se a ordem correta:
• font-style > font-weight > font-size > font-family
• Exemplo:
• font: italic bolder 3em 'Work Sans' , sans-serif;

Importando fontes do Google Fontes

• Para importar fontes do google fontes e fazer funcionar temos que fazer alguns passos:
• Escolha a fonte no site: fonts.google.com e click em get font.
• Click em Get embed cod e selecione @import.
• Copie o @import exemplo: @import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap'); e cole no topo do CSS como toda @ regra deve ser.
• Copie a linha a font-family exemplo: font-family: "Neucha", cursive; e cole no seletor desajado
• Importante
• Para cada fonte diferente é necessário copiar o @import
• e usar no lugar que desejar com a proriedade font-family do mesmo nome
• Usar no máximo 4 famílias de fontes.

Fontes externas baixadas

• Para usar uma fonte baixada da internet precisamos seguir alguns passos:
• Baixe a fonte do site desejado em formato .otf e .ttf e coloque na pasta fonts dentro da pasta do projeto
• No VS Code use a regra @font-face com as urls e formats pré configuradas ( sempre no topo por ser uma regra)
• Após @font-face use os colchetes {} para configurar. Em src: url('') coloque o diretório da fonte no pc
• Em format('') coloque o formato dessa fonte se .otf coloque opentype, se .ttf coloque truetype
• Segue os tipos de format
• Tipos de format()
• - opentype (otf)
• - truetype (ttf)
• - embedded-opentype
• - tuetype-aat (Apple Advanced Typography)
• - svg
• Coloque o nome que desejar em font-family:'' agora é só colocar o nome escolhido para essa fonte no font-family do seletor desejado.
• Exemplo:
• @font-face {
• font-family: 'Nome Qualquer';
• src: url('fonts/JMH\ Typewriter.otf') format('opentype'),
• url('fonts/JMH\ Typewriter.ttf') format('truetype');
• font-style: normal;
• font-weight: normal;
• }

Como capturar fontes de um site

• Para capturar uma fonte de um determinado site basta usar a extensão de navegagador fonts ninja.

Como capturar fontes de uma imagem

• Use os sites:
• https://www.whatfontis.com
• https://www.fontsquirrel.com/matcherator
• https://www.myfonts.com/pages/whatthefont
• Basta arrastar a imagem para dentro do site
• whatfontis é o melhor