Loading .ttf fonts from server

Problem

Browser is unable to decode custom font. The setup is as follows:

@font-face {
  font-family: "FinkHeavy";
  font-weight: 400;
  font-style: normal;
  src: url("/FinkHeavy.ttf") format("truetype");
  font-display: swap;
}

Even though Chrome reportedly can support .ttf fonts with @font-face, it still threw a decoding error

Solution

Convert the font to .woff and .woff2 formats. The Transfonter tool can do the conversion

@font-face {
  font-family: "FinkHeavy";
  font-weight: 400;
  font-style: normal;
  src: url("/FinkHeavy.woff") format("woff"),
			 url("/FinkHeavy.woff2") format("woff2");
  font-display: swap;
}

Using .woff and .woff2 offers modern browser support. Including .ttf offers slightly deeper browser support according to CSS-Tricks

References

• CSS-Tricks: Using @font-face
• CSS-Tricks: Understanding Web Fonts and Getting the Most Out of Them
• Stackoverflow: Chrome Failed to decode downloaded font OTS parsing error: post: Failed to parse table
• MDN web docs: @font-face
• Can I Use: TTF/OTF - TrueType and OpenType font support