Внедрение на сайт своего(нестандартного) ШРИФТа Внедрение на сайт своего(нестандартного) ШРИФТа

Внедрение на сайт своего(нестандартного) ШРИФТа

Дата: Вторник, 22.10.2013, 13:29 | Сообщение # 1

Группа: Администраторы

Сообщений: 1530

1. 100% рабочий метод

<link href='http://fonts.googleapis.com/css?family=google+font&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

где, google_font - шрифт из набора шрифтов гугл http://www.google.com/fonts/

<p style="font-family:'google font';">Здесь текст</p>

2. Метод на перспективу

Пишем в <style>...

@font-face {
font-family: 'Futuris';
src: url('futurisb.eot'); //для IE
src: local('Futuris Bold'),
url('futurisb.woff') format('woff'); //для остальных браузеров
}

закачав на сайт нужный шрифт в формате .eot и .woff
Для этого надо сконвертировать шрифт .ttf(true type)

Бесплатный конвертов шрифтов онлайн: http://www.font2web.com/

Дата: Вторник, 28.01.2014, 11:50 | Сообщение # 2

Группа: Администраторы

Сообщений: 1530

Шрифт векторных значков(стрелки, поиск, меню, телефон) для навигации сайта
скачать http://fortawesome.github.io/Font-Awesome/
скачать у нас http://kachay.ucoz.org/css/icon_css.zip
Описание внедрения Font-Awesome по-русски http://fontawesome.veliovgroup.com/

Внедрение шрифта иконок в двух словах:
1. Вставить тег <link href="http://kachay.ucoz.org/css/font-awesome.css" rel="stylesheet"> в <header>
2. В то место, где хотим видеть иконку пишем: <i class="icon-globe icon-2x"></i>
где "icon-globe" - имя иконки, "icon-2x" - масштаб(2,3,4), если надо

Внедрение шрифта после(:after) текста

a.ext:after {
font-family: FontAwesome !important;
content: "\f08e";
margin-left:4px;
vertical-align: -1px;
display: inline-block;
}

-------------------------------------
Теги: шрифт, значки, font

Еще версия Awesome <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Дата: Пятница, 29.08.2014, 14:08 | Сообщение # 3

Группа: Администраторы

Сообщений: 1530

Шрифт со значками светодиодного оборудования

Скачать шрифт
http://kachay.ucoz.org/css/lightfootled.woff
http://kachay.ucoz.org/css/lightfootled.eot
http://kachay.ucoz.org/css/lightfootled.ttf

Пример внедрения: http://www.lightfootled.com/

Внедрение:

<link href="http://kachay.ucoz.org/css/lightfootled.css" rel="stylesheet">

<div class="icon" data-icon="d"></div>

Дата: Четверг, 02.10.2014, 23:14 | Сообщение # 4

Группа: Администраторы

Сообщений: 1530

Вставка на сайт шрифта Cuprum / шрифт для кириллицы похожий на Oswald

<link rel="stylesheet" href="http://kachay.ucoz.org/css/cuprum.css" type="text/css" charset="utf-8" />

<p style="font-family:Conv_Cuprum;font-size:16px;">Текст здесь</p>

Дата: Пятница, 03.10.2014, 03:10 | Сообщение # 5

Группа: Администраторы

Сообщений: 1530

Иконки шрифта Raphael

http://icons.marekventur.de/

Дата: Пятница, 09.01.2015, 22:33 | Сообщение # 6

Группа: Администраторы

Сообщений: 1530

pfs-bold

@font-face {
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Bold.otf');
font-family: pfs-bold;
}

Пример и источник: http://codepen.io/suez/pen/vEgZba

Дата: Суббота, 18.07.2015, 12:39 | Сообщение # 7

Группа: Администраторы

Сообщений: 1530

Как не напрягаясь вставить хороший шрифт на сайт

на примере шрифта "open-sans"

Шрифт "open-sans" не является стандартным, но вид у него привлекательный,
чтобы использовать этот шрифт не инсталлируя его на компьютер в современных браузерах достаточно лишь добавить строку

1й способ в <style>: @import url(http://allfont.ru/allfont.css?fonts=open-sans);
2й способ в <head>: <link href="http://allfont.ru/allfont.css?fonts=open-sans" rel="stylesheet" type="text/css" />

и далее указывать шрифт у нужных элементов

p {font-family: 'open-sans',arial;}

Поищите и другие шрифты на сайте allfont.ru

Пример для редактирования: http://codepen.io/anikey99/pen/JdBLMJ

Дата: Понедельник, 03.08.2015, 23:30 | Сообщение # 8

Группа: Администраторы

Сообщений: 1530

https://materialdesignicons.com/
Множество легко встраиваемых значков от этого сервиса.
Хорош тем, достаточно поставить скрипт этого сайта
//cdn.materialdesignicons.com/1.1.70/css/materialdesignicons.min.css
и прописать в нужном месте:

<i class="mdi mdi-имя_значка"></i>

что очень здорово - есть svg вариант каждого значка

<svg style="width:40px;height:40px" viewBox="0 0 24 24">
<path fill="#000000" d="M18,4V3A1,1 0 0,0 17,2H5A1,1 0 0,0 4,3V7A1,1 0 0,0 5,8H17A1,1 0 0,0 18,7V6H19V10H9V21A1,1 0 0,0 10,22H12A1,1 0 0,0 13,21V12H21V4H18Z" /></svg>

Пример: http://codepen.io/anikey99/pen/KpbEPq

Дата: Воскресенье, 23.08.2015, 02:43 | Сообщение # 9

Группа: Администраторы

Сообщений: 1530

Библиотека значков для разработки мобильных приложений

http://ionicons.com/

http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css

пример интеграции: <i class="ion-social-chrome"></i>

Дата: Воскресенье, 11.10.2015, 23:52 | Сообщение # 10

Группа: Администраторы

Сообщений: 1530

Внедрение экзотических шрифтов от google /handwriting,Arvo

<head>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
WebFont.load ( { google: {
families: ['Arvo|Pacifico']
} } );
</script>
</head>

Пример: http://codepen.io/Indiessance/pen/NGgXQE

https://www.google.com/fonts/

Внедрение на сайт своего(нестандартного) ШРИФТа - Архив