Установить шрифт Google для проекта
В этой статье мы поговорим о том, как установить пользовательский шрифт в проект.
Причина написания этой статьи в том, что некоторые шрифты доступны в Windows, но не в Mac.
Исходный код:
https://www.udemy.com/course/a-complete-css-course/?referralCode=D70F3923FF6501A398AA
Во время создания этого руководства вы можете обнаружить, что семейство шрифтов Yu Gothic недоступно на Mac. Чтобы продемонстрировать вес шрифта в Mac, нам нужно установить собственный шрифт.
Сначала нам нужно зайти в google font, затем ищем Gothic. Мы выбираем Gothic A1, так как есть 9 стилей, которые означают разную толщину шрифта.
Мы выбираем все стили, при этом вы можете видеть, что есть тег ‹link›, который можно скопировать и подготовить к вставке на наш проект.
Внутри вашей html-страницы вы можете ввести несколько абзацев, чтобы отобразить текст.
<p class="normal">Normal</p> <p class="light">Light</p> <p class="thick">Bold</p>
Затем поместите тег ‹ссылка› вверху страницы.
<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=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
Добавьте правила CSS в ‹body›
body{
font-family: 'Gothic A1', sans-serif;
font-size: 50px;
}
Вы должны увидеть разницу между использованием «Gothic A1» и не использованием.
Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram.
