Добавление пользовательских шрифтов на страницы GitHub

Я только что разместил свой новый сайт на GitHub. Я использую там несколько пользовательских шрифтов, которые я загрузил рядом с файлами index.html и style.css:

введите описание изображения здесь

Код шрифта:

@font-face {
  font-family: "gogoiadeco";
  src: url('gogoia-deco-webfont.eot');
  src: url('gogoia-deco-webfont.eot?#iefix') format('embedded-opentype'),
    url('gogoia-deco-webfont.woff') format('woff'),
    url('gogoia-deco-webfont.ttf') format('truetype'),
    url('gogoia-deco-webfont.svg#Gogoia') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'icomoon';
  src:url('icomoon.eot');
  src:url('icomoon.eot?#iefix') format('embedded-opentype'),
    url('icomoon.woff') format('woff'),
    url('icomoon.ttf') format('truetype'),
    url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'gogoiaregular';
  src: url('gogoia-regular.eot');
  src: url('gogoia-regular.eot?#iefix') format('embedded-opentype'),
    url('gogoia-regular.woff2') format('woff2'),
    url('gogoia-regular.woff') format('woff'),
    url('gogoia-regular.ttf') format('truetype'),
    url('gogoia-regular.svg#gogoiaregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Я новичок в GitHub и понятия не имею, что нужно изменить, чтобы эти шрифты работали.


github html fonts css github-pages
person summerfreeze    schedule 01.03.2016    source источник

Ответы (2)


arrow_upward
8
arrow_downward

У меня тоже была эта проблема. У меня были шрифты, работающие правильно локально, но я не мог правильно понять это на GitHub.

Я понял, как это сделать: кажется, что корень страницы gitHub.io отличается от локального корневого каталога, что приводит к тому, что шрифты находятся в неправильной папке.

Это мой код:

@font-face {
    font-family: F16;
    src: url("../SubSkipper/F16_Panel Font.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

SubSkipper - это имя моего проекта, а шрифт .ttf находится в видимом корневом каталоге, что я имею в виду под этим: «SubSkipper /».

Путь ../ возвращается на один уровень назад, затем открывает корневой каталог (SubSkipper) проекта в том виде, в котором он отображается локально.

person FSocko    schedule 29.06.2016
comment
превосходно! спасибо за это решение, для меня это стало настоящей головной болью! было бы полезно отметить (по крайней мере, из моего опыта), что кажется, что шрифты работают локально с двумя разными путями, что, как я верю, не должно быть так, но, похоже, так. Только один из этих путей является правильным (и, следовательно, работает при размещении) - person Michael Evans; 09.11.2019
comment
Это действительно странно, так как мне нужно было отбросить первый /, чтобы мой CSS заработал. - person mLstudent33; 10.07.2020

arrow_upward
-1
arrow_downward

Файл таблицы стилей находится по адресу https://you.github.io/assets/css/style.css при использовании только уценки в качестве индекса или README.md в качестве индекса. Это Wooden-utensil, использующий тему Cayman, если вы хотите добавить собственный CSS, я думаю, вы можете добавить в этот файл, просто сохраните существующий код, потому что тогда Cayman или другая тема не будет работать. В любом случае, я думаю, просто добавьте

body {
    font-family: etc;
}
person gdfgfgfdfgdsfsgdsgdf    schedule 08.04.2019