i18n(ru): add guides/fonts.mdx

src/content/docs/ru/guides/fonts.mdx

@@ -0,0 +1,136 @@
+---
+title: Использование пользовательских шрифтов
+sidebar:
+  label: Шрифты
+description: >-
+  Хотите добавить несколько пользовательских шрифтов на свой сайт Astro?
+  Используйте Google Fonts с Fontsource или добавьте шрифт по своему выбору.
+i18nReady: true
+---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import { Steps } from '@astrojs/starlight/components'
+
+Это руководство покажет вам, как добавить шрифты в ваш проект и использовать их в собственных компонентах.
+
+:::tip[Экспериментальный Fonts API]
+Узнайте об [экспериментальном Fonts API](/ru/reference/experimental-flags/fonts/) в Astro, который позволяет использовать шрифты из локальных файлов и различных поставщиков шрифтов через унифицированный, полностью настраиваемый и типобезопасный API.
+:::
+
+## Использование локального файла шрифтов
+
+Этот пример продемонстрирует добавление пользовательского шрифта, используя файл шрифтов `DistantGalaxy.woff`.
+
+<Steps>
+1. Добавьте ваш файл шрифтов в `public/fonts/`.
+2. Добавьте следующую директиву `@font-face` в ваш CSS. Это может быть глобальный .css-файл, который вы импортируете, блок `<style is:global>`, либо блок `<style>` в конкретном макете или компоненте, где вы хотите использовать этот шрифт.
+
+    ```css
+    /* Зарегистрируйте ваше семейство шрифтов и сообщите браузеру, где их найти. */
+    @font-face {
+      font-family: 'DistantGalaxy';
+      src: url('/fonts/DistantGalaxy.woff') format('woff');
+      font-weight: normal;
+      font-style: normal;
+      font-display: swap;
+    }
+    ```
+
+3. Используйте значение `font-family` из `@font-face` для стилизации элементов в вашем компоненте или макете. В этом примере к заголовку `<h1>` будет применён пользовательский шрифт, а к параграфу `<p>` нет.
+
+    ```astro title="src/pages/example.astro" {9-11}
+    ---
+    ---
+
+    <h1>В далекой-далекой галактике...</h1>
+
+    <p>Пользовательские шрифты делают мои заголовки гораздо круче!</p>
+
+    <style>
+    h1 {
+      font-family: 'DistantGalaxy', sans-serif;
+    }
+    </style>
+    ```
+</Steps>
+
+## Использование Fontsource
+
+Проект [Fontsource](https://fontsource.org/) упрощает использование Google Fonts и прочих шрифтов с открытым исходным кодом. Он предоставляет модули npm, которые вы можете установить для шрифтов, которые вам необходимы.
+
+<Steps>
+1. Найдите шрифт, который вы собираетесь использовать, в [каталоге Fontsource](https://fontsource.org/). В этом примере будет использоваться [Twinkle Star](https://fontsource.org/fonts/twinkle-star).
+2. Установите пакет для выбранного шрифта.
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm install @fontsource/twinkle-star
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm add @fontsource/twinkle-star
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn add @fontsource/twinkle-star
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+    :::tip
+    Вы можете найти полное название пакета в разделе “Quick Installation” на каждой странице шрифта на сайте Fontsource. Оно начинается на `@fontsource/` или `@fontsource-variable/`, за которым следует название шрифта.
+    :::
+
+3. Импортируйте пакет шрифта в компонент, в котором вы хотите использовать шрифт. Обычно это делается в общем компоненте макета, чтобы шрифт был доступен на всем сайте.
+
+    Импорт автоматически добавит необходимые `@font-face` правила для установки шрифта.
+
+    ```astro title="src/layouts/BaseLayout.astro"
+    ---
+    import '@fontsource/twinkle-star';
+    ---
+    ```
+
+4. Используйте название шрифта, указанное в примере на странице Fontsource, в качестве значения font-family. Это будет работать везде, где вы можете писать CSS в своем проекте Astro.
+
+    ```css
+    h1 {
+      font-family: "Twinkle Star", cursive;
+    }
+    ```
+</Steps>
+
+Для оптимизации времени рендеринга вашего сайта, можно предзагрузить шрифты, которые необходимы для первоначального отображения страницы.
+Дополнительные сведения и рекомендации по использованию см. в [руководстве Fontsource по предварительной загрузке шрифтов](https://fontsource.org/docs/getting-started/preload).
+
+## Регистрация шрифтов в Tailwind
+
+Если вы используете [Tailwind](/ru/guides/styling/#tailwind), вы можете использовать любой из предыдущих методов на этой странице для установки шрифта с некоторыми изменениями. Вы можете либо добавить директиву `@font-face` для шрифта из локального файла, либо использовать [`import` для шрифта из Fontsource](#использование-fontsource) для установки вашего шрифта.
+
+Для регистрации вашего шрифта в Tailwind:
+
+<Steps>
+1. Следуйте любому из приведенных выше руководств, но пропустите последний шаг по добавлению `font-family` в ваш CSS.
+2. Добавьте название шрифта в `src/styles/global.css`.
+
+    В этом примере `Inter` добавляется в стек шрифтов без засечек (sans-serif).
+
+    ```css title="src/styles/global.css" ins={3-5}
+    @import 'tailwindcss';
+
+    @theme {
+      --font-sans: 'Inter', 'sans-serif'; 
+    }
+    ```
+
+    Теперь, весь текст без засечек (по умолчанию в Tailwind) в вашем проекте будет использовать выбранный вами шрифт, а класс `font-sans` также будет применять шрифт Inter.
+</Steps>
+
+Дополнительную информацию см. в [документации Tailwind по добавлению пользовательских семейств шрифтов](https://tailwindcss.com/docs/font-family#using-custom-values).
+
+## Доп. ресурсы
+
+- Изучите как веб-шрифты работают в [руководстве веб-шрифтов от MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts).
+- Сгенерируйте CSS для вашего шрифта с [Webfont Generator от Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator).