Question 11593 in Shopify Question posted in
The Shopify help center can be found here.

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

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?

Tags:

3

Answers


  1. 0

    Add the code below, replacing highlighted elements of the code with actual data.

    Font name > the name of the font. If the font has more than one word in its name, it will need "quotation marks";

    Filename > the name of the file that was just uploaded to your theme including the file extension, for example, cosmic_sans_bold.ttf.

    Format > the format of the font that was uploaded. For example, for Athena.ttf, this would be "TrueType".

    @font-face {
    font-family: "Font name";
    src: url({{ "Filename" | asset_url }}) format("Format");
}

    Available font formats: "woff", "woff2", "truetype", "opentype", "embedded-opentype" and "svg".

    Login or Signup to reply.
  2. 0

    Fonts in your theme

    Non-admin

    Add the font files to the assets directory.

    Create a @font-face CSS rule so that you can reference the font. Use the asset_url filter to output the URL for the font file:

    @font-face {
   font-family: "Font name";
   src: url("{{ '[font-file-name]' | asset_url }}") format("[font-format]");
}

    Shopify admin

    Upload the font files to the Settings > Files section of the Shopify admin.

    Create a @font-face CSS rule so that you can reference the font. Use the file_url filter to output the URL for the font file:

    @font-face {
   font-family: "Font name";
   src: url("{{ '[font-file-name]' | file_url }}") format("[font-format]");
}
    Login or Signup to reply.
  3. 0

    Otfs parsing errors usually indicate, your font files are not valid.

    The aforementioned font file is definitely corrupt/not valid

    Your @font-face rules looks fine.

    Although, transfonter is usually pretty reliable, you might have applied options (subsetting, metrics adjustments), that made the file structure invalid.

    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.

    So you should contact the shopify support.
    Maybe there’s a bug in the file uploader (e.g. converting encodings).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search