Завантаження шрифту Google та налаштування офлайн-сайту, який його використовує

У мене є шаблон, і він має посилання на шрифт Google на зразок цього:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

Як я можу завантажити його і налаштувати його на використання на своїх сторінках, які постійно працюють в режимі офлайн?

Просто перейдіть до Google Fonts - http://www.google.com/fonts/ , додайте шрифт, який вам сподобався, і натисніть кнопку для завантаження. А потім просто використовуйте @fontface для підключення цього шрифту до вашої веб-сторінки. До речі, якщо ви відкриєте посилання, яке ви використовуєте, ви побачите приклад використання @fontface

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Для прикладу

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Просто змініть адресу URL на локальне посилання на завантажений файл шрифту.

Можна зробити це ще простіше.

Просто завантажте файл, ви зв'язали:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Назвіть це opensans.css або близько того.

Потім просто змініть посилання в url () на свій шлях до файлів шрифтів.

А потім замініть ваш приклад рядка на:

<link href='opensans.css' rel='stylesheet' type='text/css'>

Перегляньте помічник веб-шрифтів Google

Він дозволяє завантажувати кожен веб-шрифт Google і пропонує код css для реалізації. Цей інструмент також дозволяє просто завантажувати всі формати відразу без клопоту.

Вам хотілося дізнатися, де Google розміщує їхні веб-шрифти? Ця послуга може бути зручною, якщо ви хочете завантажити всі .eot, .woff, .woff2, .svg, .ttf файли варіанту шрифту безпосередньо з google (як правило, ваш User-Agent визначає найкращий формат).

Погляньте також на їхню сторінку Github .

Знайдено покроковий спосіб досягти цього (для 1 шрифту):
( станом на 9 вересня 2013 р. )

1. Виберіть свій шрифт за адресою http://www.google.com/fonts
2. Додайте бажану до колекції за допомогою синьої кнопки "Додати в колекцію"
3. Натисніть кнопку "Переглянути всі стилі" біля кнопки "Видалити з колекції" і переконайтеся, що вибрали інші стилі, які вам також можуть знадобитися, наприклад "жирний" ...
4. Клацніть на вкладці "Використовувати" в нижній правій частині сторінки
5. Натисніть кнопку завантаження вгорі із зображенням стрілки вниз
6. Клацніть на "zip file" на спливаючому повідомленні, яке з'явиться
7. На спливаючому вікні натисніть кнопку «Закрити»
8. Повільно прокручуйте сторінку, поки не з’являться 3 вкладки "Standrd | @import | Javascript"
9. Перейдіть на вкладку "@import"
10. Виберіть і скопіюйте URL-адресу між 'url('та')'
11. Скопіюйте його на адресний рядок на новій вкладці та перейдіть туди
12. Зробіть "Файл> Зберегти сторінку як ..." і назвіть її "desirefontname.css" (замініть відповідно)
13. Декомпресуйте завантажений вами шрифт .zip файл (слід витягнути .ttf)
14. Перейдіть на сторінку " http://ttf2woff.com/ " і конвертуйте будь-який .ttf, витягнутий з zip в .woff
15. Відредагуйте desiredfontname.cssта замініть будь-який URL-адресу в ньому [між 'url('і ')'] відповідним перетвореним .woff-файлом, який ви отримали на ttf2woff.com; шлях, який ви пишете, повинен відповідати вашому серверу doc_root
16. Збережіть файл і перемістіть його на остаточному місці та напишіть відповідний <link/>тег CSS, щоб імпортувати їх на вашу HTML-сторінку
17. Відтепер посилайтеся на цей шрифт за його font-familyназвою у ваших стилях

Це воно. Тому що у мене була така ж проблема, і рішення зверху не працювало для мене.

Інші відповіді не є помилковими, але я вважаю, що це найшвидший спосіб.

1. Завантажте zip-файл із шрифтів Google і розпакуйте його.
2. Завантажте файли шрифту 3 одночасно на http://www.fontsquirrel.com/tools/webfont-generator
3. Завантажте результати.

Результати містять усі формати шрифту: woff, svg, ttf, eot .

І як додатковий бонус вони генерують файл css і для вас!

3 кроки:

1. Завантажте свій власний шрифт на Goole Fonts та завантажте файл .css ex: Завантажте http://fonts.googleapis.com/css?family=Open+Sans:200italic,600italic,400,600,300 та збережіть як example.css
2. Відкрийте завантажений файл ( example.css ). Тепер потрібно завантажити весь файл шрифту і зберегти їх у каталозі шрифтів .
3. Редагувати example.css : замінити весь файл шрифту на завантаження .css

Наприклад:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Подивіться на src: -> url. Завантажте http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 та збережіть у каталозі шрифтів . Після цього змініть URL-адресу на весь завантажений файл. Зараз це буде виглядати так

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** Завантажте всі шрифти, що містять .css файл Сподіваємось, це допоможе u

Якщо ви хочете явно заявити про залежність вашого пакета або автоматизувати завантаження, ви можете додати пакет вузлів, щоб перетягнути google шрифти та обслуговувати локально.

npm - Завантажити шрифт Google s

Проект шрифтів створює пакети NPM для типів з відкритим кодом:

Кожен пакет постачається з усіма необхідними шрифтами та css для самостійного розміщення шрифту з відкритим кодом.
Додано всі шрифти Google, а також невеликий, але зростаючий список інших шрифтів з відкритим кодом.

Просто шукайте npm для перегляду доступних шрифтів, таких як typeface-roboto або typeface -open-sans, і встановлюйте так:typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

НПМ - Google шрифти Download- ERS

Для більш загального випадку використання, є кілька пакетів npm, які доставлять шрифти в два етапи, спочатку отримавши пакет, а потім вказавши його на назву шрифту та параметри, які ви хочете включити.

Ось кілька варіантів:

• Плагін веб-пакета Google Fonts
• Шрифти Google офлайн
• Google Шрифти
• Отримайте шрифти Google

Подальше читання :

• Як розмістити піктограми матеріалів офлайн?
• Використання офлайн-значків "Матеріал" та шрифту Roboto в додатку Electron

По суті, ви включаєте шрифт у свій проект.

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

Під час використання шрифтів Google ваш робочий процес ділиться на 3 етапи: "Вибрати", "Налаштувати", "Вставити". Якщо ви придивитесь уважніше, у правому кінці сторінки "Використовувати" є маленька стрілка, яка дозволяє завантажувати шрифт, який зараз знаходиться у вашій колекції.

Після цього, і як тільки шрифт встановлений у вашій системі, ви просто повинні використовувати його, як і будь-який інший звичайний шрифт, використовуючи font-familyдирективу CSS.

Я дотримувався відповіді duydb, щоб створити код python нижче, який автоматизує цей процес.

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

Сподіваюсь, це допоможе у випадку смерті копіювання та вставки.

Вам потрібно завантажити шрифт та посилатися на нього локально.

Завантажте CSSпосилання, яке ви опублікували, а потім завантажте всі WOFFфайли та (за потреби) перетворіть їх у TTF.

Потім змініть на CSSпосилання, яке ви розмістили, щоб включити шрифти локально.

З

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

До

url(/path/to/font/font.woff)

Вуаля! Вам може бути ще щось, що вам потрібно зробити, але вище - це основи. Ця стаття пояснює трохи краще.

просто завантажте шрифт і витягніть його в папку. потім зв’яжіть цей шрифт. наведений нижче код працював для мене належним чином.

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}