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

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

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

समस्या कहां है?

क्रॉस-ब्राउज़र संगतता के लिए केवल .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 */
}

यह कोड मानता है कि आपके वेब फ़ॉन्ट के लिए .eot, .woff, .ttf और SVG प्रारूप हैं। फ़ॉन्ट स्क्विरेल या ट्रांसफ़ॉन्टर जैसे वेब फ़ॉन्ट जनरेटर इस प्रक्रिया को स्वचालित कर सकते हैं। &&&]

@फ़ॉन्ट-फेस { फ़ॉन्ट-फ़ैमिली: 'माईवेबफ़ॉन्ट'; स्रोत: url('myfont.woff') प्रारूप('woff'), /* क्रोम 6, फ़ायरफ़ॉक्स 3.6, IE 9, सफ़ारी 5.1 */ यूआरएल('myfont.ttf') फॉर्मेट('ट्रूटाइप'); /* क्रोम 4, फायरफॉक्स 3.5, ओपेरा 10, सफारी 3—5 */ }

@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 */
}

क्या मैं फ़ॉन्टफेस का उपयोग कर सकता हूं: https://caniuse.com/fontface