Failed to decode downloaded font on lambda production app

问题

I am trying to deploy an angular web app to amazon lambda with the serverless module. When I run the app in local everything works fine. The problem comes up when I deploy the app to AWS. Once the app is deployed, the app is working fine but some fonts appear to be missing and do not display correctly. This are the warnings that come up in the Chrome developer console:

Failed to decode downloaded font: <URL>
OTS parsing error: Size of decompressed WOFF 2.0 is less than compressed     size
OTS parsing error: incorrect entrySelector for table directory
OTS parsing error: incorrect file size in WOFF header
OTS parsing error: incorrect entrySelector for table directory

Here is my environment information:

 Your Environment Information ---------------------------
     Operating System:          win32
     Node Version:              10.16.3
     Framework Version:         1.54.0
     Plugin Version:            3.1.2
     SDK Version:               2.1.2
     Components Core Version:   1.1.1
     Components CLI Version:    1.4.0

Intuiton tells me that there is something wrong with webpack. So here is the webpack.server.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    server: './server.ts',
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  externals: [/(node_modules|main\..*\.js)/,],
  output: {
    libraryTarget: 'commonjs2',
      path: path.join(__dirname, 'dist/'),
    filename: '[name].js'
  },
  resolve: {
    modules: [
      /* assuming that one up is where your node_modules sit,
         relative to the currently executing script
      */
      path.join(__dirname, '/node_modules')
    ]
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  },
  optimization: {
    minimize: false
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
}

Some help would be very much appreciated :)

回答1:

You need to properly provide each possible browser support for those fonts:

@font-face {
    font-display: swap;
    font-family: 'YourFontFamilyName';
    /* IE9 Compat Modes */
    src: url('/path/to/yourfont.eot');
    /* IE6-IE8 */
    src: url('/path/to/yourfont.eot?#iefix') format('embedded-opentype'),
        /* Super Modern Browsers */ url('/path/to/yourfont.woff2') format('woff2'),
        /* Pretty Modern Browsers */ url('/path/to/yourfont.woff') format('woff'),
        /* Safari, Android, iOS */ url('/path/to/yourfont.ttf') format('truetype'),
        /* Legacy iOS */ url('/path/to/yourfont.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Also, on your lambda function, replace the 'application/x-font-ttf' line by these: