How to Ensure Cross-Browser Compatibility When Embedding .otf Fonts?

Embedding .otf Fonts for Cross-Browser Compatibility

For web-based font trials, .otf fonts present a challenge in achieving compatibility across various browsers. This article provides guidance on embedding .otf fonts and explores alternative solutions for ensuring broad browser support.

Embedding .otf Fonts with @font-face

To embed an .otf font using @font-face, utilize the following syntax:

<code class="css">@font-face {
    font-family: FontName;
    src: url("FontFile.otf") format("opentype");
}</code>

While .otf fonts now have improved browser compatibility, older Safari, Android, and iOS browsers may require alternate font types.

Alternative Font Types for Broad Browser Support

For a wider range of browser support, consider using WOFF (Web Open Font Format) and TTF (TrueType Font) font types. WOFF is supported by major desktop browsers, while TTF acts as a fallback for older browsers.

<code class="css">@font-face {
    font-family: FontName;
    src: url("FontFile.woff") format("woff"), url("FontFile.ttf") format("truetype");
}</code>

Comprehensive Browser Support

To cater to the widest possible browser compatibility, including legacy browsers, additional font types may be required.

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

refer to the following resources for browser support details:

• [@font-face Browser Support](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/Syntax)
• [EOT Browser Support](https://www.zachleat.com/web/eot-support/)
• [WOFF Browser Support](https://www.caniuse.com/woff)
• [TTF Browser Support](https://www.caniuse.com/ttf)
• [SVG-Fonts Browser Support](https://www.caniuse.com/svg)

The above is the detailed content of How to Ensure Cross-Browser Compatibility When Embedding .otf Fonts?. For more information, please follow other related articles on the PHP Chinese website!