Типография GatbysJS - AvenirNext - Не работает в Windows / Linux

Question

Я кодирую целевую страницу, используя GatsbyJS . И я хочу использовать шрифт AvenirNext на моем сайте. Поэтому я последовал руководству по использованию типографии.

Мой typography.js файл выглядит так:

import Typography from 'typography';

const typography = new Typography({
    baseFontSize: '14px',
    headerFontFamily: [
        'AvenirNextCondensed-Medium',
        'AvenirNextCondensed-Bold',
        'AvenirNextCondensed-Heavy',
    ],
    bodyFontFamily: [
        'AvenirNextCondensed-Medium',
        'AvenirNextCondensed-Bold',
        'AvenirNextCondensed-Heavy',
    ],
});

export default typography;

И я загружаю его в gatsby-config.js , например:

module.exports = {
    siteMetadata: {
        title: 'New Landing Page',
    },
     plugins: [
        {
            resolve: `gatsby-plugin-typography`,
            options: {
                pathToConfigModule: `src/utils/typography`,
            },
        },
        `gatsby-plugin-sass`,
        `gatsby-plugin-react-helmet`,
    ],
};

Я подумал, что этого было бы достаточно, чтобы сделать шрифт доступным для всей системы, но он доступен только на Mac, поскольку это «родной» шрифт системы. Как я могу сделать их доступными для всех?

(Извините за скучный вопрос, но я не могу найти здесь никакого вспомогательного ответа)

Answer 1

Avenir - это коммерчески лицензированный шрифт. Он доступен только для веб-пользователей, если он установлен в их системе или вы предоставляете посетителю веб-шрифт.

Вы можете получить лицензированный веб-шрифт для своих пользователей, например, зарегистрировав сервис Adobe Fonts (который раньше назывался Typekit и является платным сервисом, включенным в Creative Cloud, если вы уже есть).

Затем вы копируете один из их фрагментов кода из их службы в приложение React (или в файл CSS, используя параметр @import). Обратите внимание, что вы должны позаботиться о том, чтобы код загрузки шрифтов был как можно выше в стеке, чтобы обеспечить быструю загрузку шрифтов.