Как использовать загруженный шрифт в css
Здесь очень начальный уровень.
У меня есть файл шрифта .ttf, который я хотел бы использовать для своего блога, но я не уверен, как / где я могу получить его код (?). Это правильно?
* {
font-family: 'providence-bold';
src: url('/font/providence-bold.regular.ttf');
}
не стесняйтесь протыкать это, как я уже сказал, я плохо понимаю, что делаю.
Обновлено: вот ссылка на шрифт, который я пытаюсь использовать, если это помогает https://ufonts.com/download/providence-bold.html
Я понятия не имею, что означает «относительный или абсолютный» :-( Моя первоначальная проблема заключалась в том, что я не знал, как / где получить URL-адрес шрифта, который я пытаюсь использовать.
Где ваши файлы css и шрифтов ?? Они внутри корня или отдельной папки?
Ответы 4
Я бы посоветовал, и лучший способ включить шрифты - это преобразовать их в эти форматы.
Вы можете получить код отсюда после преобразования ваших шрифтов в нужные вам форматы -> ссылка
После того, как вы конвертируете свои шрифты, он создаст файл rar, распакуйте его, вы найдете font.css, где вы можете найти эти коды. 
@font-face {
font-family: 'providence-bold';
src: url('../fonts/providence-bold.eot');
src: url('../fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/providence-bold.woff') format('woff'),
url('../fonts/providence-bold.ttf') format('truetype'),
url('../fonts/providence-bold.svg#providence-bold') format('svg');
font-weight: normal;
font-style: normal;
}Обязательно проверьте URL-адрес расположения шрифтов.
вау .. это так глубоко! Большое спасибо за эти шаги. Я пошел дальше, чтобы добавить код css в "тему" моего блога ... но, похоже, для форматирования сайтов нужен другой тип hmtl. Я пробовал следовать этому (academyoftumblr.tumblr.com/post/31791227786/…) довольно устаревшему руководству, чтобы получить правильный результат, но я немного запутался. Вы знакомы с подобными css?
Может это вам поможет kotrynabassdesign.com/how-to-upload-and-use-custom-font-blog ger :)
к сожалению, шрифт, который я пытаюсь использовать, недоступен через шрифты Google: (из-за этого получить URL-адрес довольно сложно. (позвольте мне повторить, этот жесткий для меня язык!) Помогло бы, если бы я показал фрагменты "кода темы" "?
Да, добавьте сюда свой фрагмент, мы поможем вам решить проблему
Хорошо, так что система пользовательского кодирования сайтов немного запутана. Вот соответствующие области (довольно длинного) кода, в которых я мог испортить:
<head> @ font-face {семейство шрифтов: 'провидение-жирный'; src: url ('../ fonts / providence-bold.eot'); src: url ('../ fonts / providence-bold.eot? #iefix') формат ('embedded-opentype'), url ('../ fonts / providence-bold.woff') формат ('woff') , url ('../ fonts / providence-bold.ttf') формат ('truetype'), url ('../ fonts / providence-bold.svg # providence-bold') формат ('svg'); шрифт: нормальный; стиль шрифта: нормальный; }
Итак, извините за плохое форматирование комментариев. в основном, любые аспекты кода, которые будут редактировать внешний вид блогов, должны находиться в <head> с отдельным разделом для настраиваемых ccs. в основном, правильна ли кодировка, которая у меня под <head>? Я не уверен, что вводить для пользовательского CSS
Вот как выглядит моя страница с текущей кодировкой: imgur.com/a/T2rTxTM. остальная часть моего блога отображается нормально, сообщения + ссылки на все, но блок кодирования шрифтов отображается вверху.
Вы не можете устанавливать файлы шрифтов на свой tumblr. Вы можете добавить их, только если они откуда-то подаются (например, googlefonts). src:url('../fonts') ищет файл, связанный с вашим URL-адресом в tumblr, такой папки не существует, и вы не можете ее создать.
Вам нужно добавить ссылку на шрифт с предоставленного здесь URL:
https://ufonts.com/download/providence-bold.html
если вы добавите их как этот ../providence-bold.html, они будут относиться к вашему html-документу. Так что на вашем сервере должен быть установлен http://yourname.tumblr.com или что-то еще.
Если вы измените URL-адреса, чтобы они указывали на ресурс в ufonts, он должен работать.
Так
@font-face {
font-family: 'providence-bold';
src: url('https://ufonts.com/fonts/providence-bold.eot');
src: url('https://ufonts.com/fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
url('https://ufonts.com/fonts/providence-bold.woff') format('woff'),
url('https://ufonts.com/fonts/providence-bold.ttf') format('truetype'),
url('https://ufonts.com/fonts/providence-bold.svg#providence-bold') format('svg');
font-weight: normal;
font-style: normal;
}
Однако эти ресурсы должны существовать по URL-адресу ufonts. Если это просто место для загрузки файла ttf, это не сработает. Их нужно откуда-то обслуживать, и tumblr не позволит вам загружать файлы шрифтов на их серверы.
@font-face {
font-family: 'providence-bold';
src: url('/font/providence-bold.regular.ttf');
}
Это тот формат, который я использую. Просто убедитесь, что ваш путь правильный.
Примечание: Мне не нравится использовать в переменных символы подчеркивания (_) и дефисы (-). Рекомендуется выработать привычку записывать переменные в виде camelCase или PascalCase.
Прежде всего, вам нужно получить шрифты в правильном формате. Вы можете скачать их в необходимом формате .ttf с таких сайтов, как https://fontsly.com/gothic/celtic, или воспользоваться некоторыми конвертерами.
* { font-family: 'providence-bold'; src: url(<URL_OF_FONT>); }, где URL шрифта может быть относительным или абсолютным.