Font family open sans html

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

Чтобы создать неповторимый и красочный дизайн, приходится подключать свои шрифты. В этом уроке научимся подключать любой шрифт. Подключение нового шрифта осуществляется при помощи правила @font-face . В этом правиле, как вы наверно догадались, обязательно должны быть два свойства: имя шрифта и путь к файлу (к шрифту). Следующие примеры будут относительно шрифта Open Sans. Рассмотрим первый пример.

@font-face font-family: 'Open Sans'; 
src: local('Open Sans'), 
url('/font/open_sans.ttf') format('truetype');
>

Свойство font-family мы применяем, чтобы указать имя шрифта (далее будем использовать его так: p ). Часть кода local(‘Open Sans’) означает проверку на наличие у пользователя этого шрифта. Если вы не хотите проверять наличие шрифта у пользователя, то можно писать как во втором примере.

@font-face font-family: 'Open Sans'; 
src: url('/font/open_sans.ttf') format('truetype');
>

Третий пример более полный и более кроссбраузерный.

@font-face font-family: 'Open Sans'; 
src: url('open_sans.eot'); 
src: url('open_sans.ttf') format('truetype'), 
url('open_sans.woff') format('woff'); 
font-weight: normal; 
font-style: normal;
>

Другие способы подключения шрифтов

Способ первый (например, берем шрифт с сайта Google), код вставляется в :

Способ второй (вставляется в CSS файл):

@import url('http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic');

Источник

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

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

Коллекция Google Fonts

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

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&subset=cyrillic');

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

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

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

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

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

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

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

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

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

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

С правилами font-weight и font-style все понятно, их нужно прописать для каждого начертания нужного шрифта. Font-family при этом остается неизменной. Именно указанное здесь имя будет использоваться во всех css-инструкциях для применения этого шрифта.

В моем случае css-файл начнется следующим образом:

@font-face < font-family: 'Open Sans'; font-weight: normal; font-style: normal; src: url(font1-url); >@font-face < font-family: 'Open Sans'; font-weight: normal; font-style: italic; src: url(font2-url); >@font-face < font-family: 'Open Sans'; font-weight: 700; font-style: normal; src: url(font3-url); >@font-face

Если указать правильные адреса файлов и установить для какого-нибудь элемента жирный курсивный шрифт Open Sans, браузер обратится к файлу *font4-url, так как именно он содержит нужное начертание.

Это самые базовые настройки, можно указать любые другие допустимые в CSS характеристики шрифтов, например, font-variant или font-stretch . Можно и вообще никаких настроек не указывать, ограничиться только названием и адресом файла.

Файлы шрифта

Теперь обратимся непосредственно к файлам.

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

Для нашего любимого Internet Explorer организуем особое подключение.

Локальное подключение

Есть еще одна отличная опция, позволяющая до начала загрузки проверить, есть ли нужный шрифт на компьютере пользователя. В этом случае даже грузить ничего не придется, что позволит оптимизировать работу сайта. Для этого используется функция local() , которая идет самой первой в списке шрифтов. Можно указывать сразу несколько проверок с разными вариантами названия.

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

Источник

Быстрое подключение шрифтов Google Fonts (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum)

Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому что надоело постоянно брать их с сайта fonts.google.com. Если кому-то пригодится, то берите, мне не жалко.

Google font Open Sans

//Добавляем к body или к нужному элементу font-family: 'Open Sans', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

Google font Roboto

//Добавляем к body или к нужному элементу font-family: 'Roboto', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Google font Ubuntu

//Добавляем к body или к нужному элементу font-family: 'Ubuntu', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

Google font Montserrat

//Добавляем к body или к нужному элементу font-family: 'Montserrat', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

Google font Cuprum

//Добавляем к body или к нужному элементу font-family: 'Cuprum', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Cuprum:wght@400;700&display=swap');

Подключить несколько шрифтов можно так:

//Добавляем к body или к нужному элементу font-family: 'Open Sans', sans-serif; font-family: 'Roboto', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto:ital,wght@0,700;1,300&display=swap');

Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне….

В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты…

Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один…

Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица…

Источник