🔟 Десять быстрых шагов для настройки шрифтов Google в проекте GATSBY

Если вы хотите добавить пользовательские шрифты в свой проект GATSBY, вот быстро спускается на том, как встать и запустить! 😄

Я недавно начал смотреть, как я могу интегрировать шрифты Google в свой проект GATSBY. Я обнаружил, что есть довольно много документации относительно того, какие плагины использовать, но не было понятно, что делать после их установки, и как использовать новые шрифты.

❗ Несколько предпосылок, у вас есть:

Настроен проект GATSBY (проверьте Quick-Start Docs Если вам нужно сделать это)
Стильные компоненты, созданные в рамках проекта GATSBY (посмотрите, как GATSBY стилизованные компоненты Документы, если вам нужно сделать это)
Терминал с доступом NPM (загрузка узла здесь Если вам это нужно)
Редактор по вашему выбору (я использую и ссылаюсь на VS код )

Теперь давайте доберемся до забавной части и добавьте Google шрифты в наш проект! 😃

1️⃣ Скачать свой любимый шрифт из Google Fonts

Я решил скачать Менее и будет ссылаться на то, что на протяжении всей остальной части этих шагов.

2️⃣ Установить плагин GATSBY-Plugin-Prefetch-Google-Fonts

Чтобы установить это, из вашего оконного окна Run NPM Установка --save gatsby-plugin-prefetch-google-fonts Отказ

3️⃣ Обновление GATSBY-CONFIG.JS

Перемещаться в VS-коде к gatsby-config.js файл. Вставьте этот фрагмент в конце плагинов, чтобы использовать наш недавно установленный плагин:

{
  resolve: `gatsby-plugin-prefetch-google-fonts`,
  options: {
    fonts: [
      {
        family: 'Inter',
        variants: ['400', '400i', '700', '700i'],
        subsets: ['latin-ext'],
      },
    ],
  },
},

4️⃣ Создать статические и шрифты папки

В SRC/ Папка, создать статический папка; и внутри статический Папка, создать шрифты папка

5️⃣. Добавить файлы Google Fonts в Project

Переместите файлы Google Fonts Downloads Inter TTF (* .ttf) в папку шрифтов.

6️⃣ Создание и обновление fonts.css file

В шрифты Папка, создать fonts.css И создайте следующий шрифт для каждого файла TTF:

@font-face {
  font-family: 'Inter Extra Light';
  src: url('./Inter-ExtraLight-slnt=0.ttf') format('truetype');
  font-style: normal;
}

Примечание. Вы хотите обновить семейство шрифта и URL на фрагменте выше, чтобы указать на каждый файл TTF.

7 ️⃣ Создать в стиле папки и связанные файлы

Создать одну папку: в SRC/ Папка, создать Стили папка с Theme.js Файл и A Globalstyles.js файл.

8️⃣. Обновите Theme.js и globalstyles.js файлы

В Theme.js Файл, добавьте следующее:

const theme = {
  font: {
    primary: `'Inter Black'`,
  },
}

И в Globalstyles.js Файл, добавьте следующее:

import { createGlobalStyle } from 'styled-components';

const normalize = `
  /*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
`;

const GlobalStyles = createGlobalStyle`
  ${normalize};
  body {
    font-family: ${(props) => props.theme.font.primary};
  }
`;

export default GlobalStyles;

Примечание: узнайте больше о Createglobalstyle здесь Отказ

9️⃣ Обновление макета

В пределах layout.js Добавьте следующее:

import React from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider } from 'styled-components';

import theme from '../styles/theme';
import GlobalStyles from '../styles/GlobalStyles';
import '../static/fonts/fonts.css';

const Layout = ({ children }) => (
  
    <>
      
      {children}
    
  
);

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;

Примечание: это обеспечивает доступ к теме через Темапровидер Отказ

🔟 Проверьте обновления шрифтов

Беги GATSBY Развивается В терминале и проверка шрифтов Google теперь применяется!

🚀 Наслаждайтесь!

Надеюсь, это поможет вам, если вы боролись с попыткой добавить пользовательские шрифты в ваш проект GATSBY. Не стесняйтесь обращаться ко мне в комментариях или в Twitter ( @ Kyleh919 ) с любыми вами вопросами!

Оригинал: “https://dev.to/kylehunter/ten-quick-steps-to-set-up-google-fonts-within-a-gatsby-project-283p”