Как добавить шрифт в React приложение

Использование link со ссылкой на шрифт

Можно ссылаться на любые шрифты, размещенные в Интернете, используя тег <link> внутри HTML-файла. Давайте рассмотрим пример применения Google шрифтов с помощью тега <link>.

• Перейдите на fonts.google.com
• Выберите понравившийся шрифт и скопируйте его имя

• Вставьте в index.html линк со ссылкой на шрифт. Если ваше приложение создано с помощью create-react-app, вы найдете index.html в папке public.

Например, подключение шрифта Dancing Script будет выглядеть следующим образом.

<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=Dancing+Script&display=swap" rel="stylesheet">

• Настройте css класс с помощью веб-шрифта в таблице стилей, указав font-family: 'Font Name', например, в index.css:

.font-dancing-script {
  font-family: 'Dancing Script';
}

• Примените селектор в любом React компоненте

// App.jsx

import './App.css';

function App() {
  return (
    <div className="font-dancing-script">
      <p>Hello</p>
    </div>
  );
}

export default App;

Использование загруженного шрифта с @font-face

В некоторых ситуациях подключение шрифтов онлайн может быть недоступно или запрещено. Классический пример: пользователи вашего приложения используют интранет и имеют ограниченный доступ к Интернету. В таких случаях шрифты должны быть загружены локально и упакованы в приложение. @font-face — это CSS правило для определения шрифта путем указания шрифта с помощью URL-адреса.

• Создайте папку с именем fonts в src.
• Загрузите необходимые шрифты в папку src\fonts. В этом примере мы загрузили шрифт Dancing Script.

• Затем импортируйте шрифты в файл index.js

// index.js

import './fonts/DancingScript/DancingScript-Bold.ttf';

• В index.css добавьте

@font-face {
  font-family: 'DancingScript';
  src: local('DancingScript'),
    url('./fonts/DancingScript/DancingScript-Bold.ttf') format('truetype');
  font-weight: bold;
}

• Теперь добавьте в файл index.css имя класса, в котором используется этот font family.

.font-dancing-script {
  font-family: "DancingScript";
}

• Используйте это имя класса в своем React компоненте.

// App.jsx

import './App.css';

function App() {
  return (
    <div className="font-dancing-script">
      <p>Hello</p>
    </div>
  );
}

export default App;

В этом видео я расскажу как пройти junior фронтенд собеседование. Впереди будет еще много видео, где я открою секреты поиска первой работы, решения кодинг таск, выбора технологий и т.д. Для многих разработчиков собеседование является сложным процессом, особенно для джуниор разработчиков. Из-за возникающего стресса порой сложно сосредоточиться на решении задач. Но не стоит волноваться. В этом видео я дам советы, как пройти junior фронтенд собеседование. Я прошел множество интервью и собеседовал десятки кандидатов различного уровня, и у меня есть, что рассказать. Подписывайтесь на Boosty и пишите ваши вопросы. Я запишу видео-ответы или статьи, где вы сможете получить быстрый ответ на интересующие именно вас вопросы. Как Пройти Junior Фронтенд Интервью от Веб-разработка - DevMagazine