Подключение шрифтов в ReactJS

Подскажите, пожалуйста, куда лучше добавить шрифты: в src или public? Есть ли в этом какая-то разница? И как их подключить к проекту? Только начал изучение React, пытаюсь создать свое spa и не могу понять как правильно подключать шрифты. Буду благодарен за помощь)

Отслеживать
задан 5 фев 2022 в 7:45
207 3 3 серебряных знака 9 9 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Этот вопрос разбирался здесь:

• кратко ответ на русском React, структура проекта, шрифты
• более подробно на английском https://stackoverflow.com/questions/41676054/how-to-add-fonts-to-create-react-app-based-projects

Отслеживать
ответ дан 21 фев 2022 в 8:40
Anfisa Domashova Anfisa Domashova
26 3 3 бронзовых знака

• javascript
• html
• css
• reactjs
• create-react-app

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как правильно подключить шрифты в ReactJs?

Подскажите, пожалуйста, куда лучше добавить шрифты: в src или public? Есть ли в этом какая-то разница? И как их подключить к проекту? Только начал изучение React, пытаюсь создать свое spa и не могу понять как правильно подключать шрифты. Буду благодарен за помощь)

• Вопрос задан более года назад
• 3270 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 2

Александр @Seasle Куратор тега CSS

Например Вы хотите шрифт Source Sans Pro. Ставите пакет @fontsource/source-sans-pro. В файле main.js или main.ts импортируете его:
import ‘@fontsource/source-sans-pro’;
или, если надо конкретный диапазон unicode-символов:
import ‘@fontsource/source-sans-pro/cyrillic.css’;

Ответ написан более года назад
Комментировать
Нравится Комментировать

profesor08 @profesor08 Куратор тега CSS

Шрифты надо подключать в index.html, который лежит в проекте. А располагать их можешь где угодно, хоть в папке public, хоть просто с cdn подключать. В .jsx, .tsx файлах не надо подключать шрифты, это может привести к мерцанию, при обновлении некоторых компонентов или страницы.

Ответ написан более года назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript

Как вставить инлайновый скрипт на DOM веб страницы при разработке расширения для гугл хром?

• 1 подписчик
• 3 часа назад
• 59 просмотров

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

В HTML шрифт используется для указания начертания шрифта, размера шрифта, типографики текста. Вы можете добавлять шрифты в свое React приложение разными способами. В этой статьей рассмотрим два быстрых способа добавления шрифтов в React приложение.

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

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

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

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

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

.font-dancing-script

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

// App.jsx import './App.css'; function App() < return ( 
Hello
 
 ); > 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

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

// App.jsx import './App.css'; function App() < return ( 
Hello
 
 ); > export default App;
Подробное руководство по микрофронтенд архитектуре

8 месяцев назад · 2 мин. на чтение
Микрофронтенд становится популярной архитектурой, компании растут, появляется необходимость масштабировать команды.
Микрофронтенд - это архитектура, которая позволяет масштабироваться, делать команды независимыми и больше ориентироваться на бизнес потребности. Мы начинаем большую и подробную серию видео о микрофронтенд архитектуре на Boosty с ранним доступом. Некоторые темы будут эксклюзивно доступны только на Boosty по подписке. Мы будем читать и обсуждать книгу “Building Micro-Frontends. Scaling Teams and Projects, Empowering Developers”. Книга не переведена на русский язык. В этих видео мы будем обсуждать самую суть книги, без воды. Также я буду давать свои комментарии, основываясь на своем опыте внедрения микрофронтендов в большом проекте.

Как распилить монолит на микрофронтенды
Архитектуры фронтенд приложений - SPA, Изоморфные, Статичные, JAMstack
Что такое микрофронтенд и каковы его принципы
Что учитывать при переходе на микрофронтенд
Краткий обзор видов разделения на микрофронтенды
Вертикальное разделение на микрофронтенды
Горизонтальное разделение на микрофронтенды
Микрофронтенд на основе Module Federation
Микрофронтенд на основе iframes
Микрофронтенд на основе веб-компонентов
Server Side микрофронтенды
Edge Side микрофронтенды
Проект с Webpack Module Federation
Эволюция проекта с Webpack Module Federation
Как деплоить микрофронтенды
Как версионировать микрофронтенды
CI/CD микрофронтендов
Стратегии деплоя микрофронтендов
Пример автоматизации пайплайна для микрофронтенда
Общение микрофронтендов с бекендом
Пример распиливания монолита на микрофронтенды. О приложении
Пример распиливания монолита на микрофронтенды. Детали реализации
Как презентовать микрофронтенд архитектуру команде

Подключение и настройка create-react-app
Для работы с React вам будет нужна Node.js выше, чем 14.0.0 на вашем компьютере. Подробнее:

Установить node.js
Убедиться в том, что node установлена, для этого в терминале можно пробрать в теминале node -v

Для установки Create React App и создания шаблона выполните команды:
npx create-react-app cv-builder cd cv-builder npm start
Где cv-builder , это название проекта.
Исходный файл index.js будет выглядеть как-то так:
import React from "react"; import ReactDom from "react-dom"; import App from "./App"; ReactDom.render(  , document.getElementById("app") );
Зачем нужен React.StrictMode
StrictMode — нужен для обнаружения потенциальных проблем в приложении еще на этапе разработки приложения.

Обнаружении небезопасных методов жизненного цикла
Предупреждении об использовании устаревшего API строковых реф
Предупреждении об использовании устаревшего метода findDOMNode
Обнаружении неожиданных побочных эффектов
Обнаружении устаревшего API контекста

Простыми словами - консоль будет красной даже при малейшей ошибке.
Установка uimini:
Для того чтобы установить uimini потребуется написать:
npm install uimini // or: yarn add uimini
Далее, в корневом файле index.js подключить uimini:
import React from "react"; import ReactDom from "react-dom"; // init main app import App from "./App"; // init uimini import "uimini"; // . 
Установка и подключение scss create-react-app:
Чтобы установить scss / sass в create-react-app необходимо лишь установить пакет node-sass :
npm install node-sass --save-dev // или: yarn add node-sass --save-dev
После чего перезапустить сервер!
После этого scss нужно подключать в любые js , jsx файлы по типу:
import "./assets/scss/main.scss";
Примеры компонентов на реакте:
Главный файл app.js с применением uimini будет выглядеть вот-так:
const App = () => ( 
  
 
 
Hello world!
 
 
 
 
 );
Такой подход позволит "прилепить" футер к низу, а хедер оставить вверху.

components/Header/Header.jsx
components/Footer/Footer.jsx

Являются простыми, поэтому описывать их здесь я пока не вижу смысла, а вот главный файл components/index.js будет выглядеть как-то так:
// components: export from "./Header"; export from "./Footer";
Подключение шрифта в create-react-app
Самый простой, но самый не эффективный способ это cdn от гугла.
Название шрифта, который решил использовать я - Inconsolata . Для подключение шрифта в файл public/index.html нужно добавить:
А в файл scss/main.scss добавить:
.ui-body, .ui-html
Более эффективный способ был бы скачать шрифт и подключить в проект локально, без cdn.
Исходники:

Полный плейлист этого курса доступен на ютубе
Код из текущего видео можно скачать кликнув тут
Исходный код и весь проект вы можете скачать на гитахбе буду рад вашей звездочке ✨



Похожие публикации:

App service что это
Tkinter как скрыть окно
Как авторизовать приложение в discord
Как узнать имя компьютера windows 10