Why Does My .ttf Font Not Display Properly in My Website?

Incorporating a .ttf Font via CSS

Issue:

In an attempt to implement a global font for a web page, a .ttf file was included in CSS. However, the font fails to display as intended.

Code Snippet:

<code class="css">@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

html, body, div, span, ... {
    font-family: oswald;
}</code>

Root Cause:

In web font implementation, solely providing a .ttf file is insufficient for cross-browser compatibility.

Solution:

To support compatibility across different browsers, a combination of multiple font formats is recommended:

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

Alternative Approach:

For improved browser support, modern browsers recommend opting for .woff font format:

<code class="css">@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 */
}</code>

Additional Resources:

• CSS Tricks: Using @font-face: https://css-tricks.com/snippets/css/using-font-face/
• Can I Use fontface: https://caniuse.com/?feat=fontface

The above is the detailed content of Why Does My .ttf Font Not Display Properly in My Website?. For more information, please follow other related articles on the PHP Chinese website!