Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Importar Fonts do Google

Olá, gostaria de saber como faço para incorporar fontes diferentes em meu projeto com React. É possível? Como posso realizar?

1 resposta
solução!

Sim é possível, pelo título da sua pergunta eu recomendo utilizar a API do Google para adicionar fontes externas.

Primeiro passo: Acesse https://fonts.google.com/ e selecione a fonte desejada. Selecione os estilos, por exemplo 400 italico, 600 italico, 300 regular.

Segundo passo: No canto superior direito do site aparece um botão "view selected styles", clicando nele você poderá encontrar a sessão "use on the web". Selecione a opção link e você terá um texto como esse:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">

Terceiro passo: Em um projeto criado com o 'create-react-app', acesse o arquivo 'index.html' localizado dentro da pasta public. La dentro da tag head você pode colar as duas tags link que copiou, isso efetuara a conexão com a API de fontes do Google, e solicitara as famílias de fonte que você selecionou:

Seu index.html ficará algo parecido com isso:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

      <!-- Adicionei as duas tags link aqui -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

após isso você pode utilizar as fontes normalmente no css como:

.componenteQualquer {
    font-family: 'Roboto';
    font-weight: 400;
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software