A regra @font-face permite que diferentes tipos de fontes sejam adicionadas ao seu blog. Dessa forma, além das fontes comuns, fontes customizadas podem ser utilizadas de forma simples.
Entendendo a regra @font-face
A regra @font-face possui duas propriedades, a font-family e a src.
A propriedade font-family é o nome que você dará a sua fonte. Ou seja, ela será utilizada nos lugares que você pretende usar a fonte.
A propriedade src é endereço ou diretório onde a fonte se encontra. É possível adicionar ela somente uma vez ou várias vezes, especificando qual o tipo da fonte (ou extensão do arquivo). Cada navegador espera um tipo diferente de fonte, conforme especificado aqui (sessão "Browser Support").
Exemplo de código com a regra e com uma classe utilizando ela:
@font-face {
font-family: 'NomeFonte';
src: url('fonte.eot'),
url('fonte.woff2') format('woff2'),
url('fonte.woff') format('woff'),
url('fonte.ttf') format('truetype'),
url('fonte.otf') format('opentype'),
url('fonte.svg') format('svg');
}
.classe-exemplo {
font-family: 'NomeFonte';
}
Hospedando e importando arquivos de fonte no GitHub
Para fazer este tutorial, é necessário criar uma conta no GitHub e criar um repositório. Para isso, siga este tutorial até o passo que a criação de um repositório é feita e a parte de páginas é configurada.
Com os arquivos de fonte hospedados no GitHub, faça o seguinte passo para criar o link de importação e utilizá-lo no seu blog:
Substitua as partes detacadas com as suas informações de nome de usuário, repositório, branch e nome de arquivo.
https://raw.githubusercontent.com/{SEU_USUARIO}/{SEU_REPOSITORIO}/{SUA_BRANCH}/{SEU_ARQUIVO.EXTENSAO}?raw=true
Assim, este link pode ser utilizado dentro do url('LINK_AQUI') no seu CSS.
Olá, boa noite Alan!
ResponderExcluirEu amei o tutorial, estava atrás disso a um tempo, pois não sei o que deu na minha cabeça que comecei a achar que só existiam as fontes do Google Fonts, porém, fiquei cansado, pois as fontes de quase todos os blogs/sites, ficam iguais demais... Estou em busca de uma nova identidade visual, só que estou cada vez mais saturado, rs. Esses dias eu segui um tutorial do YouTube para fazer template para o Blogger do zero, depois surgiu um erro, tentei consertar e esqueci de fazer backup, resultado: Errei o blog que estava editando e apaguei todo o código. Eu fiquei tipo: ='(. Tive que refazer... Depois perdi o interesse legal, peguei alguns tutoriais daqui e... Agora eu não gostei mais do template, detalhe: Esse é o quarto layout que faço, sendo que já atingi meu limite eu acho. Isso porque também tenho um template que comprei a alguns anos e nem usei direito... Bom, obrigado por ter postado o tutorial e já usei, achei uma fonte linda na net e já estou usando-a, agora só falta eu querer continuar a personalizar o template, rs.
Vc sabe? Tem um negócio que eu queria aprender, uma vez fiz mas esqueci.
ResponderExcluirEnfim...como eu coloco uma folha de caderno na postagem? Qro dizer, como fazer a postagem ficar em forma de folha de caderno? Tu me entende? Ta certinho? Pode fazer um tuto explicando? Pois não acho. Vlw. Beijão na ponta do nariz kk
Alan, eu te acompanho a muitos anos! Não sabia que o blog estava ativo. To chocado, hahahaha.
ResponderExcluirÀs vezes eu apareço por aqui :)
ExcluirOlá xuxu, tutu pom?
ResponderExcluirFont face é algo tão bom né? Ajuda tanto quando queremos usar aquelas fontes diferentes..
Confesso que eu tenho um post ensinando a usar mas depois de ler a sua explicação fiquei até com vergonha do meu post hahah
Beijão moh, até ;)
Ahhhh meu deus!
ResponderExcluirEu não fazia ideia que o blog era ativo, eu usava tanta coisa daqui, sempre ajudava tanto. Muito bom saber disso c: Lembro até de um layout antigo específico
Até mais ~
Florescendo Sonhos ❀
Não está exatamente ativo, mas continuamos aqui :)
ExcluirOi Alan, me desculpa pelo sumiço. Quando você voltou com o nome We Heart HTML? Poxa, eu tomei um susto tão bommm quando eu o vi, esse nome me trás boas nostalgias. <3 Com certeza fez parte da melhor era da blogosfera.
ResponderExcluirFont-face é a minha salvação, mas também um estresse meu. Pois desde que eu passei a hospedar, meu cerebro simplesmente apaga como faz e quando vou fazer de novo eu não lembro mais onde eu hospedei as fontes que usei. :) Eu não sirvo pra ser blogueira.
É bom te "ver"! (⌒ω⌒)
With luv, Océane ♡ [o blog está de volta]