Oliver/amazon-transcreation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: use next/font/local for fonts and basePath for logo URLs

Browse source 
Fonts and logos were not loading on the /amazon-transcreation subpath
deployment because CSS @font-face used absolute /fonts/ paths and Image
src used bare /amazon-logo.svg — neither respects Next.js basePath.

Migrated fonts to next/font/local (bundles into _next/static with
correct assetPrefix) and prepend NEXT_PUBLIC_BASE_PATH to logo srcs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DJP 2026-04-10 13:25:25 -04:00
parent 4d4f853792
commit 1d94bfc005
5 changed files with 20 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
frontend/src/app/globals.css
View file

@ -2,62 +2,7 @@
@tailwind components;
@tailwind utilities;
/* Amazon Ember Font Faces */
@font-face {
font-family: "Amazon Ember";
src: url("/fonts/AmazonEmber_Lt.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Amazon Ember";
src: url("/fonts/AmazonEmber_Rg.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Amazon Ember";
src: url("/fonts/AmazonEmber_RgIt.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Amazon Ember";
src: url("/fonts/Amazon-Ember-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Amazon Ember";
src: url("/fonts/AmazonEmber_Bd.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Amazon Ember";
src: url("/fonts/AmazonEmber_BdIt.ttf") format("truetype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Amazon Ember";
src: url("/fonts/AmazonEmber_He.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* Amazon Ember fonts loaded via next/font/local in layout.tsx */
@layer base {
:root {

17
frontend/src/app/layout.tsx
View file

@ -1,6 +1,21 @@
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
const amazonEmber = localFont({
src: [
{ path: "../../public/fonts/AmazonEmber_Lt.ttf", weight: "300", style: "normal" },
{ path: "../../public/fonts/AmazonEmber_Rg.ttf", weight: "400", style: "normal" },
{ path: "../../public/fonts/AmazonEmber_RgIt.ttf", weight: "400", style: "italic" },
{ path: "../../public/fonts/Amazon-Ember-Medium.ttf", weight: "500", style: "normal" },
{ path: "../../public/fonts/AmazonEmber_Bd.ttf", weight: "700", style: "normal" },
{ path: "../../public/fonts/AmazonEmber_BdIt.ttf", weight: "700", style: "italic" },
{ path: "../../public/fonts/AmazonEmber_He.ttf", weight: "900", style: "normal" },
],
variable: "--font-amazon-ember",
display: "swap",
});
export const metadata: Metadata = {
title: "Amazon Transcreation Platform",
description: "AI-powered transcreation and localization platform",
@ -12,7 +27,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<html lang="en" className={amazonEmber.variable}>
<body className="antialiased">{children}</body>
</html>
);

2
frontend/src/app/login/page.tsx
View file

@ -47,7 +47,7 @@ export default function LoginPage() {
{/* Logo */}
<div className="flex justify-center mb-8">
<Image
src="/amazon-logo.svg"
src={`${process.env.NEXT_PUBLIC_BASE_PATH || ""}/amazon-logo.svg`}
alt="Amazon"
width={150}
height={50}

2
frontend/src/components/layout/Sidebar.tsx
View file

@ -63,7 +63,7 @@ export function Sidebar() {
<div className="p-4 pb-2">
<div className="bg-white rounded-lg p-3 flex items-center justify-center">
<Image
src="/amazon-logo.svg"
src={`${process.env.NEXT_PUBLIC_BASE_PATH || ""}/amazon-logo.svg`}
alt="Amazon"
width={120}
height={40}

2
frontend/tailwind.config.ts
View file

@ -57,7 +57,7 @@ const config: Config = {
},
},
fontFamily: {
sans: ["Amazon Ember", "system-ui", "sans-serif"],
sans: ["var(--font-amazon-ember)", "Amazon Ember", "system-ui", "sans-serif"],
},
borderRadius: {
lg: "var(--radius)",