Failed to compile caused by unexpected token in a folder that i dont know how to reach
Unanswered
TheRetardedGod\off\the\gaps posted this in #help-forum
happened while following along a nextjs 5h tutorial when it went into tailwind configuration. the tutor replaced the standard ghost fonts with "localfont"
and changed the Rootlayout body classNames to
attached u can find an image of the folder structure
ctrl-shift searched for finding that file brought em no results. and i really wanna continue with the tutorial but i have no idea how to fix this error.
can any1 tell me whats going on ? and/or tell me what additional infos are needed
... import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
const workSans = localFont({
src: [
{
path: "/fonts/WorkSans-Thickest.ttf",
weight: "1212",
style: "normal",
},
{
path: "/fonts/WorkSans-SecondSickness.ttf",
weight: "1111",
style: "normal",
},
{ ... and changed the Rootlayout body classNames to
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={workSans.variable}
>
{children}
</body>
</html>
);
}Build Error
Next.js (15.1.7) (Turbopack)
Failed to compile
./app/worksans_851165b9.module.css:95:60
Parsing css source code failed
93 | }
94 | .variable {
> 95 | var(--font-work-sans): 'workSans', 'workSans Fallback';
| ^
96 | }
97 |
98 |
Unexpected token Semicolon at [project]/app/worksans_851165b9.module.css:94:59attached u can find an image of the folder structure
ctrl-shift searched for finding that file brought em no results. and i really wanna continue with the tutorial but i have no idea how to fix this error.
can any1 tell me whats going on ? and/or tell me what additional infos are needed
67 Replies
uhm nope that didnt do anything
Rose-breasted Grosbeak
.variable {
var(--font-work-sans): 'workSans', 'workSans Fallback';
}That is invalid CSS
Check your fonts/ folder for the font.css file
Rose-breasted Grosbeak
.variable property probably requires some extra steps, though, I've never used it. I've used className , try using that.See the usage of fonts components
https://nextjs.org/docs/pages/api-reference/components/font#applying-styles
check if ypu have the .css file for the font inside the fonts/ folder.
When you download and updaload a font locally they come with a css file
Also. if all you want is to continue with the tutorial you could pull a font from google fonts like the Next.js starter project does
When you download and updaload a font locally they come with a css file
Also. if all you want is to continue with the tutorial you could pull a font from google fonts like the Next.js starter project does
i call localfont
the local font function is build like this:
import localFont from "next/font/local";
import "./globals.css";
const workSans = localFont({...
...
adjustFontFallback: false,
variable: "var(--font-mine)", // testen around here with if the name matters - it doesnt
})the local font function is build like this:
import type { CssVariable, Display, NextFont, NextFontWithVariable } from '../types';
type LocalFont<T extends CssVariable | undefined = undefined> = {
src: string | Array<{
path: string;
weight?: string;
style?: string;
}>;
display?: Display;
weight?: string;
style?: string;
adjustFontFallback?: 'Arial' | 'Times New Roman' | false;
fallback?: string[];
preload?: boolean;
variable?: T
declarations?: Array<{
prop: string;
value: string;
}>;
};
export default function localFont<T extends CssVariable | undefined = undefined>(options: LocalFont<T>): T extends undefined ? NextFont : NextFontWithVariable
export { };aehm i
missuderstood something
onst maynesenfont = localFont({
src: [
{
path: "/fonts/maynesenfont-Thickest.ttf",
weight: "1212",
style: "normal",
},
{
path: "/fonts/maynesenfont-SecondSickness.ttf",
weight: "1111",
style: "normal",
},
{
path: "/fonts/maynesenfont-2big2beNormal.ttf",
weight: "1000",
style: "normal",
},
{
path: "/fonts/maynesenfont-BlackWieDieNacht.ttf",
weight: "900",
style: "normal",
},
{
path: "/fonts/maynesenfont-ex-trim-bold.ttf",
weight: "842",
style: "normal",
},
{
path: "/fonts/maynesenfont-bisschenMutig.ttf",
weight: "524",
style: "normal",
},
{
path: "/fonts/maynesenfont-Regular.ttf",
weight: "400",
style: "normal",
},
{
path: "/fonts/maynesenfont-dünnvsthin.ttf",
weight: "200",
style: "normal",
},
{
path: "/fonts/maynesenfont-eventhinner.ttf",
weight: "100",
style: "normal",
},
{
path: "/fonts/maynesenfont-onlyhaveasthinasthinner.ttf",
weight: "50",
style: "normal",
},
{
path: "/fonts/maynesenfont-thinnest.ttf",
weight: "10",
style: "normal",
},
{
path: "/fonts/maynesenfont-doubleThinnest.ttf",
weight: "5",
style: "normal",
},
{
path: "/fonts/maynesenfont-willstartgewichtsein.ttf",
weight: "1",
style: "normal",
},
],
adjustFontFallback: false,
variable: "var(--font-maynesenfont)",but the fonts folder was with the ttfs of the tutorial guy so i have to make
the fonts by my own as well i guess
which doesnt seem related to the error but now i just have an empty fonts folder
whats the best site for font creation
Do you need them to be local?
yea i want them to be mine
interesting
can those ttfs variables be changed dynamically on runtime?
@TheRetardedGod\off\the\gaps can those ttfs variables be changed dynamically on runtime?
Not sure I understand what you are trying to do
2much
aka i wanna start with kinda like a live typing app that emphasises the meaning of whats written in the way the user chooses to display it . the text coming all at once, word by word , when a comma does what etc..
also color changes etc.. and i think thats when custom ttfs like what im reading here on fontsource
seems like a thing i should include from the start
do you want the user to change the font and its style dynamically in run time?
Not sure how I would do that to be fair, first thing that comes to my mind is loading all fonts in the rootlayout and then dynamically apply classNames that apply the transformations per sentence/word level?
Not sure how I would do that to be fair, first thing that comes to my mind is loading all fonts in the rootlayout and then dynamically apply classNames that apply the transformations per sentence/word level?
what is he doint here exactly
when
he has those premade already
did he also use fontsource u think?
Those are just the font variants that come with (almost) any font package.
Maybe even downloaded from Google fonts
When you apply styles such as font-weight what you're doing is making use of the variant asigned to that font weight. If your package does not support it because it wasn't included then you won't see it changing
font-weight : normal or font-weight : 400 => Regular variant
font-weight : 500 or font-weight : 600 => Semibold variant
font-weight : bold or font-weight : 700 => Bold variant
font-weight : 500 or font-weight : 600 => Semibold variant
font-weight : bold or font-weight : 700 => Bold variant
i can still change the color , right?
the opacity
You do that kind of stuff with CSS
color: #123456
so what is this pannel for
For you to see how the fonts will look in different weights and colors
ok i guess open sans fine ?
Yea whatever font you like is fine. If you wanna follow along with the tutorial you can download any font you want or even use the font pulled from google
Instead of downloading the font package and uploading your fonts locally in order to use it, you can pull it from GoogleFonts and let Next.js handle the rest for you
// in your app/layout.tsx
import { Open_Sans } from "next/font/google";
const openSans = Open_Sans({
subsets: ["latin"],
variable: "--font-open-sans",
});If you want only specific weights you can do it like this:
in the timestamp of the video
he puts alot of effort into boilerplaiting aka copy pasting the styles he chose previously 9 times
and give them their weight and style
is it so he can override it more easily in the future?
He's doing all that because he's hosting the fonts locally, when you use the
import { } from "next/font/google"; Next.js handles that for you.localFont pulls the local files from your local FileSystem, each with their font definitions and variants (bold, regular, semibold, thin...) and he's assigning each file to its corresponding weight (300, 400, 500, 700, 900, etc) and it's style ("normal", "italic", etc)those unicode characters
i can just wrap them as a nested child of a form which can be an action and a button as just a tag but even animate them with tailwind
How is this related to the font set up issue? Did you solve that yet?
no im sittign here thinking . and first of all for now i check 2 see if i use the tutorial implementation 1 on 1 if the error goes away then move on
yea the error went away
Depends on what you’re trying to achieve, if I was you when I was starting I would follow the tutorial and hope it all works, now I would try to solve it finding out why it’s indicating an error in the first place
You can use this as an opportunity to learn how next’s font and localFont work too!
You can use this as an opportunity to learn how next’s font and localFont work too!