HttpError 400: error adding custom fonts in Theme.tsx

When someone tries to use a font like the example below,

Example

please look at this doc: https://www.deco.cx/docs/en/performance/medias/fonts#custom-fonts:

Family: Your Font


<style>
  @font-face {
        font-family: 'Your Font';
        font-style: normal;
        font-weight: weighthere;
        font-display: swap;
        src: url(/live/invoke/website/loaders/asset.ts?src=https://sualoja.deco.site/minha_fonte.ttf) format('truetype');
    }
</style>

the font may not be displayed, if you try to access the URL for the font in the repository, it shows a 400 error and the font is not downloaded

apps/utils/fetch.ts

Line 50 in b780e67

throw new HttpError(response.status, `${input}`);

In the code below when STALE is removed, the font is downloaded and displayed on the website:

note: may or may not work with some fonts

apps/website/loaders/asset.ts

Lines 1 to 22 in b780e67

    
           import { fetchSafe, STALE } from "../../utils/fetch.ts"; 
        
           interface Props { 
        
             /** 
        
              * @description Asset src like: https://fonts.gstatic.com/... 
        
              */ 
        
             src: string; 
        
           } 
        
           const loader = async (props: Props) => { 
        
             const original = await fetchSafe(props.src, STALE); 
        
             const response = new Response(original.clone().body, original); 
        
             response.headers.set( 
        
               "cache-control", 
        
               "public, s-maxage=15552000, max-age=15552000, immutable", 
        
             ); 
        
             return response; 
        
           }; 
        
           export default loader;

At first it appears to be a cache-related problem

	import { fetchSafe, STALE } from "../../utils/fetch.ts";

	interface Props {
	/**
	* @description Asset src like: https://fonts.gstatic.com/...
	*/
	src: string;
	}

	const loader = async (props: Props) => {
	const original = await fetchSafe(props.src, STALE);

	const response = new Response(original.clone().body, original);
	response.headers.set(
	"cache-control",
	"public, s-maxage=15552000, max-age=15552000, immutable",
	);

	return response;
	};

	export default loader;