Знакомство с семейством шрифтов Gotham: интеграция CDN и примеры кода

Когда дело доходит до типографики в Интернете, выбор шрифтов играет решающую роль в создании визуально привлекательного и привлекательного пользовательского опыта. Одним из популярных семейств шрифтов, получившим значительную популярность, является Gotham. В этой статье мы рассмотрим различные методы интеграции семейства шрифтов Gotham в веб-проекты с использованием CDN (сети доставки контента), а также приведем примеры кода для демонстрации каждого подхода.

Метод 1: CDN Google Fonts
Google Fonts предоставляет обширную коллекцию веб-шрифтов, включая Gotham. Чтобы использовать семейство шрифтов Gotham из CDN Google Fonts, выполните следующие действия:

  1. Включите следующий тег ссылки в раздел <head>вашего HTML-файла:

    <link href="https://fonts.googleapis.com/css?family=Gotham:400,500,700&display=swap" rel="stylesheet">

  2. Примените шрифт Gotham к нужным элементам вашего CSS-файла:

    body {
font-family: 'Gotham', sans-serif;
}

Метод 2: Adobe Fonts (ранее Typekit)
Adobe Fonts — еще одна популярная платформа, предлагающая высококачественные шрифты, включая Gotham. Чтобы использовать Gotham из Adobe Fonts, выполните следующие действия:

  1. Включите следующий тег сценария в раздел <head>вашего HTML-файла:

    <script src="https://use.typekit.net/your-kit-id.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

  2. Примените шрифт Gotham к нужным элементам вашего CSS-файла:

    body {
font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
}

Метод 3: самостоятельное размещение
Если у вас есть файлы шрифтов Gotham, вы можете самостоятельно разместить их на своем сервере. Выполните следующие действия:

  1. Поместите файлы шрифтов (например, Gotham-Bold.ttf, Gotham-Medium.woff) в каталог шрифтов на вашем сервере.

  2. Объявите шрифт в файле CSS:

    @font-face {
font-family: 'Gotham';
src: url('fonts/Gotham-Bold.ttf') format('truetype'),
   url('fonts/Gotham-Medium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Gotham', sans-serif;
}

Интеграция семейства шрифтов Gotham в ваши веб-проекты может добавить вашему дизайну нотку элегантности и профессионализма. В этой статье мы рассмотрели три метода: использование Google Fonts CDN, Adobe Fonts и самостоятельный хостинг. В зависимости от ваших предпочтений и требований вы можете выбрать наиболее подходящий метод для вашего проекта. Теперь у вас есть знания и примеры кода, чтобы приступить к интеграции шрифтов Gotham в ваши веб-разработки.

Не забудьте оптимизировать производительность своего веб-сайта, принимая во внимание такие факторы, как размер файла шрифта, кеширование и использование CDN. Поэкспериментируйте с разной толщиной и стилями шрифта, чтобы добиться желаемого визуального эффекта. Наслаждайтесь творческими возможностями, которые семейство шрифтов Gotham привносит в ваши проекты веб-дизайна!