How to Include a .ttf Font in CSS for Optimal Cross-Browser Compatibility?

Including a .ttf Font in CSS: Comprehensive Guide

To incorporate a custom font into your web page, CSS utilizes the @font-face rule. However, simply including a .ttf file may not suffice for cross-browser compatibility.

Optimal Font File Combination

For optimal compatibility, it is recommended to use multiple font file formats:

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

This code assumes you have .eot, .woff, .ttf, and svg font formats. To simplify the process, use a web font generator like Font Squirrel or Transfonter.

Modern Approach: WOFF Font Type

Modern browsers support the .woff font type. You can simplify your code to:

<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 guide: https://css-tricks.com/snippets/css/using-font-face/
• Browser support: https://caniuse.com/fontface

The above is the detailed content of How to Include a .ttf Font in CSS for Optimal Cross-Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!