Шрифт установить на сайт: Как подключить шрифт на сайт в CSS

Содержание

Установка шрифта в систему или WEB сайт

Установка в Windows

Эта ОС в качестве системных шрифтов понимает форматы EOT или TTF. Самый просто способ это выделить нужный фал шрифта, нажать правую кнопку мышки и выбрать подпункт «Установить» или «Установить для всех пользователей». После этого все произойдет автоматически. Несколько секунд инсталляции и вуаля — ваш шрифт уже у вас в системе и доступен для всех программ, которые работают со шрифтами!

Второй метод несколько сложнее, но без него не обойтись, когда нужно добавить большое количество шрифтов. Тем не менее многие его посчитают очень удобным. Открываем в папку C:\Windows\Font и просто копируем туда ваши шрифты. Но не завываем, что можно лишь 2 формата EOT и TTF.

Третий способ немного походит на предыдущий, но возможно для многих он будет более предпочтителен. Открываем «Пуск» и начинаем набирать «шрифты» или «fonts». И первым же пунктом ОС вам подскажет пункт «Параметры шрифта» или нечто похожее как на картинке ниже.

Далее откроется окно в котором вы сможете увидеть все шрифты, которые установлены в вашей операционной системе. Вверху под заголовком этого окна есть область, куда можно перетащить файлы шрифтом после чего они установятся вам в систему. Все… можете пользоваться.

Не стоит забывать, что шрифты, которые вы установили себе в Windows смогут появится в ваших программах только после их перезагрузки. Вообще советуем закрывать Photoshop, Figma, Word и прочие редакторы, которые используют шрифты перед установкой новых.

Установка в MacOS

MacOs как и Windows используют одинаковые форматы шрифтов EOT или TTF. Устанавливаются шрифты все так же просто, но так как это Apple — не обошлось без нюанса. Установить шрифт на компьютер имеет право только Администратор. Но тем не менее являясь администратором или зная пароль сама процедура довольна простая и удобная, как и многое в этой замечательной ОС.

Щелкаем дважды на файле шрифтов, жмем на «Установить» или «Install», ждем пару секунд и готово. Если приложения, в которых вы планировали использовать шрифт были запущены по время установки — их следует перезагрузить.

Установка в Linux

Здесь все тоже не на много сложнее. Форматы те же, что и в других ОС — EOT или TTF. А в самой установке только один нюанс — куда устанавливать. Или глобально для все или для определенного пользователя.

Если глобально, то просто скопировать файлы в директорию /usr/share/fonts. Если для пользователя то в папку .fonts из домашнего каталога конкретного юзера.

В новых версиях данной ОС, в частности Ubuntu, и вовсе все так же просто как и на MacOS. Клацаем на файл шрифта(*.eot или *.ttf) и в программе просмотра выбираем «Установить» или «Install». Готово.

Установка в разные программы (Word, Adobe InDesign, Paint, Photoshop, Figma, Sketch и другие)

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

Установка шрифта на свой веб-сайт

Установка шрифта в свой веб-проект для новичка может оказаться не совсем тривиальной задачей. Но так только на первый взгляд. Достаточно только понять закономерность и правильно прописать пути к файлам в HTML и CSS. Рассмотрим на примере шрифта Arial. После скачивания архива со шрифтом внутри вы получите полный набор самих шрифтовых файлов и, самое главное, CSS файл stylesheet.css в котором уже прописаны все правила, что значительно упростит использование шрифта на своем сайте.

Для начала разархивируем архив и перенесем наш шрифт в удобную для использования папку. Пускай это будет

директория_проекта/fonts/arial/содержимое_нашего_архива.

Далее в самом HTML файле пропишем относительный путь к файлу стилей нашего шрифта. Расположить желательно между <head>…</head>.

<link href="fonts/arial/stylesheet. css" rel="stylesheet" type="text/css" />

Или, как вариант, подключим шрифт через ваш основной файл стилей(допустим он находится в директории «css» вашего проекта). В начале файла:

@import url("../fonts/arial/stylesheet.css"

Какой использовать способ решать вам. Удачи вам в ваших проектах.

Как установить шрифт в Windows, и как внедрить его в файл Word (чтобы на другом ПК он тоже отображался)

Доброго дня.

Не так давно мне в систему пришлось добавить и установить несколько новых шрифтов в Windows (для трафарета). Делается это не сложно, однако я столкнулся с небольшой дилеммой…

Дело в том, что, установив новый шрифт — использовать его сможете только вы (у себя на ПК). Если создать документ Word и отправить его другому пользователю (у кого нет этого нового шрифта) — то он у него отображаться не будет!

Однако, есть выход! Word позволяет внедрить используемый шрифт в «тело» документа, что и решает подобную загвоздку. Отмечу, что при этом размер документа будет несколько больше, но с современным интернетом — думаю, это не проблема…

Собственно, сегодняшняя заметка посвящена работе со шрифтами. Рассмотрю все эти вопросы по порядку ✌…

Содержание статьи

1 Работа со шрифтами
- 1.1 Сайты, где можно найти и загрузить новые шрифты
- 1.2 Установка нового шрифта в Windows
  - 1.2.1 Вариант 1
  - 1.2.2 Вариант 2
- 1.3 Внедрение шрифта в файл-документ (чтобы на другом ПК он открылся в том же виде, как на вашем)
  - 1.3.1 Что делать, если Word не поддерживает внедрение шрифта

Сайты, где можно найти и загрузить новые шрифты

❶

📌 https://www.fonts-online.ru

Сайт с огромным количеством шрифтов, разбитых на различные категории: готические, граффити, машинописные, 3D, праздничные и т.д. (категорий на сайте более нескольких десятков).

Также отметил бы, что большинство шрифтов на сайте, можно сразу же установить в систему (т. к. они идут в формате OTF/TTF, без всяких архивов с просьбой отослать SMS).

Примечание: если вы создадите свой собственный шрифт — вы его можете добавить на сайт (чтобы другие пользователи могли скачать его к себе).

❷

📌 http://allfont.ru/

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

Примечание: на allfont.ru к каждому шрифту есть небольшая инструкция, как установить подобный шрифт на свой сайт/блог/форум в интернете.

❸

📌 https://fontstorage.com/ru/

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

Добавлю также, что сайт выполнен в стиле минимализма, и на нем нет никаких лишних всплывающих окон…

❹

📌 https://www.dafont.com/

Зарубежный сайт с большой библиотекой бесплатных шрифтов. Сразу отмечу, что шрифты здесь запакованы архиватором в формат ZIP (из него сначала нужно извлечь файл формата OTF/TTF, и только потом приступать к его установке. ..).

❺

📌 https://www.1001freefonts.com/

Аналогичный сайт. Здесь можно найти достаточно много новых редких шрифтов (граффити, 3D, тату, модерн и др. не самые слишком распространенные категории).

Установка нового шрифта в Windows

Важно!

Файл шрифта обычно идет в форматах TTF или OTF. Если вы загрузили архив формата ZIP/RAR — то из него предварительно нужно извлечь файлы…

Вариант 1

1) Итак, допустим мы на определенном сайте нашли нужный шрифт — загружаем его.

Загрузка

2) Если у вас Chrome — то в нижней части окна появится уведомление о загрузке файла. В моем случае это файл формата «OTF». Необходимо отрыть его расположение — т.е. нажать правой кнопкой мышки на иконку файла и выбрать «Показать в папке».

Кстати! Открыть список загрузки в большинстве браузеров можно с помощью сочетания Ctrl+J (а оттуда перейти в папку загрузки).

Показать в папке

3) Далее достаточно кликнуть по файлу правой кнопкой мышки и выбрать «Установить».

Установить

4) Теперь, открыв какой-нибудь редактор (например, Word) — вы сможете использовать новый шрифт…

В Word появился новый шрифт!

Вариант 2

1) Нажмите сочетание Win+R (появится окно «Выполнить»), и введите команду fonts.

Fonts

2) Далее должна открыться папка со шрифтами. Теперь просто перенесите мышкой загруженный файл шрифта (OTF, например) в это окно (также, как это вы делаете с обычным файлом, когда переносите его в другую папку, см. пример ниже).

Альтернативный способ открыть папку со шрифтами: перейти в панель управления в раздел «Оформление и персонализация\Шрифты».

Перенос шрифта в папку Fonts

3) Далее Windows приступит к его установке (появится соответствующее окно. ..).

Установка шрифта

Внедрение шрифта в файл-документ (чтобы на другом ПК он открылся в том же виде, как на вашем)

Эта возможность актуальна для современной версии Word (не ниже 2007). Если у вас нет такой опции, либо она работает некорректно — воспользуйтесь альтернативным бесплатным вариантом…

1) Итак, сначала нажимаем по меню «Файл» и переходим в параметры (на скрине ниже показано, как это выглядит в Word 2019).

Файл — параметры

2) Далее нужно открыть вкладку «Сохранение» и поставить 2 галочки:

«Внедрить шрифты в файл»;
«Не внедрять обычные системные шрифты». Пример ниже.

Внедрить шрифты в файл

3) После можно сохранить документ обычным образом.

Сохранить как

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

Размер файла

5) Для проверки отослал файл на Яндекс диск —> шрифт распознается.

..👌

Яндекс диск прочитал шрифт…

Что делать, если Word не поддерживает внедрение шрифта

Есть альтернативный бесплатный офис — LibreOffice. В его арсенале есть полный аналог Word — называется программа Writer.

📌 В помощь!
Libre Office и другие аналоги Word и Excel — https://ocomp.info/chem-zamenit-word-i-excel.html#LibreOffice

Так вот, если зайти в свойства редактора Writer и перейти во вкладку шрифт — вы сможете задать опцию внедрения шрифтов в любые редактируемые документы.

А это позволит другим пользователям (у кого на ПК нет таких шрифтов) — лицезреть ваш документ так, как он выглядит у вас. ✌

Файл — свойства

Шрифт / LibreOffice 6.2

На этом пока все, удачной работы!

👋

Первая публикация: 03.09.2019

Корректировка: 7.08.2022

RSS (как читать Rss)

Полезный софт:

Видео-Монтаж

Ускоритель компьютера

Другие записи:

Как загрузить шрифт с веб-сайта с помощью инструментов разработчика

Скачать инструмент восстановления ПК для быстрого поиска и автоматического исправления ошибок Windows

Браузер Chrome или Edge с использованием инструментов разработчика . И Chrome, и Edge поставляются со встроенными инструментами веб-разработчика и авторинга, которые используются для проверки веб-сайтов непосредственно в браузере. Вы можете сделать много вещей с помощью инструментов разработчика. Например, он позволяет вам идентифицировать шрифты на веб-сайте, выполнять поиск в исходном файле, использовать встроенный бьютификатор, эмулировать датчики и географическое положение и многое другое.

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

В этом посте мы покажем вам, как загрузить шрифт с веб-сайта в Google Chrome. Вы можете использовать те же шаги, чтобы загрузить шрифт веб-сайта в браузере Microsoft Edge. Вот шаги для этого:

Запустите Google Chrome.
Перейдите на веб-сайт, с которого вы хотите загрузить шрифты.
Откройте инструменты разработчика.
Перейдите на вкладку «Сеть».
Щелкните параметр «Шрифт» и выберите шрифт для загрузки.
Загрузите файл шрифта.
Переименуйте загруженный файл с расширением файла шрифта.

Давайте подробно рассмотрим эти шаги!

Во-первых, откройте Google Chrome и перейдите на сайт, откуда вам нужно скачать шрифт. Затем перейдите в трехполосное меню и нажмите кнопку 9. 0004 Дополнительные инструменты > Инструменты разработчика . Кроме того, вы также можете нажать комбинацию клавиш Ctrl + Shift + I , чтобы быстро открыть панель инструментов разработчика.

Теперь в открывшемся разделе Инструменты разработчика нажмите кнопку с двойной стрелкой, а затем выберите и откройте вкладку Сеть в верхней строке меню. После этого перезагрузите сайт, на котором вы находитесь.

Затем щелкните категорию Font , и вы увидите список встроенных шрифтов с соответствующими названиями шрифтов, присутствующих на веб-сайте. Вы можете выбрать шрифт из списка, и вы увидите его предварительный просмотр на специальной панели, как показано на снимке экрана ниже.

Теперь, как определить формат шрифта? Ну так просто наведите мышку на шрифт и увидите расширение файла в конце. Обратитесь к скриншоту ниже.

После этого просто щелкните правой кнопкой мыши шрифт, а затем в контекстном меню выберите параметр Копировать > Копировать ответ .

Затем добавьте новую вкладку в браузере Chrome и вставьте скопированный ответ в адресную строку на вкладке, а затем нажмите кнопку Enter. Когда вы это сделаете, файл будет загружен.

Теперь перейдите в папку «Загрузки», в которую загружен указанный выше файл шрифта. Теперь вам нужно переименовать этот файл с расширением файла шрифта. Для этого сначала перейдите на вкладку View в Проводнике, а затем обязательно включите параметр Расширения имен файлов . Теперь выберите загруженный файл шрифта и нажмите на опцию Rename . Добавьте идентифицированное расширение файла шрифта (например, .woff2 ) и нажмите кнопку Enter.

Вуаля, вот как вы загружаете файл шрифта с веб-сайта.

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

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

СОВЕТ . Существует множество других советов и рекомендаций по средствам разработки Chrome, которые вы можете изучить.

Теперь прочитайте: Используйте инструменты разработчика, чтобы очистить данные сайта для определенного веб-сайта в Chrome или Edge.

Скачать инструмент восстановления ПК для быстрого поиска и автоматического исправления ошибок Windows . Последние 4 года она ведет технические блоги и стремится находить и предлагать решения повседневных технических проблем.
Добавление шрифта — служба поддержки Майкрософт
Word 2013 Больше…Меньше
Один из способов изменить стиль документа — добавить новый текстовый шрифт. Чтобы добавить шрифт в Word, загрузите и установите шрифт в Windows, где он станет доступен для всех приложений Microsoft 365.

Шрифты
поставляются в виде файлов, и в Интернете есть множество сайтов, на которых можно скачать бесплатные шрифты, например DaFont. Вы также можете импортировать файлы шрифтов с компакт-диска, DVD-диска или из сети вашей организации. Шрифты TrueType (расширение файла .ttf) и OpenType (.otf) работают нормально.
Примечание. Перед загрузкой шрифта убедитесь, что вы доверяете его источнику.
Загрузите файлы шрифтов. Они часто поставляются в сжатом виде в папках .zip. В одной папке .zip вы можете найти несколько вариантов одного и того же шрифта, например «легкий» и «тяжелый». Папка .zip обычно выглядит так:

Если файлы шрифтов заархивированы, разархивируйте их, щелкнув правой кнопкой мыши папку . zip и выбрав Экстракт . Теперь вы увидите доступные файлы шрифтов TrueType и OpenType:
.
Щелкните правой кнопкой мыши нужные шрифты и выберите Install .
Если вам будет предложено разрешить программе вносить изменения в ваш компьютер, и если вы доверяете источнику шрифта, нажмите Да
.
Новые шрифты появятся в списке шрифтов Word.
Вот еще два способа установки шрифтов и управления ими:
Все шрифты хранятся в папке C:\Windows\Fonts. Вы также можете добавить шрифты, просто перетащив файлы шрифтов из папки извлеченных файлов в эту папку.