Descărcați un font Google și înființarea unui offline-ul care-l foloseste

Verifica google fonturile web helper

Acesta vă permite să descărcați fiecare font web Google și sugerează cod css pentru punerea în aplicare. Acest instrument, de asemenea, vă permite să descărcați pur și simplu toate formatele de la o dată, fără a hassle.

dorit Vreodată să știți în cazul în care Google gazdele lor fonturile web? Acest serviciu ar putea fi la îndemână dacă doriți să descărcați toate .eot, .woff, .woff2, .svg, .ttf fișiere de font varianta direct de la google (în mod normal dvs. de Utilizator-Agent-ar stabili cel mai bun format).

De asemenea, să ia o privire la lor pagina Github.

Du-te la Google Fonturi - http://www.google.com/fonts/ , se adaugă font vă place la colecția dvs., și apăsați butonul de download. Și apoi, trebuie doar să utilizați @fontface pentru a conecta fontul de la pagina dvs. de web. Btw, daca ai deschis link-ul pe care îl utilizați,'ll vedea un exemplu de utilizare a @fontface

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

Pentru un exemplu

@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');
}

Doar schimba adresa url la nivel local link-ul de pe fișiere de font, ai'am descarcat.

Puteți face chiar mai ușor.

Doar descărca fișiere, ai'am legat:

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

Nume opensans.css sau cam asa ceva.

Apoi schimba doar link-uri in url() pentru a-ți calea către fișierele de fonturi.

Și apoi înlocuiți exemplu șir cu:

Găsit un pas-cu-pas modalitate de a realiza acest lucru (pentru 1 font):
(ca de Sep-9 2013)

1. Alege fontul la http://www.google.com/fonts
2. Adaugă dorit la colecția dvs. folosind "Adăugați la colecția" buton albastru
3. Faceți clic pe "Vezi toate stilurile" butonul de lângă "Eliminați din colectia" buton și asigurați-vă că ați selectat alte stiluri pot, de asemenea, nevoie de un astfel de ca 'bold'...
4. Faceți clic pe 'Folosi' tab buton de pe dreapta jos a paginii
5. Faceți clic pe butonul descărcare din partea de sus cu o săgeată în jos imaginea
6. Faceți clic pe "fișier zip" pe mesaj pop-up care apare
7. Faceți clic pe "Aproape" buton de pe pop-up
8. Încet derulați pagina până când veți vedea cele 3 tab-uri "Standrd|@import|Javascript"
9. Faceți clic pe "@import" fila
10. Selectați și copiați url-ul între 'url(' și')'`
11. Copiați-l în bara de adrese într-o filă nouă și du-te acolo
12. Face "Fișier > Save page as..." și nume "desiredfontname.css" (înlocuiți în mod corespunzător)
13. Decomprima fonturi .fișierul zip descărcat (.ttf ar trebui să fie extras)
14. Du-te la "http://ttf2woff.com/" și de a converti orice .ttf extras din zip cu .woff
15. Edit desiredfontname.css și înlocuiți url-ul în ea [între'url(' și')'] cu valoarea de convertit .woff fișier de pe tine ttf2woff.com; calea scrie ar trebui să fie în funcție de server doc_root
16. Salvați fișierul și mutați-l în poziția finală și să scrie corespunzătoare <link/> CSS tag-ul pentru a importa aceste în pagina HTML
17. De acum, se referă la acest font de sa font-family numele în stiluri

Ca's a. Pentru că am avut aceeași problemă și soluția pe partea de sus nu au de lucru pentru mine.

Alte răspunsuri nu sunt greșite, dar am găsit acest lucru să fie cel mai rapid mod.

1. Descărcați fișierul zip de la Google fonturi și dezarhivați-l.
2. Încărcați fișiere de font 3 la un moment dat să http://www.fontsquirrel.com/tools/webfont-generator
3. Descărcați rezultatele.

Rezultatele conține toate formate de fonturi: woff, svg, ttf, eot.

ȘI ca un bonus vor genera fișierul css pentru tine!

Aruncati o privire la această aplicație la îndemână articolul]1 pentru a explica cum să folosiți fonturi Google offline

În esență, sunteți inclusiv fontul în proiectul dumneavoastră.

@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');

3 pași:

1. Descărca fontul personalizat pe Goole Fonturi și jos de încărcare .fișier css ex: Download http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 și de a salva ca exemplu.css
2. Deschide fișierul descărcat (exemplu.css). Acum trebuie să descărcați toate font-face de fișier și salvați-le pe fonturi director.
3. Edit exemplu.css: înlocuiți toate font-face dosarul dumneavoastră .css descărcare

Ex:

@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;
}

Uita-te la src: -> url-ul. Download http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 și de a salva fonturi director. După aceea, schimbați url-ul pentru toate fișierul descărcat. Acum, acesta va fi arata ca

@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;
}

** Descarcă toate fonturile contin .fișier css Sper că vă va ajuta u

Atunci când se utilizează Fonturi Google, fluxul de lucru este împărțit în 3 etape : "Selectați", "Personaliza", "Încorpora". Dacă te uiți atent, la capătul din dreapta al "de Utilizare" pagină, există o mică săgeată care vă permite să descărcați fontul în prezent în colecția ta.

<img src="https://i.stack.imgur.com/TGU4k.png" lățime="608" />

După aceea, și după ce font este instalat pe sistemul dumneavoastră, trebuie doar să-l folosească ca orice alt regular font folosind font-family` CSS directivă.

Daca'd place să declare în mod explicit pachetul dependențe sau automatiza descărcarea, puteți adăuga un nod pachet pentru a trage în fonturi google și de a servi pe plan local.

npm - Google Font Downloads

De fonturi proiect creează NPM pachete Open Source fonturi :

Fiecare pachet nave cu toate cele necesare fons și css pentru auto-gazdă o sursă deschisă font. Toate Fonturile Google au fost adăugate, precum și un mic, dar în creștere listă de alte fonturi open source.

Doar căutare npm pentru font-<typefacename> pentru a naviga pe fonturile disponibile, cum ar fi font roboto - sau font-open-sans și instala astfel:

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

npm - Fonturi Google Download-ers

Pentru mai generic caz de utilizare, acolo sunt mai multe npm pachete care va oferi fonturi în două etape, prima prin obținerea pachetului, și apoi arătând la nume de font și opțiuni'd dori să includă.

Aici sunt unele dintre opțiunile:

• Fonturi Google Webpack Plugin
• Fonturi Google Offline
• Fonturi Google
• Ia Fonturi Google

Bibliografie:

• Cum pentru a găzdui icoane materiale offline?
• Folosind offline icoane Materiale și font Roboto în Electroni app

Am urmat duydb's răspunsul pentru a produce cod python de mai jos, care automatizează acest proces.

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)

Sper că acest lucru ajută cu niște copy-paste moartea.

Aveți nevoie pentru a descărca fontul și de referință la nivel local.

Descărcați CSS din link-ul postat de tine, apoi descărca toate WOFF fișierele și (dacă este necesar) de a le converti laTTF`.

Apoi schimba CSS din link-ul postat de tine pentru a include fonturi la nivel local.

Din

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

Pentru a

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

Voila! Ar putea fi ceva mai mult ai nevoie pentru a face, dar cele de mai sus este de bază. Acest articol explică un pic mai bine.

doar descărca fontul și extrage-l într-un folder. apoi că link-ul de font. codul de mai jos lucrat pentru mine în mod corespunzător.

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