На сайте 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 (если экс ниже девятки). качаем шрифт иду в любимую файлзиллу Не забываем на сервере присвоить файлу шрифта правильное имя. Теперь наша задача сообщить обработчикам кода нашего сайта, что если он встретит текст шрифта MICRA-BOLD, то ему нужно покопаться в файлах сайта и найти его, этот шрифт. Поскольку я буду использовать шрифт всего в 2х или 3х местах, мне достаточно прописать это в css. Иду в стили и пишу: Все вроде хорошо, но не факт, что в iOS откроется шрифт. Да, есть такая задница. Айки упорно пытаются сломать систему. Но нам известно, что они спокойно съедают шрифты формата svg. Ищем конвертер для шрифта. сохранил себе все шрифты, скачал. обратил внимание на форматы свг и еот (для извращенного эксплорера). Закинул их в папку со шрифтами на сервак Добавил их в 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" /> Закрываем все, обновляемся и с чистой совестью идем печь круассаны.
Попробуй прописать абсолютные ссылки к шрифтам. Если поможет - значит относительные ссылки не правильные. 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; }
Попробовал все варианты - ничего не выходит... Сейчас перепроверю как я задал шрифты в стиле блока... Может поможет. Отпишусь через 5 минут.
И потом по этой ссылке: Код: <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'); }
В 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"); }
Спасибо, все работает. У меня появились вопросы, что логично. по какой причине я не смог использовать свой вариант синтаксиса? Ведь все вроде логично... И не пойму откуда ты вытащил правильный вариант. + в стиле заменил пробелы дефисом, поскольку во всем документе недавно сменил название шрифта с macra Bold на micra-bold и все заработало.
Отсюда: http://allfont.ru/allfont.css?fonts=micra-bold В IE и iOS протестировать надо, аналогично как - то надо прописать шрифты. А может и не надо, вдруг этот вариант поймут.
А если бы у меня не было ссылки например, а просто установлен шрифт на компьютере. Я не смог бы найти такую ссылку. Как бы я должен был узнать какие параметры нужно прописывать, а какие - нет?
Код: 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
Сказать что я запарился - ничего не сказать, но дело сделано! 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 вместе с копированием шрифтов. Вот что за люди? Если делают шаблоны - пусть вкладывают шрифты сразу, гады(((
что делать, если размер страницы 100Кб, размер картинок и скриптов - 150Кб, а размер файла шрифта: 250Кб ? можно ли сжать, ускорить загрузку? и также вопрос как заставить текст отображаться до того как загрузился шрифт (на данный момент отображается пустое место, пока шрифт не загрузился)
Что касается скорости загрузки, то мы выше поднимали этот вопрос - шрифты переносить на локал, а не ссылаться на сторонние ресурсы - это первое, что поможет ускорить загрузку. Чтобы уменьшить вес самого шрифта, нужно удалить нафиг ненужные символы (но не делать же это вручную, правда?). Для этого есть специальные программы. Одна из них называется fontoptimizer. Не могу сказать сказать, что хорошая или плохая только потому, что не пользовался. Но вообще ее хвалят. Насколько мне известно, она сжимает шрифт в 10-20 раз.
Можно включить сжатие и кеширование данных через конфиги nginx или apache на сервере. Попробуйте определить в CSS в свойстве font-family через запятую два - три наименования шрифта. Первый ваш, второй - третий стандартный. Если первого не будет в браузере подтянется второй или третий. Код: p, div { font-family: вашшрифт, arial, tahoma; margin: 0; padding: 0; }