Попытка использовать встроенный шрифт css не работает

Question

Я загрузил шрифт и добавил его в текстовый редактор Atom, но похоже, что он не работает ...

<style type="text/css">
  @font-face {
    font-family: "avocado";
    src: url("AvocadoCreamy.ttf");
    src: url("AvocadoCreamy.otf");
  }

  h1 {
    color: hsl(93, 100%, 51%);
    text-align: center;
    font-family: "avocado";
  }
</style>

Answer 1

Предположим, вы скопировали файл шрифта в папку root (где обычно находится ваш файл index. html). Вместо '.ttf' или '.otf', '.woff' или '.woff2' лучше всего подходят для веб-шрифтов, поэтому подумайте об использовании этого, если таковой имеется. Также убедитесь, что используемое имя i 'sr c' в точности совпадает с именем файла в вашей папке root. см. https://css-tricks.com/snippets/css/using-font-face/ также Как включить шрифт .ttf с помощью CSS?

@font-face {
font-family: "avocado";
src: url("AvocadoCreamy.ttf") format("truetype");
font-style: normal;
font-weight: 400;

}

Answer 2

В вашем случае при использовании тега @font-face, возможно, адрес предоставленного URL неправильный или неполный. Попробуйте ввести полный адрес, если файл шрифта загружен локально.

Файл шрифта можно напрямую записать в URL, если он существует в том же каталоге, что и файл CSS.

Кроме того, я бы рекомендовал использовать тег @import для импорта шрифтов в CSS.

@import url('/*YOUR URL TO FONT HERE*/');