Блог

Итак, как следует из названия, я загрузил пользовательский шрифт с именем ‘Star jedi’ (имя файла Starjedi.tff). Он работает на моем локальном компьютере разработчика после того, как я установлю шрифт на свой компьютер, и я могу ссылаться на класс в моей таблице стилей следующим образом :

 .jedifont {
    font-family: "Star jedi",arial;
    font-size: 40px;
    text-shadow: 4px 4px 4px black,10px 10px 10px yellow;
}
  

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

Я также попробовал следующее на своей рабочей машине:

 .jedifont {
    font-family: "Star jedi",arial;
    src: url("https://www.mysitename.co.uk/folder/folder/Starjedi.ttf") format('truetype');
    font-size: 40px;
    text-shadow: 4px 4px 4px black,10px 10px 10px yellow;
}
  

и

 .jedifont {
    font-family: "Star jedi",arial;
    src: url("../fonts/Starjedi.ttf") format('truetype');
    font-size: 40px;
    text-shadow: 4px 4px 4px black,10px 10px 10px yellow;
}
  

а также это в разделе индексной страницы :

 <link rel="stylesheet" href="fonts/Starjedi.tff">
  

Не уверен, что мне не хватает людей, и был бы признателен за любые указания!
Спасибо

Где-то в вашем css вы должны объявить a @font-face перед его использованием, например:

 @font-face {
    font-family: 'My Font';
    src: url('path/to/font.ttf');
    /* src for additional formats, as fallback for incompatible browsers */
    src: url( 'path/to/font.woff' ) format( 'woff' ),
         url( 'path/to/font.eot' ) format( 'embedded-opentype' ),
         url( 'path/to/font.ttf' ) format( 'truetype' ),
         url( 'path/to/font.svg' ) format( 'svg' );
}
  

@font-face Объявление находится там, где src должно быть. Затем вы можете использовать шрифт, например:

 element {
   font-family: 'My Font';
}
  

Рекомендуется использовать несколько форматов для лучшей поддержки в браузерах. А также убедитесь, что путь в url (‘path /to / font’) правильно указывает на исходный файл. Проверьте 404 ошибки в консоли браузера.