Каким образом можно изменить шрифт с помощью CSS?

Question

Рамиль

css , html

Каким образом можно изменить шрифт с помощью CSS?

Как можно изменить шрифт на веб-странице? Пытался использовать шрифт Lobster, и другие. Хотя в коде элемента в браузере все написано правильно, но отображается другой результат.

```css
body {
  background-color: black;
}

header {
  color: white;
}

@font-face {
  font-family: 'Rubik Doodle Shadow', system-ui;
  src: url(fonts/RubikDoodleShadow-Regular.woff2) format('woff2');
}

h1 {
  font-family: 'Rubik Doodle Shadow', system-ui;
  font-style: regular;
}
```

9 января 2024 г. 11:08

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для того чтобы изменить шрифт с помощью CSS, вы должны сначала удостовериться, что вы правильно подключили шрифт к вашему веб-сайту, и только затем использовать его в CSS-правилах. Давайте рассмотрим каждый шаг по очереди.

1. Подключение шрифта:
Если вы используете веб-шрифт, такой как Google Fonts (например, шрифт "Lobster"), вы можете добавить его с помощью тега `<link>` в вашем HTML-файле или с помощью правила `@import` в CSS-файле. Например:

С использованием тега `<link>` в HTML:
```html
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
```

Или с использованием `@import` в CSS:
```css
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
```

2. Применение шрифта:
После подключения шрифта вы должны применить его к элементам на вашей странице, используя правило `font-family` в CSS:

```css
h1 {
  font-family: 'Lobster', cursive; /* Убедитесь, что используете правильное имя шрифта */
}
```

3. Проблема с вашим текущим CSS:
В приведенном вами коде есть определение `@font-face`, но, кажется, вы пытаетесь использовать два разных шрифта одновременно (`Rubik Doodle Shadow` и `Lobster`). Удостоверьтесь, что `Rubik Doodle Shadow` фактически существует в вашем каталоге fonts и что путь к файлу указан правильно. 

Ошибки в CSS:
- `font-family`: Имя шрифта указывается в кавычках без добавления `system-ui`, если это название кастомного шрифта, который вы загружаете. `system-ui` используется как fallback-шрифт. То есть должно быть так:
    
    ```css
    font-family: 'Rubik Doodle Shadow', sans-serif;
    ```
    
- `font-style`: Значение `regular` не существует. Если у вас обычный стиль шрифта, то правильное значение — `normal`:
  
    ```css
    h1 {
      font-style: normal;
    }
    ```

4. Устранение проблем с путями:
Убедитесь, что путь к файлу шрифта указан правильно. Если ваш CSS-файл находится в папке `css`, а шрифты в папке `fonts`, и обе папки находятся на одном уровне, то путь должен быть верным. Но если структура папок отличается, вам нужно скорректировать путь.

Попробуйте перепроверить и исправить эти моменты, и если путь к шрифту верен, и он правильно загружен, шрифт 'Rubik Doodle Shadow' должен отображаться на вашей веб-странице. Если же вы хотите использовать 'Lobster', не забудьте правильно подключить его, как показано выше.

Answer 2

Rsa97 а почему так? Все сработало, но во всех туториалах говорят что после шрифта идёт запасной.