Использование шрифта Ubuntu в моем веб-приложении

Question

Я планирую использовать шрифт Ubuntu для моего веб-приложения Django.Я скачал шрифт здесь: http://font.ubuntu.com/.До сих пор мне удалось включить шрифт, поместив ссылку на Google API;вставив эту строку кода в мой HTML-файл <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">

Однако сервер моего веб-приложения не будет подключен к Интернету, поскольку он предназначен только для внутреннего использования.Будет ли вышеуказанный метод все еще работать таким образом?Если нет, как я могу вставить загруженный шрифт в мое веб-приложение?

Answer 1

Какие шрифты из гарнитуры вам действительно нужны?

Это так просто: http://fonts.googleapis.com/css?family=Ubuntu:regular,bold,italic возвращает:

@media screen {
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: normal;
  src: local('Ubuntu Italic'), local('Ubuntu-Italic'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/kbP_6ONYVgE-bLa9ZRbvvvesZW2xOQ-xsNqO47m55DA.woff') format('woff');
}
}
@media screen {
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
}
}
@media screen {
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: bold;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
}

Загрузите каждый из файлов WOFF, который вы хотитеиспользовать, как видно из свойства 'src', и поместить их в статический каталог, и изменить URL-адрес 'src' в CSS, чтобы он соответствовал вашему собственному URL-адресу.

EG, для обычного шрифта выдолжен скачать: http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff поместите его в /static/ubuntu_normal.woff

и создайте следующий CSS:

@media screen {
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: local('Ubuntu'), url('/static/ubuntu_normal.woff') format('woff');
}
}

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

Answer 2

CSS работает на стороне клиента. Пока клиенты подключены к Интернету, это будет работать.