कृपया इस बात का ध्यान रखें कि मेरा उत्तर बहुत पुराना हो चुका है।
नीचे तकनीकी रूप से परिष्कृत उत्तर दिए गए हैं, जैसे:
तो इस तथ्य को न दें कि यह वर्तमान में स्वीकृत उत्तर है जो आपको यह आभास देता है कि यह अभी भी सबसे अच्छा है।
आप अब अपने google / font रिपॉजिटरी में github के माध्यम से google का संपूर्ण फ़ॉन्ट सेट भी डाउनलोड कर सकते हैं । वे अपने फोंट का एक ~ 420 एमबी ज़िप स्नैपशॉट भी प्रदान करते हैं ।
आप पहले अपने फ़ॉन्ट चयन को ज़िप्ड पैकेज के रूप में डाउनलोड करते हैं, जो आपको सही प्रकार के फोंट का एक गुच्छा प्रदान करता है। उन्हें कहीं भी सार्वजनिक रूप से कॉपी करें, कहीं आप अपने सीएसएस से लिंक कर सकते हैं।
Google webfont डाउनलोड पेज पर, आपको एक शामिल लिंक मिलेगा, जैसे:
http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal
यह फोंट का एक समूह है, जो @font-face
डिफेक्ट के एक समूह के माध्यम से फोंट को परिभाषित करता है ।
इसे अपने खुद के सीएसएस में कॉपी और पेस्ट करने के लिए एक ब्राउज़र में खोलें और दाएं फ़ॉन्ट फ़ाइल और प्रारूप प्रकारों को शामिल करने के लिए यूआरएल को संशोधित करें।
तो यह:
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
यह बन जाता है:
/* Your local CSS File */
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}
जैसा कि आप देख सकते हैं, इस तरह से अपने सिस्टम पर फोंट की मेजबानी करने का एक नकारात्मक पहलू यह है कि आप अपने आप को सही प्रकार के प्रारूप में प्रतिबंधित करते हैं, जबकि एक्सेसिंग डिवाइस द्वारा Google वेबफॉन्ट सेवा निर्धारित करती है कि कौन से प्रारूप प्रसारित किए जाएंगे।
इसके अलावा, मुझे .htaccess
क्रोम देव टूल्स में पॉप अप करने से त्रुटियों से बचने के लिए माइम प्रकार के फोंट रखने वाली निर्देशिका में एक फ़ाइल जोड़ना पड़ा ।
इस समाधान के लिए, केवल सच्चे प्रकार की आवश्यकता होती है, लेकिन अधिक परिभाषित करने पर चोट नहीं लगती है जब आप अलग-अलग फोंट को शामिल करना चाहते हैं, जैसे font-awesome
।
#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff