Incorporating the Amazon Ember font as a custom font in my application has been a bit of a challenge. I followed the necessary steps of setting up a font.ts file in the lib folder and exporting the font correctly, as guided by various blog posts. Initially, the font worked perfectly on my development server. However, upon building the app, I encountered some issues. When accessing localhost:3000, the CSS failed to load. Upon navigating to the auth page, the CSS loaded properly. Returning to the home page "/", the app started working fine again, but the font failed to load, displaying a systemUi font style that is unused in my project, even as a fallback where I have specified arial and sans-serif.
Here is a snippet of my code:
import localFont from "next/font/local";
const Ember = localFont({
src: [
{
path: "../app/AmazonEmber_Th.ttf",
weight: "100",
style: "normal",
},
{
path: "../app/AmazonEmber_Lt.ttf",
weight: "200",
style: "normal",
},
// Additional font paths
],
variable: "--font-ember",
display: "swap",
fallback: ["sans-serif", "arial"],
});
export { Ember };
// Tailwind config file
// Additional code snippet
It's worth noting that I work with group routes, each having its own layout, rather than a default root layout. One peculiar observation is that the font loads properly at "/", while the CSS doesn't, and when accessing the auth/login page, the CSS loads but the font doesn't.