CSS error: Failed to decode downloaded font - you can do that

The CSS error "Failed to decode downloaded font" can have different causes. In this practical tip, we present the most common ones for the error message before possible solutions.

CSS error Failed to decode downloaded font: Damaged font

The error can have various causes and often only occurs in certain browsers. In many cases, the error indicates an incorrect font.

• It is possible that the font already had an error before it was copied to the server. However, it can also have been damaged during copying.
• To prevent font damage, use online tools such as Transfonter to convert your font into suitable formats.
• When copying to your server, make sure that the font is copied as a binary and not as an ASCI format.
• You may also need to change your FTP client because some clients transmit fonts incorrectly.
• You can also ensure that you are using correct fonts by importing your fonts from the FontLibrary or from Google.

CSS error due to incorrect font integration

Another typical error that leads to the warning "Failed to decode downloaded font" is the incorrect incorporation of the font.

• Fonts must be included in the CSS style sheet using the "src" tag.
• If possible, the format of the font should also be defined. In the following example for the integration of the "webfont" font, the relevant code sections are marked in bold.
• @ font-face {font-family: 'MyWebFont'; src: url ('webfont.eot'); / * IE9 Compat Modes * / src: url ('webfont.eot? #Iefix') format ('embedded-opentype'), / * IE6-IE8 * / url ('webfont.woff2') format ('woff2'), / * Super Modern Browsers * / url ('webfont.woff') format ('woff'), / * Pretty Modern Browsers * /
  url ('webfont.ttf') format ('truetype'), / * Safari, Android, iOS * / url ('webfont.svg # svgFontName') format ('svg') ; / * Legacy iOS * /}

Another practical tip will tell you how to get the name of a font that you do not know.