ЭНЦИКЛОПЕДИЯ СОВРЕМЕННОГО САЙТОСТРОЕНИЯ

Лучшее Подключение уникальных шрифтов

Тема в разделе "Другие вопросы по созданию сайта", создана пользователем Мефистофель, 2 фев 2016.

  1. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    На сайте http://www.madmark.ru/ использовал шрифт, который не идет в стандартных сборках - скачал его на просторах ГлСети. На локалке у меня открывается сайтик хорошо, шрифты нравятся, все отлично. Но когда пользователь в другом конце света зайдет на сайт, его браузер просто распознает символы в стандартном варианте - Times New Roman, например. Тога рушится весь дизайн. Есть 2 способа решения проблемы:

    1. Подключить шрифт создавая линк на сайт, где я скачал нужный мне шрифт:

    HTML:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    2. Загрузить шрифт в корень сайта и натыкать носом индекс сайта - мол, "смотри, шрифт лежит у тебя, показывай именно его, а не какой-то другой!".

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

    качаем шрифт
    upload_2016-2-2_14-5-34.png
    upload_2016-2-2_14-6-57.png

    иду в любимую файлзиллу

    upload_2016-2-2_14-11-0.png

    Не забываем на сервере присвоить файлу шрифта правильное имя.

    upload_2016-2-2_14-14-5.png

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

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

    upload_2016-2-2_14-20-53.png

    Все вроде хорошо, но не факт, что в iOS откроется шрифт. Да, есть такая задница. Айки упорно пытаются сломать систему. Но нам известно, что они спокойно съедают шрифты формата svg.

    Ищем конвертер для шрифта.
    upload_2016-2-2_14-38-16.png

    сохранил себе все шрифты, скачал. обратил внимание на форматы свг и еот (для извращенного эксплорера).

    upload_2016-2-2_14-42-29.png
    Закинул их в папку со шрифтами на сервак

    upload_2016-2-2_14-46-0.png

    Добавил их в style.css

    HTML:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    Теперь иду в индекс и убиваю ссылку на шрифт на стороннем ресурсе.

    Убиваю это:

    HTML:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    Закрываем все, обновляемся и с чистой совестью идем печь круассаны.
     
    Последнее редактирование модератором: 2 фев 2016
    • Полезно [+] Полезно [+] x 1
  2. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    и слетел теперь шрифт к хренам собачьим)))
     
  3. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    Не могу найти причину того, что шрифт не работает...
     
  4. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Попробуй прописать абсолютные ссылки к шрифтам. Если поможет - значит относительные ссылки не правильные.
    HTML:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    Почему то мне кажется, что надо не так:
    HTML:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    а так:
    HTML:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
     
    Последнее редактирование: 2 фев 2016
  5. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Похоже, что шрифты не подключены:
    upload_2016-2-2_14-28-31.png
     
  6. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    Попробовал все варианты - ничего не выходит...

    Сейчас перепроверю как я задал шрифты в стиле блока... Может поможет. Отпишусь через 5 минут.
     
  7. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    И потом по этой ссылке:
    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    совcем другой синтаксис подключения, не такой как у тебя:

    HTML:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
     
  8. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    В css добавь такой код и все заработает:

    HTML:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
     
    • Мне нравится [+] Мне нравится [+] x 1
  9. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    Спасибо, все работает. У меня появились вопросы, что логично. по какой причине я не смог использовать свой вариант синтаксиса? Ведь все вроде логично... И не пойму откуда ты вытащил правильный вариант.

    +

    в стиле заменил пробелы дефисом, поскольку во всем документе недавно сменил название шрифта с macra Bold на micra-bold и все заработало.
     
  10. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    А в статье (в пошаговой) все остальное правильно, да?