Fix @font-face OpenType Embedding Permission Check: Ensure Installable Permissions for Web Fonts

When using custom fonts on your website or application, it is essential to ensure that the OpenType fonts have the correct embedding permissions. This guide will walk you through the process of verifying and setting installable permissions for web fonts using the @font-face CSS rule. By following this guide, you'll resolve any issues related to the OpenType embedding permission check and ensure a smooth user experience across different browsers and devices.

Table of Contents

Understanding OpenType Embedding Permissions

OpenType fonts have various embedding permissions that dictate how they can be used and distributed. These permissions are defined in the font's metadata and can be one of four levels:

  1. No Embedding: The font cannot be embedded in any document or website.
  2. Preview & Print: The font can be embedded, but it will only be used for printing and generating previews. It cannot be used for editing.
  3. Editable: The font can be embedded and used for editing, but it cannot be installed on the user's system.
  4. Installable: The font can be embedded and used for all purposes, including installation on the user's system.

For web fonts, it is crucial to have the "Installable" permissions set to ensure compatibility across different browsers and platforms. To do this, you will need to check the font's embedding permissions and make any necessary changes.

Back to Top ↑

Checking Font Embedding Permissions

To check the embedding permissions of an OpenType font, you can use a font editor or a specialized tool like TTF Edit or FontForge. Here's a step-by-step guide on how to check the embedding permissions using FontForge:

  1. Download and install the FontForge application.
  2. Open the font file (.otf or .ttf) in FontForge.
  3. Go to Element > Font Info.
  4. Navigate to the OS/2 tab.
  5. Under the Embedding section, you will see the current embedding permissions.

Back to Top ↑

Fixing Font Embedding Permissions

If your font's embedding permissions are not set to "Installable," you will need to change them. Here's how to fix the permissions using FontForge:

  1. Follow the steps above to check the font's embedding permissions.
  2. In the OS/2 tab, set the Embedding dropdown to "Installable (0)".
  3. Click OK to save the changes.
  4. Go to File > Generate Fonts to save the modified font file.
  5. Replace the original font file with the newly generated one on your website or application.
  6. Update your @font-face CSS rule to reference the updated font file.

Now your font should have the correct embedding permissions, ensuring compatibility across different browsers and platforms.

Back to Top ↑


How do I know if my web font has the correct embedding permissions?

To ensure your web font has the correct embedding permissions, you can use a font editor like FontForge to inspect the font's metadata. Check the OS/2 tab and ensure the Embedding dropdown is set to "Installable (0)".

Can I use a different font editor to modify font embedding permissions?

Yes, you can use any font editor that supports modifying OpenType font metadata, such as TTF Edit or Glyphs. The process may vary slightly, but the key is to locate the font's embedding permissions and set them to "Installable."

How do I add a custom font to my website using the @font-face CSS rule?

To add a custom font to your website using the @font-face CSS rule, follow these steps:

  1. Upload the font file to your server.
  2. In your CSS file, add a @font-face rule, specifying the font-family, src, and font-weight properties:
@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font-file.woff2') format('woff2'),
       url('path/to/font-file.woff') format('woff');
  font-weight: 400;
  1. Use the custom font by setting the font-family property on the desired elements:
body {
  font-family: 'CustomFont', sans-serif;

Are there any restrictions on using copyrighted fonts on my website?

Yes, using copyrighted fonts without permission can lead to legal issues. Always ensure you have the appropriate license or permission to use a font on your website or application. Many font foundries and websites offer licenses specifically for web use, so make sure you acquire the correct license before using a font.

Why do some browsers still display the default font despite correct embedding permissions?

Some browsers have built-in security features that prevent web fonts from being loaded if they do not have the correct CORS (Cross-Origin Resource Sharing) headers. To resolve this issue, ensure your server is configured to serve web fonts with the appropriate CORS headers.

Back to Top ↑

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.