Как добавить "семейство шрифтов Ubuntu" на мой сайт с помощью CSS?

Как добавить семейство шрифтов Ubuntu в редактор CSS для моего сайта? Вот то, что у меня есть для моего шрифта и заголовка уже, но не хочу, чтобы у меня был текущий шрифт, я хочу Ubuntu Font.

/* ##### Common Styles ##### */

body {
  color: black;
  background-color: white;
  font-family: "times new roman", times, roman, serif;
  font-size: 12pt;
  margin: 0;
  padding: 0;
}

acronym, .titleTip {
  font-style: italic;
  border-bottom: none;
}

или

/* ##### Header ##### */

#header {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid black;
}

.headerTitle {
  font-size: 200%;
  margin: 0;
  padding: 0 0 0.5ex 0;
}

.headerTitle a {
  color: black;
  background-color: transparent;
  font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
  font-weight: normal;
  text-decoration: none;
}

.subHeader {
  display: none;
}


/* ##### Side Bars ##### */

#side-bar {
  display: none;
}


/* ##### Main Copy ##### */

#main-copy {
  text-align: justify;
  margin: 0;
  padding: 0;
}

#main-copy h1 {
  font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
  font-size: 120%;
  margin: 2ex 0 1ex 0;
  padding: 0;

Где я могу добавить семейство шрифтов Ubuntu? И я вставлял неправильный код, чтобы помочь вам, помогите мне?

Ответы

Ответ 1

Импорт шрифта

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

Вариант 1 - импорт из внешнего поставщика

Вы можете импортировать весь файл шрифта и настройки с внешнего хоста шрифтов, например, Google Fonts. Просто поместите этот код в свой HTML, чтобы импортировать его извне:

<link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin'; return false;">

Вариант 2 - Сохраните его на своем сервере

Вы можете просто загрузить, затем загрузить файлы шрифтов на свой сервер, а затем импортировать их через @font-face в свой CSS. В этом примере место вашего файла шрифта будет http://example.com/fonts/ubuntu.woff.

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'), url(http://example.com/fonts/ubuntu.woff) format('woff');
}

Использование шрифта

Затем вы должны указать, где вы хотите использовать этот шрифт. Просто добавьте Ubuntu в список font-family:

body {
    font-family: Ubuntu, "times new roman", times, roman, serif;
}

Этот примерный код предоставит шрифт Ubuntu для каждого текста вашей HTML-страницы, если он доступен.