Skip to main content

Usando Fontes

tip

Por padrão, Delta usa a fonte do sistema do usuário para construir os componentes.

Vamos configurar uma fonte diferente, Roboto, para substituir a fonte padrão.

Usando Google Fonts​

React.js​

Copie o código no <head> do seu html na pasta public

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MyApp</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Next.js​

Copie o código no <head> da sua página _document.tsx

import React from 'react';
import NextDocument, {
  Html,
  Head,
  Main,
  NextScript
} from 'next/document';

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true" />
          <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Usando @font-face​

As fontes podem ser carregadas em seu projeto usando nosso globalCss ou com seu próprio estilo global.

@font-face {
  font-family: 'Roboto';
  font-style: 'normal';
  font-weight: 400;
  font-display: 'swap';
  src:
    local('Roboto Regular'),
    local('Roboto-Regular'),
    url('fonts/roboto-v29-latin-regular.woff2') format('woff2');
}

Atribua essas fontes a configuração de tema. Mais detalhes sobre a customização de temas aqui.

import { extendsTheme } from '@escaletech/delta'

const theme = extendTheme({
  fonts: {
    primary: 'Roboto, sans-serif'
  },
})

export default theme

Adicione o tema retornado ao componente raiz de seu projeto

const App = () => (
  <div className={theme}>
    // children
  </div>
)