CSS का उपयोग करके एक फ़ॉन्ट .ttf कैसे शामिल करें?

Question

मुझे अपने कोड में समस्या है। क्योंकि मैं अपने पृष्ठ के लिए एक वैश्विक फ़ॉन्ट शामिल करना चाहता हूं और मैंने एक .ttf फ़ाइल डाउनलोड की है। और मैं इसे अपने मुख्य सीएसएस में शामिल करता हूं लेकिन मेरा फ़ॉन्ट नहीं बदलता है।

यहाँ मेरा सरल कोड है:

@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    font-family: oswald;
    vertical-align:baseline
} 

मुझे नहीं पता कि मैं कहां गलत था। क्या आप इसमें मेरी सहायता कर सकते है? धन्यवाद।

Comments

क्या आप यह सुनिश्चित करने के लिए अपने ब्राउज़र के कंसोल में नेटवर्क टैब की जांच कर सकते हैं कि फ़ॉन्ट ठीक से लोड है?

— रिंक.टेंटेंड ।6

यहां

— श्री एलियन

क्या आप सुनिश्चित हैं कि आपने फ़ॉन्ट फ़ाइल नाम को सही ढंग से लिखा है? यह नहीं होना चाहिए oswald.regular.ttf?

हां मैंने अपने फॉन्ट का नाम डबल चेक किया

— जेरिएल

@Jerielle तो क्या आपके पास TTF फ़ॉन्ट का विस्तार है tff? क्या आप वाकई इसके बारे में निश्चित हैं?

Answer 1

केवल वेबफ़ॉन्ट के लिए .ttf फ़ाइल प्रदान करना क्रॉस-ब्राउज़र समर्थन के लिए पर्याप्त अच्छा नहीं होगा। वर्तमान में सबसे अच्छा संभव संयोजन इस प्रकार है:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

यह कोड मानता है कि आपके पास .fot, .woff, .ttf और svg प्रारूप आपके लिए वेबफॉन्ट है। इस सभी प्रक्रिया को स्वचालित करने के लिए, आप उपयोग कर सकते हैं: Transfonter.org ।

इसके अलावा, आधुनिक ब्राउज़र .woff फ़ॉन्ट की ओर जा रहे हैं, इसलिए आप शायद ऐसा कर सकते हैं:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  

यहाँ और पढ़ें: http://css-tricks.com/snippets/css/use-font-face/

---

ब्राउज़र समर्थन की तलाश करें: क्या मैं फॉन्टफेस का उपयोग कर सकता हूं

Comments

और यदि आप GFonts का उपयोग कर रहे हैं, तो stackoverflow.com/a/30585464/1727470

— Samy

रास्तों फ़ॉरवर्ड स्लैश के साथ कर रहे हैं - मेरे जैसे जो लोग आसानी से भ्रमित हो के लिएurl('path/to/font.woff')

— wunth

फॉन्ट-फेस नियम में टिप्पणियों के साथ मेरा एक मुद्दा था। टिप्पणियों को नियम के अंत तक ले जाकर समस्या को ठीक किया।

— एरिक डिसूज़ा

मैंने पाया कि जिस फ़ॉन्ट के लिए मैं एक वेब फॉन्ट उत्पन्न करना चाहता था उसे फॉन्ट स्क्विरेल से ब्लैक लिस्ट किया गया था। हालाँकि, transfonter.org ने मेरे लिए काम किया।

— हॉटन

मुझे फॉन्ट गिलहरी से भी परेशानी थी। Font-converter.net के साथ सफलता

— पीटर हेमन

Answer 2

क्या आपने प्रारूप की कोशिश की?

@font-face {
  font-family: 'The name of the Font Family Here';
  src: URL('font.ttf') format('truetype');
}

इस लेख को पढ़ें: http://css-tricks.com/snippets/css/use-font-face/

इसके अलावा, ब्राउज़र पर भी निर्भर हो सकता है।

Answer 3

आप इस तरह से फॉन्ट फेस का उपयोग कर सकते हैं:

@font-face {
  font-family:"Name-Of-Font";
  src: url("yourfont.ttf") format("truetype");
}

Answer 4

मुझे पता है कि यह एक पुरानी पोस्ट है लेकिन इससे मेरी समस्या हल हो गई।

@font-face{
  font-family: "Font Name";
  src: url("../fonts/font-name.ttf") format("truetype");
}

ध्यान दें कि src:url("../fonts/font-name.ttf");हम दो पीरियड का उपयोग रूट डायरेक्टरी में वापस जाने के लिए करते हैं और फिर फोंट फ़ोल्डर में या जहाँ भी आपकी फाइल स्थित है।

आशा है कि यह किसी को लाइन के नीचे मदद करता है :) खुश कोडिंग