Добавить шрифты OTF на веб-страницу

Question

Я пытаюсь создать сайт со страницами GitHub, и я хотел бы включить шрифт OTF. Я не могу заставить его работать правильно, и я не совсем уверен, где я иду не так.

Я провел некоторое исследование и обнаружил, что мне нужно использовать @ font-face, но я не могу понять, как именно это должно работать. В большинстве других решений, которые я обнаружил, я вижу, что люди используют Google для размещения своего шрифта или чего-то подобного, но я бы предпочел, чтобы шрифт размещался на моем сайте на страницах github. До сих пор я скачал шрифт otf и добавил его в репозиторий своих сайтов, и безуспешно пытался следовать некоторым другим руководствам.

На данный момент мой репозиторий для сайта содержит файл шрифта и файл index.html.

Вот мой CSS для шрифта лица:

@font-face {
   font-family: MagnoliaScript;
   src: url("magnolia-script.otf") format("opentype");
}

И здесь я пытаюсь назначить шрифт, который я добавил в заголовок:

<h1 face=MagnoliaScript>text</h1>

Я следил за тем, что мне удалось найти в Интернете, но я, должно быть, что-то упустил, потому что шрифт остался прежним.

Answer 1

Здесь, пожалуйста, попробуйте заменить этот фрагмент

<h1 face=MagnoliaScript>text</h1>

с этим здесь:

<h1 style="font-family:MagnoliaScript;">text</h1>

Надеюсь, это поможет.

Answer 2

Вы просто добавляете еще одно правило @ font-face:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.otf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.otf');
}