Next.js Discord

Discord Forum

Font compatibility

Answered
Goldstripe sardinella posted this in #help-forum
Open in Discord
Goldstripe sardinellaOP
Hello,

The issue I'm facing is that for my portfolio, I want to use the GillSans font, which is the font of the Gameboy logo, and given the theme of the portfolio, it's really important to me!

The portfolio is built with Next.js, and to manage this font, which is not included in Next as a font variable, I use localFont, where I specify each variant of my font, with 3 sources each time for the 3 font formats: .woff, .woff2, ttf.

GillSans is normally supported by Safari (iOS/macOS), but when I open my portfolio on Safari or Arc mobile, I don't see my font 😒, and as far as I remember, Safari supports the woff2 format.

If anyone has a clue!

RepoGit: https://github.com/remyShift/Portfolio_GameBoy_Next.git

It's in the layout.tsx file, and the fonts are in the public folder.

Thanks in advance.
Answered by joulev
const mono = localFont({
  src: [
    { path: "../../.fonts/ia-writer-mono/regular.woff2", weight: "normal", style: "normal" },
    { path: "../../.fonts/ia-writer-mono/bold.woff2", weight: "bold", style: "normal" },
    { path: "../../.fonts/ia-writer-mono/italic.woff2", weight: "normal", style: "italic" },
    { path: "../../.fonts/ia-writer-mono/bolditalic.woff2", weight: "bold", style: "italic" },
  ],
  display: "swap",
})
View full answer

43 Replies

Goldstripe sardinellaOP
and to see the portfolio : https://remyshift.dev
why are u loading the same font three times tho?
i would suggest only loading it via .woff
or ttf
@gin why are u loading the same font three times tho?
Goldstripe sardinellaOP
tough the browser will choose the good source for better compatibility
i think i’ve tried with ttf only and doesnt work too i will try again
on my mac i’ve GillSans installed and its in .otf and doesnt work too
Goldstripe sardinellaOP
Bump 🙏🏼
@joulev this is gill sans, no? it loads fine for me
Goldstripe sardinellaOP
it look like too be that, can you screen me the « développeur full stack » on the top side of portfolio
and wich navigator do you use ?
cuz for me on arc mobile / safari mobile and desktop it doesnt work
@Goldstripe sardinella it look like too be that, can you screen me the « développeur full stack » on the top side of portfolio
joulev
for that one you need to add the class font-gillSans for the font to be applied
@joulev for that one you need to add the class `font-gillSans` for the font to be applied
Goldstripe sardinellaOP
it is normaly
joulev
if you want Gill Sans to be the "default" font applied everywhere unless overridden, add the font-gillSans class to <html> or <body>
Goldstripe sardinellaOP
yeah ik but ive applied it everywhere i need it manualy
but i will do that
cuz sometime its bold, sometimes just italic, sometime both
for example the date on the about page on the top right of each card must be italic
the « développeur fullstack » must be on bold italic etc
@Goldstripe sardinella cuz sometime its bold, sometimes just italic, sometime both
joulev
if you want to load bold and italic fonts for font-gillSans as well you need to declare them in the same gillSans object
const gillSans = localFont({
    src: [
        {
            path: '../../public/fonts/GillSans/GillSansC.woff',
            weight: '400',
            style: 'normal',
        },
        {
            path: '../../public/fonts/GillSans/GillSansC.woff2',
            weight: '400',
            style: 'normal',
        },
        {
            path: '../../public/fonts/GillSans/GillSansC.ttf',
            weight: '400',
            style: 'normal',
        },
        {
            path: '../../public/fonts/GillSans-Bold/GillSansC-Bold.woff',
            weight: '700',
            style: 'normal',
        },
        {
            path: '../../public/fonts/GillSans-Bold/GillSansC-Bold.woff2',
            weight: '700',
            style: 'normal',
        },
        {
            path: '../../public/fonts/GillSans-Bold/GillSansC-Bold.ttf',
            weight: '700',
            style: 'normal',
        }
    ],
    variable: "--font-gillSans",
});
Goldstripe sardinellaOP
okay so i dont need to redeclare a constant for each variant ?
joulev
no
Goldstripe sardinellaOP
then how in my tailwind config
i specify for example : font-gillSansBoldItalic : —var-fontgillSans
joulev
just remove the variants and use font-gillSans everywhere
Goldstripe sardinellaOP
and to specify i want it bold or italic
how*
@Goldstripe sardinella and to specify i want it bold or italic
joulev
font-bold
italic
tailwind classes
Goldstripe sardinellaOP
okay okay
make sens
i will try that tonight thx
@joulev `font-bold` `italic` tailwind classes
Goldstripe sardinellaOP
style must change no ?
@Goldstripe sardinella style must change no ?
joulev
what do you mean?
Goldstripe sardinellaOP
like not each time but for each specific style
bold italic works ?
joulev
weight: '700',
style: 'italic'
joulev
const mono = localFont({
  src: [
    { path: "../../.fonts/ia-writer-mono/regular.woff2", weight: "normal", style: "normal" },
    { path: "../../.fonts/ia-writer-mono/bold.woff2", weight: "bold", style: "normal" },
    { path: "../../.fonts/ia-writer-mono/italic.woff2", weight: "normal", style: "italic" },
    { path: "../../.fonts/ia-writer-mono/bolditalic.woff2", weight: "bold", style: "italic" },
  ],
  display: "swap",
})
Answer
Goldstripe sardinellaOP
make sens
thx a lot