Search code examples
cssfontsshopifyfont-facegoogle-fonts

Failed to decode downloaded font, but using correct CSS Font Face

I am using the following code to import the google Font "Syncopate" into my shopify site:

@font-face {
    font-family: 'Syncopate';
    font-weight: 400;
    font-style: normal;
    src: url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.eot'); /* IE9 Compat Modes */
    src: url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.woff') format('woff'), /* Pretty Modern Browsers */
         url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.svg#Syncopate') format('svg'); /* Legacy iOS */
  }

I downloaded the .tff file from google fonts and created the font-face with transformer.org. In the console of greenjet.at I now get the following errors:

  • Failed to decode downloaded font (woff2, woff, ttf)
  • OTS parsing error: Size of decompressed WOFF 2.0 is less than compressed size
  • OTS parsing error: incorrect file size in WOFF header
  • OTS parsing error: FFTM: misaligned table

When implementing it with the google font link it works perfectly:

<link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Syncopate">

But it is necessary due to privacy issues with google to load the font locally. What is the error here? Is the shopify asset file uploader maybe using ASCII instead of the binary file transfer causing this error?

Solution

  • OTS parsing errors indicate, your font files are not valid

    The aforementioned font file is definitely corrupt/not valid

    On the other hand:

    • if the @font-face rule had syntax errors – we wouldn't see this parsing error!
    • same applies to incorrect paths/URLs – they either fail silently or return e.g a 404 error in dev tools console

    Your @font-face rules is fine.

    Font file corruption

    • file conversions: e.g ttf to woff2 or subsetting.
      Although, transfonter is quite reliable, you might have applied options (subsetting, metrics adjustments), that made the file structure invalid – dedicated font converters like this may aslo strip font features like variable font-axis or colored font data.
    • incorrect transfer modes: This is also a common problem with misconfigured web bundlers (e.g. webpack). A font file must be passed as binary data.

    Instead of converting the master truetype files, try to get all font-files via google web font helper..

    Then try to upload/replace the font files.
    Debugging: You should be able to download the new truetype font and doubleclick it in your Desktop environment (win, MacOs, Linux).
    If your OS still bugging you about an invalid format - there's something wrong with the shopify uploader.

    Contact shopify support

    Maybe there's a bug in the file uploader (e.g. converting encodings).