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

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

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

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

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

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

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

    HTML:
    <link href="http://allfont.ru/allfont.css?fonts=micra-bold" rel="stylesheet" type="text/css" />
    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:
    @font-face {
      font-family: "micra-bold";
      src: url('../fonts/micra-bold.ttf');
      src: url('../fonts/micra-bold.eot');
        src: url('../fonts/micra-bold.svg');
      font-weight: normal;
      font-style: normal;
    }
    
    Теперь иду в индекс и убиваю ссылку на шрифт на стороннем ресурсе.

    Убиваю это:

    HTML:
    <link href="http://allfont.ru/allfont.css?fonts=micra-bold" rel="stylesheet" type="text/css" />
    Закрываем все, обновляемся и с чистой совестью идем печь круассаны.
     
    Последнее редактирование модератором: 2 фев 2016
    #1
  2. Загрузка...
  3. Мефистофель

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

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

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

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Не могу найти причину того, что шрифт не работает...
     
    #3
  5. Jonny

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

    Сообщения:
    748
    Рейтинг:
    143
    Попробуй прописать абсолютные ссылки к шрифтам. Если поможет - значит относительные ссылки не правильные.
    HTML:
    @font-face {
    font-family: "micra-bold";
    src: url('http://www.madmark.ru/fonts/micra-bold.ttf');
    src: url('http://www.madmark.ru/fonts/micra-bold.eot');
    src: url('http://www.madmark.ru/fonts/micra-bold.svg');
    font-weight: normal;
    font-style: normal;
    }
    
    Почему то мне кажется, что надо не так:
    HTML:
    @font-face {
    font-family: "micra-bold";
    src: url('../fonts/micra-bold.ttf');
    src: url('../fonts/micra-bold.eot');
    src: url('../fonts/micra-bold.svg');
    font-weight: normal;
    font-style: normal;
    }
    
    а так:
    HTML:
    @font-face {
    font-family: "micra-bold";
    src: url('/fonts/micra-bold.ttf');
    src: url('/fonts/micra-bold.eot');
    src: url('/fonts/micra-bold.svg');
    font-weight: normal;
    font-style: normal;
    }
    
     
    Последнее редактирование: 2 фев 2016
    #4
  6. Jonny

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

    Сообщения:
    748
    Рейтинг:
    143
    Похоже, что шрифты не подключены:
    upload_2016-2-2_14-28-31.png
     
    #5
  7. Мефистофель

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

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

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

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

    Сообщения:
    748
    Рейтинг:
    143
    И потом по этой ссылке:
    Код:
    <link href="http://allfont.ru/allfont.css?fonts=micra-bold" rel="stylesheet" type="text/css" /> 
    
    совcем другой синтаксис подключения, не такой как у тебя:

    HTML:
    /*****************************
    All rights reserved.
    AllFont.ru (c) 2011-2015
    *****************************/
    @font-face {
        font-family: 'Micra Bold';
        font-style: normal;
        font-weight: 700;
        src: local('Micra Bold'), local('Micra-Bold'),
            url(http://allfont.ru/cache/fonts/micra-bold_95dd516000098de3fb06650353a7cc19.woff) format('woff'),
            url(http://allfont.ru/cache/fonts/micra-bold_95dd516000098de3fb06650353a7cc19.ttf) format('truetype');
    }
    
     
    #7
  9. Jonny

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

    Сообщения:
    748
    Рейтинг:
    143
    В css добавь такой код и все заработает:

    HTML:
    @font-face {
      font-family: "Micra Bold";
      font-style: normal;
      font-weight: 700;
      src: local("Micra Bold"), local("Micra-Bold"), url("../fonts/micra-bold.woff") format("woff"), url("../fonts/micra-bold.ttf") format("truetype");
    }
     
    #8
    Мефистофель нравится это.
  10. Мефистофель

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

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

    +

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

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

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    А в статье (в пошаговой) все остальное правильно, да?
     
    #10
  12. Jonny

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

    Сообщения:
    748
    Рейтинг:
    143
    Отсюда: http://allfont.ru/allfont.css?fonts=micra-bold

    В IE и iOS протестировать надо, аналогично как - то надо прописать шрифты. А может и не надо, вдруг этот вариант поймут.
     
    #11
  13. Jonny

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

    Сообщения:
    748
    Рейтинг:
    143
    Не логично, в SRC: должно быть больше параметров, чем было задано у тебя.
     
    #12
  14. Мефистофель

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

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    А если бы у меня не было ссылки например, а просто установлен шрифт на компьютере. Я не смог бы найти такую ссылку. Как бы я должен был узнать какие параметры нужно прописывать, а какие - нет?
     
    #13
  15. Jonny

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

    Сообщения:
    748
    Рейтинг:
    143
    Код:
    When authors would prefer to use a locally available copy of a given font and download it if it's not, local() can be used. The locally-installed <font-face-name> argument to local() is a format-specific string that uniquely identifies a single font face within a larger family. The syntax for a <font-face-name> is a unique font face name enclosed by "local(" and ")". The name can optionally be enclosed in quotes. If unquoted, the unquoted font family name processing conventions apply; the name must be a sequence of identifiers separated by whitespace which is converted to a string by joining the identifiers together separated by a single space.
    
    /* regular face of Gentium */
    @font-face {
      font-family: MyGentium;
      src: local(Gentium),    /* use locally available Gentium */
           url(Gentium.woff); /* otherwise, download it */
    }
    
    For OpenType and TrueType fonts, this string is used to match only the Postscript name or the full font name in the name table of locally available fonts. Which type of name is used varies by platform and font, so authors should include both of these names to assure proper matching across platforms. Platform substitutions for a given font name must not be used.
    
    /* bold face of Gentium */
    @font-face {
      font-family: MyGentium;
      src: local(Gentium Bold),    /* full font name */
           local(Gentium-Bold),    /* Postscript name */
           url(GentiumBold.woff);  /* otherwise, download it */
      font-weight: bold;
    }
    
    Источник - стандарт CSS3, Font reference: the src descriptor: http://www.w3.org/TR/css3-fonts/#descdef-src
     
    Последнее редактирование: 2 фев 2016
    #14
  16. Мефистофель

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

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Вот это хорошая информация! Спасибо!
     
    #15
    Jonny нравится это.
  17. Мефистофель

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

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Сказать что я запарился - ничего не сказать, но дело сделано!

    HTML:
    
    @font-face {
      font-family: 'Lato';
      src: url('../fonts/lato/lato-black.eot');
      src: url('../fonts/lato/lato-black.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-black.woff') format('woff'), url('../fonts/lato/lato-black.ttf') format('truetype'), url('../fonts/lato/lato-black.svg#latoblack') format('svg');
      font-weight: 900;
      font-style: normal;
    }
    @font-face {
      font-family: 'Lato';
      src: url('../fonts/lato/lato-bold.eot');
      src: url('../fonts/lato/lato-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-bold.woff') format('woff'), url('../fonts/lato/lato-bold.ttf') format('truetype'), url('../fonts/lato/lato-bold.svg#latobold') format('svg');
      font-weight: bold;
      font-style: normal;
    }
    @font-face {
      font-family: 'Lato';
      src: url('../fonts/lato/lato-bolditalic.eot');
      src: url('../fonts/lato/lato-bolditalic.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-bolditalic.woff') format('woff'), url('../fonts/lato/lato-bolditalic.ttf') format('truetype'), url('../fonts/lato/lato-bolditalic.svg#latobold-italic') format('svg');
      font-weight: bold;
      font-style: italic;
    }
    @font-face {
      font-family: 'Lato';
      src: url('../fonts/lato/lato-italic.eot');
      src: url('../fonts/lato/lato-italic.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-italic.woff') format('woff'), url('../fonts/lato/lato-italic.ttf') format('truetype'), url('../fonts/lato/lato-italic.svg#latoitalic') format('svg');
      font-weight: normal;
      font-style: italic;
    }
    @font-face {
      font-family: 'Lato';
      src: url('../fonts/lato/lato-light.eot');
      src: url('../fonts/lato/lato-light.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-light.woff') format('woff'), url('../fonts/lato/lato-light.ttf') format('truetype'), url('../fonts/lato/lato-light.svg#latolight') format('svg');
      font-weight: 300;
      font-style: normal;
    }
    @font-face {
      font-family: 'Lato';
      src: url('../fonts/lato/lato-regular.eot');
      src: url('../fonts/lato/lato-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-regular.woff') format('woff'), url('../fonts/lato/lato-regular.ttf') format('truetype'), url('../fonts/lato/lato-regular.svg#latoregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: "Flat-UI-Icons";
      src: url('../fonts/flat-ui-icons-regular.eot');
      src: url('../fonts/flat-ui-icons-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/flat-ui-icons-regular.woff') format('woff'), url('../fonts/flat-ui-icons-regular.ttf') format('truetype'), url('../fonts/flat-ui-icons-regular.svg#flat-ui-icons-regular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: "Micra-Bold";
      font-style: normal;
      font-weight: 700;
      src: local("Micra-Bold"), local("Micra-Bold"), url("../fonts/micra-bold.woff") format("woff"), url("../fonts/micra-bold.ttf") format("truetype");
    }
    @font-face {
      font-family: 'Arvo';
      font-style: normal;
      font-weight: 400;
      src: local('Arvo'), url("../fonts/Arvo.woff2") format('woff2');
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 100;
      src: local('Lato Hairline'), local('Lato-Hairline'), url(../fonts/lato/Lato-Hairline.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 300;
      src: local('Lato Light'), local('Lato-Light'), url(../fonts/lato/Lato-Light.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 400;
      src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/lato/Lato-Regular.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 700;
      src: local('Lato Bold'), local('Lato-Bold'), url(../fonts/lato/Lato-Bold.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 900;
      src: local('Lato Black'), local('Lato-Black'), url(../fonts/lato/Lato-Black.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Lato';
      font-style: italic;
      font-weight: 100;
      src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'), url(../fonts/lato/Lato-HairlineItalic.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Lato';
      font-style: italic;
      font-weight: 300;
      src: local('Lato Light Italic'), local('Lato-LightItalic'), url(../fonts/lato/Lato-LightItalic.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Lato';
      font-style: italic;
      font-weight: 400;
      src: local('Lato Italic'), local('Lato-Italic'), url(../fonts/lato/Lato-Italic.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Lato';
      font-style: italic;
      font-weight: 700;
      src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(../fonts/lato/Lato-BoldItalic.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Lato';
      font-style: italic;
      font-weight: 900;
      src: local('Lato Black Italic'), local('Lato-BlackItalic'), url(../fonts/lato/Lato-BlackItalic.woff2) format('woff2');
    }
    
    
    Это заняло у меня минут 40 вместе с копированием шрифтов. Вот что за люди? Если делают шаблоны - пусть вкладывают шрифты сразу, гады(((
     
    #16
  18. youni

    youni Пользователь

    Сообщения:
    3
    Рейтинг:
    8
    что делать, если размер страницы 100Кб, размер картинок и скриптов - 150Кб, а размер файла шрифта: 250Кб ? можно ли сжать, ускорить загрузку? и также вопрос как заставить текст отображаться до того как загрузился шрифт (на данный момент отображается пустое место, пока шрифт не загрузился)
     
    #17
  19. Мефистофель

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

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Что касается скорости загрузки, то мы выше поднимали этот вопрос - шрифты переносить на локал, а не ссылаться на сторонние ресурсы - это первое, что поможет ускорить загрузку. Чтобы уменьшить вес самого шрифта, нужно удалить нафиг ненужные символы (но не делать же это вручную, правда?). Для этого есть специальные программы. Одна из них называется fontoptimizer. Не могу сказать сказать, что хорошая или плохая только потому, что не пользовался. Но вообще ее хвалят. Насколько мне известно, она сжимает шрифт в 10-20 раз.
     
    #18
  20. Jonny

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

    Сообщения:
    748
    Рейтинг:
    143
    Можно включить сжатие и кеширование данных через конфиги nginx или apache на сервере.

    Попробуйте определить в CSS в свойстве font-family через запятую два - три наименования шрифта. Первый ваш, второй - третий стандартный. Если первого не будет в браузере подтянется второй или третий.
    Код:
    p, div {
    font-family: вашшрифт, arial, tahoma;
    margin: 0;
    padding: 0;
    }
    
     
    #19
  21. Мефистофель

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

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Оба-на! Я сейчас так и попробую)
     
    #20