Как подключить загруженные на хостинг шрифты к своему сайту?
Добрый день всем.
По образованию я вообще строитель, но вот меня угораздило заняться подключением шрифтов к сайту. И что-то идет не так, не могу понять что. Я расскажу пошагово какие действия cделал, может, кто-нибудь, подскажет в чем проблема у меня.
Есть бесплатный хостинг. Открыл на нем сайт. Сделала папку "fonts", в папку загрузил файл шрифта: pragmatica.ttf
Далее в файле index.html прописал такие строчки:
|
1 |
<style> @font-face { font-family: pragmatica; src: url (/fonts/pragmatica.ttf); } p { font-family: pragmatica; } </style> |
Не работает. Куда двигаться?
Дополнительно:
> Куда двигаться?
https://freelance.habr.com/
подключайте шрифт в формате woff2 и woff
то есть:
|
1 |
@font-face { font-family: "pragmatica"; font-display: swap; src: url("fonts/pragmatica.woff2") format("woff2"), url("fonts/pragmatica.woff") format("woff"); font-weight: 400; } |
- Спасибо. Так заработало. А вы не могли бы пояснить: ttf принципиально не будет работать?
- Александр Джура, по идее можно и ttf
у меня работает и так, и эдак.
просто woff2 обычно меньше занимает по размеру, как бы на сегодняшний день стандарт - https://qna.habr.com/q/880081PHP1@font-face { font-family: "pragmatica"; font-display: swap; src: url("fonts/pragmatica.ttf") format("truetype"); font-weight: 400; } - Сергей Арсентьев, а не знаете, шрифты кэшируются если использовать свои, а не тянуть с гугла?
- Антон Р., да, кешируются, в том и смысл НЕ тянуть их из гугла, а кешировать через правила htaccess, чтобы больше попугаев в pagespeed было.
Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.
Оставить комментарий Отменить
Ответы
- Есть ответ! к записи Как уменьшить масштаб меньше 100% в Windows 10 (22H2)
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Как называется человек, который дизайн придумает для сайта и сверстает его?
- Есть ответ! к записи Можно ли установить Яндекс.Диск на АльтЛинукс?
- Есть ответ! к записи Картинки мутные только на сафари, есть выход?
- Есть ответ! к записи Keenetic. Как настроить SSTP клиент с сертификатом?
- Есть ответ! к записи Чем заменить executor в aiogram 3?
Для подключения загруженных на хостинг шрифтов к вашему сайту, вам необходимо выполнить следующие шаги:
1. Загрузите шрифты на ваш хостинг. Для этого создайте папку на вашем сервере, куда вы загрузите все файлы шрифтов.
2. Определите форматы файлов шрифтов. Обычно шрифты бывают в форматах .woff, .woff2, .ttf, .otf, .eot и .svg. У вас могут быть не все форматы, но рекомендуется иметь как можно больше различных форматов для лучшей совместимости с разными браузерами.
3. Создайте CSS файл, в котором будет указан путь к загруженным шрифтам. Пример:
4. Далее в вашем CSS файле вы можете использовать указанный шрифт, просто указав его название:
5. Подключите созданный CSS файл к вашему HTML документу. Для этого добавьте следующую строку в секцию вашего HTML файла:
6. После этого шрифт будет успешно подключен к вашему сайту и будет отображаться на страницах.
Убедитесь, что указанные пути в CSS файле корректны и указывают на правильные файлы шрифтов на вашем хостинге. Также проверьте совместимость шрифтов с различными браузерами для правильного отображения на всех устройствах.
Для подключения загруженных на хостинг шрифтов к своему сайту, вам необходимо выполнить несколько шагов. Во-первых, убедитесь, что у вас есть файлы шрифтов (обычно это файлы с расширением .woff, .woff2, .eot, .ttf, .otf). Затем загрузите эти файлы на ваш хостинг.
После того как файлы шрифтов загружены на сервер, вам понадобится немного CSS кода, чтобы подключить эти шрифты к вашему сайту. Для этого используйте правило @font-face в вашем CSS файле. Ниже приведен пример кода, демонстрирующий подключение шрифта:
В данном примере мы создаем новый шрифт с именем 'MyCustomFont' и указываем пути к файлам .woff и .woff2 для этого шрифта. Вы также можете добавить другие форматы файлов шрифтов, такие как .eot, .ttf, .otf, для обеспечения совместимости с различными браузерами.
После того как вы определили @font-face правило, вам нужно использовать свой новый шрифт в своем CSS коде. Пример использования:
В этом примере мы устанавливаем шрифт 'MyCustomFont' для всего текста на странице, а если этот шрифт недоступен, то будет использоваться шрифт Arial или любой другой шрифт без засечек (sans-serif).
Не забудьте заменить 'путь_к_файлу.woff' и 'путь_к_файлу.woff2' на реальные пути к вашим файлам шрифтов на хостинге.
Таким образом, вы сможете успешно подключить загруженные на хостинг шрифты к вашему сайту. Надеюсь, данное объяснение поможет вам решить вашу проблему. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать. Буду рад помочь!