How to Include Custom Fonts Using .ttf and Ensure Cross-Browser Compatibility?

Including Custom Fonts Using .ttf and CSS

You want to incorporate a .ttf font into your web page but encounter difficulties. Let's examine your code:

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

Where's the Issue?

Including only a .ttf file is insufficient for cross-browser compatibility. To cover a wide range of browsers, you need multiple font formats.

Comprehensive Solution:

<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 formats for your web font. Web font generators like Font Squirrel or Transfonter can automate this process.

Modern Approach:

Modern browsers prefer .woff fonts, so you can also simplify your code:

<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/fontface

The above is the detailed content of How to Include Custom Fonts Using .ttf and Ensure Cross-Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!