Entrar Ainda não tem acesso?
3
respostas

Fonte não funcionava

Referente ao curso React com JavaScript: lidando com arquivos estáticos, no capítulo Fontes e estilos e atividade Arquivos de fontes

por Ilo Ferro Pellegrini Navarro Fagundes
| 170.1k xp | 10 posts
Frontend Developer

A aplicação da fonte não estava funcionando, então, quando retirei o format("truetype") passou a funcionar, ficando assim meu código:

@font-face { font-family: 'GhandiSansRegular'; src: local('GhandiSansRegular'), url('../assets/fontes/GandhiSans-Regular.otf'); font-weight: 500; display: swap; } @font-face { font-family: 'GhandiSansBold'; src: local('GhandiSansBold'), url('../assets/fontes/GandhiSans-Bold.otf'); font-weight: 700; display: swap; }

Caso alguém tenha este mesmo problema, esta pode ser uma solução.

3 respostas
por Matheus Gorga De Barcellos
| 130.7k xp | 9 posts
Analista de Produto

Boa Noite,

Eu troquei URL por SRC e funcionou bem!

@font-face {
  font-family: "GandhiSansRegular";
  src: local("GandhiSansRegular"), src("../assets/fontes/GandhiSans-Regular.otf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "GandhiSansBold";
  src: local("GandhiSansBold"), url("../assets/fontes/GandhiSans-Bold.otf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
por Roberta Amaro Macedo
| 46.3k xp | 10 posts

Eu não consegui fazer com que a fonte apareça, mesmo utilizando as duas soluções dos colegas acima

 @font-face {
    font-family: "GandhiSansRegular";
    src:local("GandhiSansRegular"),
    url("../assets/fontes/GandhiSans-Regular.otf") format("truetype");
    font-weight: 500;
    display: swap;
  }

  @font-face {
    font-family: "GandhiSansBold";
    src:local("GandhiSansBold"),
    url("../assets/fontes/GandhiSans-Bold.otf") format("truetype");
    font-weight: 700;
    display: swap;
  }
por Matheus Gorga De Barcellos
| 130.7k xp | 9 posts
Analista de Produto

Roberta, Voce fez a importação da font no index.js e importação dos estilos globais no App.js?

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import "./assets/fontes/GandhiSans-Bold.otf"
import "./assets/fontes/GandhiSans-Regular.otf"


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

import PaginaInicial from "./pages/paginas/PaginaInicial";
import './styles/estilosGlobais.scss'

function App() {
  return (
    <PaginaInicial />
  );
}

export default App;