Skip to content

Instantly share code, notes, and snippets.

@renatoam
Created July 11, 2020 02:13
Show Gist options
  • Save renatoam/23e5ca4e569a67c90d159e42874412ba to your computer and use it in GitHub Desktop.
Save renatoam/23e5ca4e569a67c90d159e42874412ba to your computer and use it in GitHub Desktop.
Guia bem breve e sucinto sobre a utilização correta do @font-face
/* Caso não tenha todos os formatos da sua font (os que te interessam), pode converter online */
@font-face {
/* Controla o comportamento de exibição de uma font personalizada (font-face) */
font-display: optional;
/* Nome da font */
font-family: 'Soleto';
/* Verifica se a font já existe localmente, evitando download desnecessário da font (se existir localmente) */
src: local('Soleto'),
/* Formato mais moderno e mais leve; se o browser for compatível, os demais são ignorados */
url('arquivos/soleto.woff2') format('woff2'), /* Modern Browsers */
url('arquivos/soleto.woff') format('woff'), /* Modern Browsers */
/* Formatos de fallback para navegadores antigos */
url('arquivos/soleto.ttf') format('truetype'), /* Safari, Android, iOS */
url('arquivos/soleto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('arquivos/soleto.svg') format('svg'); /* Legacy iOS */
src: url('arquivos/soleto.eot'); /* IE9 Compat Modes */
font-weight: normal;
font-style: normal;
/* Filtra quais caracteres serão baixados, evitando download de caracteres que não serão utilizados
(letras árabes, japonenas, hieróglifos, etc.) */
unicode-range: U+0020-00FF;
}
@font-face {
font-display: optional;
font-family: 'Soleto';
src: local('Soleto'),
url('arquivos/soleto-bold.woff2') format('woff2'), /* Modern Browsers */
url('arquivos/soleto-bold.woff') format('woff'), /* Modern Browsers */
url('arquivos/soleto-bold.ttf') format('truetype'), /* Safari, Android, iOS */
url('arquivos/soleto-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('arquivos/soleto-bold.svg') format('svg'); /* Legacy iOS */
src: url('arquivos/soleto-bold.eot'); /* IE9 Compat Modes */
font-weight: 700;
font-style: normal;
unicode-range: U+0020-00FF;
}
@renatoam
Copy link
Author

maik-jonietz-_yMciiStJyY-unsplash

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment