Как функционирует FontFace?

Для интеграции нескольких шрифтов из одной гарнитуры (например, Roboto) в ваш веб-редактор с возможностью выбора пользователями, вам нужно следовать нескольким шагам. Я объясню, как правильно это сделать.

### 1. Определите необходимые шрифты

Сначала определите, какие именно стили и веса шрифта вы хотите сделать доступными для пользователей. Например, вам могут понадобиться:
- Roboto Thin (100)
- Roboto Light (300)
- Roboto Regular (400)
- Roboto Medium (500)
- Roboto Bold (700)
- Roboto Black (900)

### 2. Реализация @font-face

Для каждого из выбранных вами стилей и весов добавьте `@font-face` в ваш CSS (или в ваш CSS-поддерживаемый код). Используйте URL для соответствующих файлов шрифтов. Пример для нескольких шрифтов:

```css
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aG4FRHsn8U.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aG8FR1aK8U.woff2) format('woff2');
}

/* Добавьте другие стили аналогичным образом */
```

### 3. Загружайте шрифты с помощью JavaScript

Теперь вы можете использовать `FontFace` API для загрузки шрифтов программно:

```javascript
function loadFontToDocument(fontFamily, fontWeight, src) {
    return new Promise(function(resolve, reject) {
        const font = new FontFace(fontFamily, `url(${src})`, {
            style: 'normal',
            weight: fontWeight
        });
        
        font.load().then(function(loadedFont) {
            document.fonts.add(loadedFont);
            resolve(loadedFont);
        }).catch(function(error) {
            reject(`Font loading error for ${fontFamily} ${fontWeight}: ${error}`);
        });
    });
}

// Пример загрузки шрифтов
Promise.all([
    loadFontToDocument('Roboto', '100', 'https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aG4FRHsn8U.woff2'),
    loadFontToDocument('Roboto', '300', 'https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aG8FR1aK8U.woff2'),
    // добавьте загрузку других шрифтов
]).then(function() {
    console.log('All fonts loaded');
}).catch(function(error) {
    console.error(error);
});
```

### 4. Рендеринг и выбор шрифтов

Создайте пользовательский интерфейс (например, выпадающий список), который позволит пользователю выбирать разные стили шрифтов. При выборе нового стиля изменяйте CSS-стили вашего текстового поля или элемента, где применяются шрифты.

Пример HTML:

```html
<select id="fontSelector">
    <option value="100">Roboto Thin</option>
    <option value="300">Roboto Light</option>
    <option value="400">Roboto Regular</option>
    <option value="500">Roboto Medium</option>
    <option value="700">Roboto Bold</option>
    <option value="900">Roboto Black</option>
</select>

<div id="textSample">Пример текста</div>
```

Добавьте обработчик событий для изменения шрифта:

```javascript
document.getElementById('fontSelector').addEventListener('change', function(event) {
    const selectedWeight = event.target.value;
    document.getElementById('textSample').style.fontFamily = 'Roboto';
    document.getElementById('textSample').style.fontWeight = selectedWeight;
});
```

### Заключение

Следуя этим шагам, вы сможете интегрировать несколько шрифтов из одной гарнитуры в ваш веб-редактор и позволить пользователям выбирать нужный им стиль. Убедитесь, что все необходимые `@font-face` правила определены и загружаются через JavaScript, а также что вы правильно обновляете интерфейс при выборе пользователем нового шрифта.