Como usar uma custom font no CodeSandbox

Front-end
#1

Ei, pessoal, tudo bem?

Já tentei usar o @font-face, colocar as fontes na pasta PUBLIC, dentre outros métodos que não funcionaram. Sabem o que mais eu poderia tentar?

valeu

09
Screen Shot 2020-08-18 at 09.06.09.png727×361 26.3 KB

#2

a pasta font tem que ser colocada dentro do src, porque é o React que controla isso …!

1 curtida
#3

ei, dragoon.
mesmo assim, não renderiza com a fonte correta
;/

image
image.png716×432 28.9 KB

#4

Peguei do site os arquivos e coloquei igual na explicação:

@font-face {
  font-family: 'Graphik-Medium';
  src: url('./font/373efd69166d31c2b5052a505527acbf.eot');
  src: url('./font/373efd69166d31c2b5052a505527acbf.eot?#iefix')
      format('embedded-opentype'),
    url('./font/373efd69166d31c2b5052a505527acbf.woff2') format('woff2'),
    url('./font/373efd69166d31c2b5052a505527acbf.woff') format('woff'),
    url('./font/373efd69166d31c2b5052a505527acbf.ttf') format('truetype'),
    url('./font/373efd69166d31c2b5052a505527acbf.svg#Graphik-Medium')   
   format('svg');
}

e crie um css:

.app {
  font-family: 'Graphik-Medium' !important;
  font-size: 11px;
}

e estilizei a tag com className:

<div className="app">

deu certo!

1 curtida