Skip to content

Instantly share code, notes, and snippets.

@don1138

don1138/better-helvetica.css

Created June 11, 2013 21:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save don1138/5761108 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save don1138/5761108 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Better Helvetica Font Stack
Raw
better-helvetica.css
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
@don1138
Copy link
Author

don1138 commented Oct 9, 2025

Réponse rédigée par ChatGPT:

Les polices listées (HelveticaNeue-Light, Helvetica Neue, etc.) sont des polices système macOS/iOS et ne nécessitent aucune importation externe. Elles sont déjà présentes sur les machines Apple, et la cascade (Helvetica, Arial, sans-serif) assure la compatibilité sur Windows et Linux.

Cependant, si vous veux garantir le même rendu sur tous les appareils, tu dois fournir la police via un CDN ou un fichier local. Voici les deux méthodes valides pour un projet Next.js :

1. Utiliser une police système (aucune importation)

Ajoute simplement ton CSS global (dans globals.css ou app/globals.css) :

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

Aucune autre action n’est requise. Sur macOS et iOS, “Helvetica Neue” s’affichera nativement. Sur d’autres plateformes, la pile tombera sur Helvetica ou Arial.

2. Fournir un équivalent web (recommandé pour cohérence)

“Helvetica Neue” n’a pas de version libre sous licence web. Utilise un équivalent Google Fonts comme Inter, Roboto, ou Noto Sans, puis définis une cascade avec ton ancien stack.

Dans app/layout.tsx (ou _app.tsx si tu n’utilises pas le dossier app):

import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'], weight: ['300'] })

export const metadata = {
  title: 'Mon App',
}

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Et dans globals.css :

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

3. Héberger un fichier local (optionnel)

Si tu disposes d’un fichier .woff2 ou .ttf de Helvetica Neue sous licence web :

@font-face {
  font-family: "Helvetica Neue";
  src: url("/fonts/HelveticaNeue-Light.woff2") format("woff2"),
       url("/fonts/HelveticaNeue-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Dépose le fichier dans public/fonts/.

Résumé :

  • macOS : aucun import requis.
  • Cross-platform : utiliser Inter/Roboto via next/font/google.
  • Identité visuelle stricte : héberger la police localement.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment