Свой шрифт


Содержание

Как создать собственный рукописный шрифт

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

Оказывается, что очень просто. Для этого понадобиться программа High-Logic FontCreator и немного усидчивости и терпения.

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

Некоторые полезные сведения

Итак, устанавливаем и запускаем программу. Далее в главном меню выбираем File -> Open -> Font File и открываем любой кириллический шрифт, заранее скопированный в удобную вам папку. FontCreator проанализирует и выведет его содержимое во внутреннем окне, каждая ячейка которого будет содержать определённый символ.

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

Захватывая мышкой маркеры, можно изменять размер шрифта, его высоты и ширину, угол наклона, а также форму самих контуров.

Что касается направляющих. В FontCreator их семь: WinDescent, BaseLine, x-Height, CapHeight, WinAscent и ещё две вертикальных без имени.

BaseLine — опорная линия привязки, на которой «стоит» шрифт.
CapHeight — определяет высоту заглавных букв.
X-Height — определяет высоту строчных букв. Исключение составляют строчные буквы рукописных шрифтов, имеющие вверху «хвостик» . Высота таких символов определяется линией CapHeight.
• Линии WinDescent и WinAscent служат для ограничения символов, имеющих дополнительные элементы, например, чёрточку в «И» кратком или хвостик в «Щ» или «р».
• Безымянные вертикальные линии определяют ширину символа. Для каждого символа она своя.

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

Создание собственного рукописного шрифта

Возьмите обычный лист белой бумаги формата А4 и напишите на нём в ряд все буквы (строчные и заглавные), а также все символы, которые вы предполагаете использовать при печати. Писать лучше всего чёрной гелевой ручкой, чтобы символы на листе были чёткими и хорошо выделялись. Далее сканируем лист в изображение формата JPEG или PNG. Если у вас есть устройство с поддержкой рукописного ввода стилусом, используйте его.

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

Выделяем символ на изображении и копируем участок в буфер обмена. Далее идём в FontCreator, находим тот же символ в таблице ячеек, двойным кликом открываем его в редакторе, выделяем и жмём кнопку Dеlete , а на его место вставляем наш выделенный участок изображения (в меню Edit -> Paste) .

Программа распознает картинку и преобразует её в доступный для редактирования контур. Теперь осталось выполнить масштабирование контура таким образом, чтобы его верхушка совпала с линией x-Height, если это строчная буква и с CapHeight, если это буква заглавная. Привязка к линии BaseLine производится автоматически. «Хвостики» букв «р», «у», «в», «б» привязываем к WinDescent или WinAscent соответственно.

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

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

Использованная в примере программа High-Logic FontCreator является лучшим инструментом для создания и редактирования шрифтов. К сожалению, она платная и при работе в пробном режиме не позволяет экспортировать проекты в готовые для установки форматы шрифтов. Но кто ищет, тот всегда находит. Полагаем, найти в интернете пусть и не самую свежую, но вполне рабочую версию для вас не составит особого труда.

Подключение шрифтов в CSS

Чтобы использовать на сайте какой-либо нестандартный шрифт (которого может не оказаться на компьютере пользователя), его необходимо подключить. Как это сделать?

Коллекция Google Fonts

Проще всего использовать сервис Google Fonts. Там достаточно выбрать подходящий шрифт из богатой коллекции, кастомизировать его (подобрать нужные начертания и языки) и получить готовую ссылочку. Выглядеть она будет примерно так:

в зависимости от способа подключения (в HTML или в CSS).

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

Мы видим много-много строк текста, разбитых на сегменты. Да, примерно так шрифты к веб-страницам и подключаются.

Самостоятельное подключение

Не все шрифты можно найти на Google Fonts, плюс иногда хочется, чтобы подгрузка ресурсов не зависела от стороннего сервиса, пусть даже такого надежного, как Google. Ну и в конце концов, верстальщик должен уметь подключать шрифты ��

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

Не будем вдаваться в подробности, какой браузер какой формат желает видеть, это тема для отдельной статьи. Просто примем как факт то, что для нормальной работы нам нужен и .eot и .woff и даже таинственный .ttf .


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

Настройки шрифта

Каждое правило будет выглядеть примерно так:

Как создать шрифт онлайн

Уникальные интересный шрифт может быть самостоятельным элементом дизайна, вы можете с помощью креативного шрифта создать свой неповторимый логотип. Из этой статьи вы узнаете как создать свой собственный шрифт онлайн в специальных бесплатных сервисах. К сожалению, большинство из этих сервисов англоязычные, и не поддерживают кириллицу. Я нашла лишь два генератора с русским интерфейсом, но они помогают лишь создавать надписи с креативными шрифтами (перейдите к описанию сервисов).

Генераторы шрифтов онлайн

  1. Metaflop – здесь можно создать шрифт, лишь передвигая ползунки возле изменяя параметры, отвечающие за внешний вид каждой буквы.
    “Анатомию” буквы вы можете посмотреть, активировав соответствующий пункт в левой графе генератора.
Илон Маск рекомендует:  Представление в internet содержимого каталога средствами asp

Создаем собственный шрифт из иконок для сайта. Пошаговая детальная инструкция

В этой статье-уроке я расскажу вам как создать свой собственный шрифт для веб-сайта, используя собственноручно созданные иконки. Все, что нам для этого понадобится – программа для создания векторной графики(Adobe Illustrator или Inkspcape) и доступ в интернет!Итак, приступим! Все использованные изображения, иконки и css шрифт этого вы сможете скачать в конце статьи.

Подготовка векторных иконок

Для этого урока мы сделаем что-то простое. Для первой иконки мы нарисуем обычную звездочку. Для второй иконки – орла с буквой W внутри. Нарисовать это достаточно легко и вы можете создать любые формы и комбинации. Я использовал иллюстратор для этих целей.

После того, как вы закончили творческую часть – ваше творение необходимо сохранить в SVG формате. Жмем “Сохранить Как” и выбираем тип файла как SVG. Теперь можно переходить непосредственно к созданию шрифта.

Создание собственно шрифта

Для этих целей мы используем популярный и бесплатный сервис IcoMoon.

Первое, что нужно сделать – создать новый проект, поэтому кликаем на меню в левом верхнем углу и нажимаем “New Project”. Далее подгружаем наши готовые svg файлы после нажатия на кнопку “Import Icons”. Проделав эти шаги вы должны видеть у себя на мониторе изображение такого рода:

Далее выделяем курсором наши иконки (они будут обведены оранжевой рамкой при выборе) и жмем кнопку “Font >” внизу экрана.

Теперь у нас есть возможность изменения кода для каждой иконки (в нашем случаем это будет e600 и e601), названия нашего шрифта, префикса для CSS и так далее. Все это осуществляется в “Preferences”. Также, мы можем посмотреть шрифт в действии, нажам на ссылку “Enable Quick Usage” – что позволит получить временную ссылку на наш шрифт, а также опцию просмотра кода в CodePen.

После того, как вы все настроили – нажимаем кнопку “Download” внизу страницы и скачиваем архив. В этом архивы вы найдете ваш шрифт в форматах ttf, eot, svg и woff + демо-страничку со шрифтом.

Использование иконок на сайте

Теперь, все что нам нужно – это подключить шрифт CSS при помощи @font-face, и указать другие параметры (они все прописаны в css-файле в архиве, который вы скачали.

Теперь мы можем использовать наш шрифт в HTML коде следующим образом:

Указав название класса для тэга мы получаем нашу иконку.

Вот и все! Теперь вы можете создавать любые шрифты из ваших иконок для различных проектов.

Программы для создания шрифтов

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

X-Fonter

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

Также в X-Fonter присутствует инструмент для создания простых компактных баннеров.

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


Кроме описанного выше стандартного метода создания символов, в Type присутствует возможность вручную программировать их при помощи командного окна.

Scanahand

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

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

FontCreator

FontCreator – программа, разработанная компанией High-Logic. Она, как и Scanahand, предоставляет возможность создания собственных уникальных шрифтов. Однако, в отличие от предыдущего решения, FontCreator не нуждается в применении дополнительного оборудования вроде сканера и принтера.

В целом, данная программа похожа по своему функционалу на Type, ведь в ней используются примерно такой же набор инструментов.

FontForge

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

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

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

Отблагодарите автора, поделитесь статьей в социальных сетях.

КАК СОЗДАТЬ СВОЙ ШРИФТ: САМАЯ БАЗОВАЯ ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ

Мне кажется у многих из тех, кто увлечен рисованием буковок и создания леттеринга, в какой-то момент возникает мысль: а не превратить ли всю эту красоту в шрифт? Чтобы можно было не только любоваться на конкретную композицию, но печатать эти прекрасные буковки на настоящей клавиатуре и создавать еще больше красоты. Ну по крайней мере так было у меня :) Когда я осознала, что шрифт можно создать самостоятельно, у меня случился буквально переворот сознания (наверное, это именно то, что в английском называется «aha-moment»).

И я начала пытаться понять, как же это сделать. Информации было мало, а та, что была, была непонятная и сложная. Я заблудилась в этом дремучем лесу терминов и чуть было не забросила затею научиться создавать шрифты. Но каким-то чудом не сдалась, продолжила пытаться и сделала свой первый шрифт Bronks — далекий от идеала, но очень ценный в плане опыта. Про то, как создавался Бронкс я, кстати, уже писала отдельную заметкy . А сегодня хочу рассказать более подробно про процесс создания шрифта в целом, чтобы вам было проще понять, «ваше» ли это занятие и интересно ли вам будет пробовать.

ШРИФТ НАЧИНАЕТСЯ С БРИФА

Театр начинается с вешалки, а создание хорошего шрифта — с определения цели и создания брифа/мудборда. Это этап, который пропустят 99% новичков (и на который я сама начала обращать внимание, каюсь, не так давно). И в принципе ничего супер-страшного не произойдет, ну разве только что будут все шансы потратить на шрифт кучу времени и не получить финансовой отдачи, просто потому что рынку конкретно такой шрифт в таком стиле, с таким набором глифов оказался не очень интересен. Включать в процесс бриф с самого начала, думаю, могут осилить только те, у кого есть хороший бэкграунд в дизайне/иллюстрации и кто в целом понимает, как исследовать потребности аудитории. Если навыки есть, хотя бы минимальные, то решив изначально, для кого главным образом предназначен шрифт — для брутальных бизнесменов, открывающих магазин крафт-пива, там или хрупких девушек-фотографов, которые хотят красиво писать имена клиентов на дисках, вы сильно упростите себе задачу.

Что я подразумеваю под брифом и мудбордом? Это некая информация о том, для кого шрифт презназначен, какими будут его главные характеристики, что с ним будет конечный покупатель делать. Так как информация для внутреннего пользования она может быть в любом виде — хоть в папке на компьютере в виде картинок, хоть в виде мудборда (набора вдохновляющих картинок) на Пинтересте, хоть на бумажке в виде списка.

Я сейчас стараюсь собрать себе мудборд, который бы отображал настроение — там далеко не обязательно будут шрифты (скорее не будет, тк не очень хочется нечаянно что-то скопировать), скорее будут цвета, объекты, потенциальное применение, в общем, картинки, создающие настроение. Еще могу написать 3-5 прилагательных, описывающих шрифт, и представить себе некий визуальный ориентир — кто и зачем использует шрифт? Если я представлю шрифт, скажем, на упаковке с чипсами, это не значит, что его не купит кто-то для рекламного плаката о вреде курения, но это значит, что он будет смотреться круто хотя бы на чипсах, что уже поможет :)

Илон Маск рекомендует:  Что такое код moveto

ОТРИСОВКА ГЛИФОВ — ДЕЛО ДНЯ :)

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

Насколько широко я отрисовываю шрифт — то есть сколько создаю глифов — зависит прямым образом от целевой аудитории. Понятно, что чем больше глифов — тем ценнее шрифт, но при этом есть глифы, на которые тратить время стоит, а есть — на которые не очень (например, если вы создаете стандартный хенддроун шрифт для условных малых бизнеов, широкая языковая поддержка будет куда актуальнее, чем все-все-все математические знаки, многие из которых я, честно говоря, увидела впервые в программе Glyphs :)). Подробно о том, какие глифы отрисовывать стоит обязательно, а какие — дополнительно и в каком количестве, я буду рассказывать в воркшопе про создание шрифта, над которым я усердно работаю (про него в конце заметки :)).

Коротко могу сказать, что первый шрифт я бы советовала делать простым и лаконичным, иначе, если будете сразу пытаться сделать и начальные, и конечные варианты букв, и кириллицу добавить к латинице, то вы просто не доделаете шрифт (а если доделаете, вряд ли это окупится, тк в шрифтоделании без ошибок не обойтись, умение видеть маленькие помарки и детали, которые влияют на качество шрифта, появляется только с практикой). Поэтому вначале лучше всего обойтись стандартным набором A-Z, a-z, 0-9, основные знаки препинания.

Почему я выделяю для отрисовки шрифта полдня-день? Потому что когда «ловишь волну», то есть нащупываешь некий стиль, атмосферу шрифта, то лучше отрисовать все в один заход, пока рука разработана. Это, наверное, касается больше рукописных шрифтов (другие делать пока не пробовала). Если отложить и попробовать нарисовать оставшуюся часть букв потом, они гарантированно будут отличаться, и уйдет время на то, чтобы снова «настроить руку» и начать попадать в общий стиль.

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

ЦИФРОВАЯ ЧАСТЬ ПРОЦЕССА

Когда шрифт нарисован, настает пора его оцифровывать. Моя цепочка обработки выглядит так: сканер — фотошоп — иллюстратор. В сканере выставляю максимальные настройки, в фотошопе делаю выше контраст и чуток чищу контуры, в иллюстраторе делаю трейс, нахожу алфавит (то есть расставляю буковки в последовательности, пробую «собрать» несколько слов, чтобы проверить, как все выглядит) и чищу-чищу-чищу буковки.

Про этап чистки — раньше мне казалось, что «а зачем чистить, это же рукописный шрифт». Но позже вскрылась вот какая деталь: чем больше точек в векторе, тем больше вероятность того, что шрифт будет всячески глючить — от отказа Glyphs (или иной программы, в которой шрифт будет собираться) экспортировать файл, до невозможности конечных пользователей юзать его без ошибок. Поэтому минимум точек — залог комфорта, и да, чистить-таки надо, даже шрифты с текстурой.

Чищу буковки в иллюстраторе я несколькими способами: во-первых, волшебным ластиком от Astute Graphics (часть платного плагина , про который я писала тут ), к сожалению бесплатной альтернативы хотя бы приближенного качества я не знаю, во-вторых, стандартным иллюстраторским карандашом — выделяю контур и делаю его аккуратнее.

После этого я готовлю шрифт к экспорту — это отдельная большая история, про которую в шрифтовом воркшопе будет, скорее всего, аж несколько видео, — и переношу буковки в Glyphs.


ХОРОШАЯ ШРИФТОВАЯ ПРОГРАММА — ЭТО ВАЖНО

Собирать шрифт, то есть превращать буковки векторные в функционирующие, такие, которые можно набить на клавиатуре, в теории можно в разных программах. Если погуглить — вы найдете внушительные списки вариантов на любой вкус и кошелек. Не привожу названий здесь, потому что не готова рекомендовать то, чего не знаю/никогда не пробовала. Я работаю в прграмме Glyphs и знаю только, что все серьезные шрифтовые дизайнеры (те, которые продают шрифты) делают их или в Glyphs, или в Fontlab. Скорее всего это связано с тем, что более дешевые/бесплатные программы не дают всех тех опций, которые нужны для создания интересных шрифтовых историй.

Я в свое время выбрала Glyphs потому что хотелось, с одной стороны, сразу привыкать к «правильной» шрифтовой программе (то есть той, которую можно использовать для создания действительно продуманных, сложных, насыщенных элементами шрифтов, а не тыкаться месяц в какой-нибудь бесплатной только чтобы потом выяснить, что там нельзя создавать условные лигатуры), с другой стороны, я не была готова платить в несколько раз дороже за Fontlab. Судя по всему выбор был правильный — знаю людей, которые перешли с Фонтлаба на Глифс и говорят, что у последнего интерфейс понятнее :)

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

После экспорта в Глифс я настраиваю много разных штук: буквенные группы, спейсинг (негативное пространство слева и справа от букв, если грубо), кернинг (расстояния между конкретными парами букв), добавляю языковую поддержку, лигатуры (особые варианты буквенных сочетаний), начальные и конечные варианты (с длинными хвостиками-свошами-флоришами и вот этим всем) и альтернативные наборы, если предполагаются. Попутно настраивается код, чтобы у конечного пользователя все работало так, как я задумала, и без проблем. Вот этот этап, который я описала в пару предложений, это на самом деле то, что занимает около 70% времени при создании шрифта :) А коротко описываю я его не потому что жадина, а потому что про один только кернинг можно написать заметку в три раза длиннее этой, и все равно будет мало. В курсе про шрифты буду останавливаться на всех этих моментах очень подробно (вот как раз сейчас пытаюсь нащупать грань между «недостаточно подробно» и «слишком много информации для переваривания»).

Когда шрифт первично настроен, я тестирую его в шрифтовом редакторе — сначала на специальных текстах (где собрано максимальное количество «трудных» буквенных сочетаний), потом на рендомных новостях, скопированных из гугла. Когда все настроено, наступает момент счастья :) Когда шрифт готов и им можно напечатать настоящее слово — для меня самый радостный момент, обычно я несколько минут сижу и печатаю всякие глупые фразы :)) После нескольких минут начинаю видеть мелкие помарки и детали, которые хочется доделать, радость проходит, сажусь составлять список / править.

Илон Маск рекомендует:  Что такое код asp getlasterror

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

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

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

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках h1 нашего сайта. Для этого выполняем следующие действия:

В корневой папке сайта создаём папку fonts и копируем туда наш Raleway.ttf;

В самом низу файла стилей style.css прописываем правило:

А также в файле стилей задаём правило для всех заголовков:

Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.

Если вы хотите подключить несколько шрифтов или их начертаний, то просто добавьте их под предыдущим:

Вы могли заметить, что есть разные форматы шрифтов — .ttf, .woff, .eot, .svg и другие. Еще существует формат для современных браузеров .woff2, но о нем мы расскажем в одной из следующих статей.

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

Здесь следует обратить внимание на порядок подключения — это важно!

Не будем вдаваться в подробности, просто запомните вид этой конструкции.

Если у вас есть шрифт только в одном формате, то воспользуйтесь различными конверторами шрифтов. Вот один из них.

Как подключить шрифт с помощью различных сервисов

Также можно воспользоваться сервисом fonts4web для подключения шрифтов:

  1. Находим нужный шрифт или выбираем из уже имеющихся;
  2. Скачиваем архив и добавляем его в папку fonts;
  3. Копируем уже готовый CSS-код для файла style.css;

Самый простой способ подключения шрифтов

  1. Заходим на сайт https://fonts.google.com;
  2. Находим нужный шрифт или несколько:
  3. Нажимаем на красный круг в правом верхнем углу в блоке шрифта;
  4. Внизу нажимаем на появившееся чёрное поле:
  5. При желании кастомизируем шрифт;
  6. Копируем ссылку и вставляем ее в тег head:

Как подключить шрифт к шаблону Moguta.CMS


  1. Через хостинг загрузить необходимый шрифт в папку /mg-templates/mg-default/fonts;
  2. Через административную панель открыть файл стилей;
  3. Прописать в самом верху новый шрифт;
  4. Ниже в файле стилей найти интересующий нас элемент и задать или изменить свойство font-family: *название нового шрифта* ;

Как добавить ссылку с Google Fonts в шаблон Moguta CMS

  1. Заходим Настройки—>Шаблон—>template.php;
  2. Перед закрывающим тегом head вставляем ссылку сгенерированную гуглом;
  3. Затем в файле стилей задаём новый шрифт к нужному элементу:

Теперь вы знаете как подключить шрифт на сайт в CSS и не только. Мы с радостью ответим на все ваши вопросы в группе или комментариях.

rbsysnn

Будь стратегом ! :)

Всем привет.
Не так давно для допуска к экзаменам мы столкнулись с проблемой — все кто имел пропуски пар должны были сдать рефераты, написанные от руки. За 1-2 пропуска 1 реферат, 2-5 пропусков 2 реферата, ну и так далее. Каждый реферат не менее 10 листов. Найти реферат по теме в интернете не составляет никакого труда, но вот как все это дело перенести на бумагу с наименьшими усилиями? На просторах сети было найдено много русских рукописных шрифтов(ссылка). Но, скачав несколько экземпляров этих шрифтов, стало понятно, что никто не поверит в подлинности написанного, да и простую проверку препода не пройти, когда он попросит написать что либо таким же почерком. Поэтому было принято решение сделать рукописный шрифт самим. Но как сделать шрифт из своего почерка, чтобы его никто не мог отличить, и спокойно можно было бы продемонстрировать что писал именно ты?
Решение было найдено – замечательная программа High-Logic FontCreator Professional 9

  1. Сканируем(предпочтительнее) или фотографируем получившийся алфавит.
  2. В Paint, Photoshop или любом другом графическом редакторе открываем наш сканированный(фотографированный) алфавит.
  3. Запускаем установленный Font Creator:
  • Нажимаем файл ( File ) — новый (New) или Ctrl + N
  • Появляется окно с силуэтами знаков, букв английского и еще какого та алфавита. Теперь добавим буквы русского алфавита:

Разберемся для чего они нужны:
Самая нижняя линия 1 (Win Descent) – максимальный предел для букв с хвостиком (ц, у, щ, з, р, д) все что ниже этой линии печататься не будет.
Линия 2 (Baseline)– линия опоры каждой буквы. Все буквы должны располагаться на этой линии.
Линия 3 (x-Height) – максимальная высота маленьких букв.
Линия 4 (CapHeight) – максимальная высота больших букв, цифр, а также буквы «в», «д», «б».
Линия 5 ( WinAscent ) – верхний предел символов, все что выше этой линии печататься не будет.
Вертикальные линии левая (6) и правая (7) — определяют то, как будут соприкасаться буквы шрифта из вашего между собой. Если надо, чтобы буквы были как в рукописи соприкасались между собой, двигаем букву в плотную к левой (6), а правую (7) передвигаем на букву, чтобы она чуть-чуть вылизала за линию.

Подгоняем все буквы под линии, иначе символы шрифта будут расположены как попало и соответственно это будет не красиво. Пример расположения разных букв:

Ну вот и все. Устанавливаем свой шрифт, запускаем текстовый редактор, находим свой шрифт и наслаждаемся его использование. Как установить шрифт можно посмотреть тут.

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

Правило CSS @font-face

Правило CSS @font-face отвечает за подключение своих или внешних шрифтов на странице сайта. Предварительно рекомендую прочитать про свойство CSS font

Правило CSS @font-face

  • font-family — свое название шрифта
  • font-size — размер шрифта
  • font-style — стиль шрифта
  • src:url(addr) — адрес где лежит подключаемый шрифт. В рассмотренном примере он лежит в корне под именем usershrift.ttf

@font-face открывает большие возможности в плане оформления текстов на странице. Это позволяет «выделиться» среди остальных сайтов и предложить что-то свое оригинальное. Слово выделиться я взял в кавычки, потому что хочу подчеркнуть тот момент, что есть тонкая грань между сделать красиво или все испортить. К применению своих шрифтов надо всегда подходить очень аккуратно. Далеко не все пользователи оценят это.

Не все браузеры поддерживают все форматы шрифтов. Поэтому нужно через запятую перечислять несколько вариантов форматов шрифтов. Например, IE поддерживает только формат eot . Синтаксис @font-face допускает подключать через запятую несколько форматов:

Пример: как сделать свой шрифт на html

Необычные шрифты для сайта

Шрифт можно создать самостоятельно через специальные онлайн генераторы шрифтов:

Как подключить шрифт через внешний файл CSS

В первую очередь вам нужны файлы шрифта в формате WOFF
Получить их можно, купив шрифт например на myfonts.com. При покупке выбирайте лицензию «WEB» — для использования в интернете.

Разместите шрифтовые файлы в интернете
Для размещения файлов вы можете выбрать любой сервер или CDN-сервис. Главное, чтобы сервер поддерживал Access-Control-Allow-Origin CORS для раздачи для любого домена. (Access-Control-Allow-Origin: *)

Цифры 300,400. в свойстве font-weight означают насыщенность начертания шрифта. Вот полный список:
300 — light
400 — normal
500 — medium
600 — semibold
700 — bold

Браузеры в интернете рендерят шрифт немного по-другому, чем он может выглядеть, скажем, в фотошопе. Обычно получается чуть жирнее. Иногда полезно знать о небольшой хитрости: можно указать например файл Light начертания для normal.

И наоборот. Если у вас нет файла с начертанием semi-bold (600). То укажите вместо него файл Bold. Таким образом полужирные заголовки будут отображаться не базовым начертанием для текста, а жирным.

Если файл шрифта у вас всего один, то можете указать его вообще для всех начертаний, перечислив их через запятую: 300,400,500,600,700

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL