Giter Site home page Giter Site logo

geist-font's Introduction

The words “Geist” written as ASCII art in Geist Mono resembling Geist Sans. After this is a demonstration of Geist Sans in regular and bold face that shows alphanumeric characters and some symbols, notably a symbol for Shift, a right arrow, and the Vercel logo. Below is some text written in Geist - a heading: “Geist truly represents the coding and design spirit within Vercel's creator community.”, one paragraph: “At Vercel, we've developed Geist, a typeface specifically designed for developers and designers. We began by creating a monospace version that prioritized readability and seamlessly integrated into coding environments. After perfecting the monospace variant, we expanded Geist into a Sans version, adding versatility to its capabilities.”, and another next to it: “Geist embodies our design principles of simplicity, minimalism, and speed, drawing inspiration from the renowned Swiss design movement. With precision, clarity, and functionality at its core, Geist enhances the visual experience of developers and designers, empowering them to effectively communicate their ideas.” The words “Geist” written as ASCII art in Geist Mono resembling Geist Sans. After this is a demonstration of Geist Sans in regular and bold face that shows alphanumeric characters and some symbols, notably a symbol for Shift, a right arrow, and the Vercel logo. Below is some text written in Geist - a heading: “Geist truly represents the coding and design spirit within Vercel's creator community.”, one paragraph: “At Vercel, we've developed Geist, a typeface specifically designed for developers and designers. We began by creating a monospace version that prioritized readability and seamlessly integrated into coding environments. After perfecting the monospace variant, we expanded Geist into a Sans version, adding versatility to its capabilities.”, and another next to it: “Geist embodies our design principles of simplicity, minimalism, and speed, drawing inspiration from the renowned Swiss design movement. With precision, clarity, and functionality at its core, Geist enhances the visual experience of developers and designers, empowering them to effectively communicate their ideas.”

Geist Sans & Geist Mono

Geist is a new font family for Vercel, created by Vercel in collaboration with Basement Studio.

Geist Sans is a sans-serif typeface designed for legibility and simplicity. It is a modern, geometric typeface that is based on the principles of classic Swiss typography. It is designed to be used in headlines, logos, posters, and other large display sizes.

Geist Mono is a monospaced typeface that has been crafted to be the perfect partner to Geist Sans. It is designed to be used in code editors, diagrams, terminals, and other textbased interfaces where code is represented.

Installation

Download the latest release from the releases page and install the fonts on your system.

License

The Geist font family is free and open sourced under the SIL Open Font License.

Inspiration

Geist has been influenced and inspired by the following typefaces: Inter, Univers, SF Mono, SF Pro, Suisse International, ABC Diatype Mono, and ABC Diatype. We thank the creators of these typefaces for their craft.

geist-font's People

Contributors

almonk avatar guidoferreyra avatar jamessingleton avatar johnphamous avatar mybearworld avatar nzakicodes avatar satelllte avatar ypessoa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

geist-font's Issues

Capital ẞ doesn't look much like a usual capital ẞ

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Usually, the capital ẞ is differentiated from ß via two things. Geist doesn't do either correctly:

  1. A wider character. Geist doesn't have much of a difference between ẞ and ß here.
  2. A less curly body. While Geist does do that, it makes the bizarre decision to also flatten the top. This is very unusual and while readable, really does not look much like ẞ.

Steps to Reproduce:

  1. Type a string with the capital ẞ like ICH WOHNE IN GIEẞEN.

Expected Behavior:
Geist has a more conventional ẞ.

Screenshots:
Geist Sans:
Screenshot of the capital ẞ and its lowercase variant ß from the Geist web page. The capital ẞ has a slightly less curly body, which is usual. However, it is not wider than its lowercase variant, and the top is flat.

Open Sans:
Screenshot of the capital ẞ and its lowercase variant ß as used in the Open Sans font. The capital looks like the conventional ẞ, with a curly top, but a bit longer than ß and less curly in the body.

Environment (please complete the following information):

  • OS: N/A
  • Software: N/A
  • Version of the Font: 1.0

Additional Context:
None

Italic Support for Geist Mono

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Geist Mono currently does not support italics, a feature commonly found in many code editor themes. I suggest considering the addition of italics support to Geist Mono, which could contribute to an even more enhanced coding experience for users.

Missing characters: Λ/λ (lambda)

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:

Neither font contains uppercase or lowercase lambda characters. Many characters in the Greek alphabet are used in computer science and computer science adjacent fields, so I feel they would be good additions to these fonts. The only characters from the Greek alphabet in the fonts currently are uppercase omega and lowercase pi.

[Mono] Incompetibale `─` and `-` with fallbacked box-darwing characters

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Example usage: ├──, commonly found in the output of tree command.

In this case, Geist Mono doesn't have a character, so it falls back to OS monospace font. Yet, the recent update seems to have changed the style of - and , causing it to misalign with the fallback character

Steps to Reproduce:

  1. Make use of the Geist Mono font and type ├──

Expected Behavior:
├── should be aligned

Screenshots:
image

Environment (please complete the following information):

  • OS: MacOS
  • Software: Edge
  • Version of the Font: 1.1.0

Additional Context:
This issue is not observed in 1.0.1

[Question] Using icons

Hi folks, thanks for the new font, I love it!

I have one quick question: how can I use the icons you mentioned?

Thanks!

Geist_Font_—_Vercel

Default font weight too thin?

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
The default font weight seems very thin. I tried in VScode and Obsidian; both cases just switching to the fonts and no other changes resulted in a weight that seemed close to a browser system font of 200 or 300 which seems quite thin for default text in most applications.

Steps to Reproduce:

  1. set either font as the default font of an application like vscode or obsidian
  2. observe text

Expected Behavior:
Got very thin font weight as default. Was expecting something similar to other fonts.

Screenshots:
image
image

Environment (please complete the following information):

  • MacOS sonoma
  • Obsidian Version 1.4.16 (Installer 1.4.14)

Add Geist to Google Fonts

This is a great project and I would love to see it available on Google Fonts .

Me or anyone else with experience onboarding fonts to Google Fonts would be happy to help move this through the onboarding pipeline, there is already an issue in the Google Fonts Git repository asking for it to be included in the collection.

A guide covering all the technical requirements for inclusion in the Google Fonts catalog is available here, but the technical details can be handled by the people onboarding the fonts.

'fi' ligature has very large spacing

Font Name (Geist Sans/Geist Mono):

  • Geist Sans

Description of the Issue:

CleanShot.2023-11-09.at.14.55.35.mp4

Steps to Reproduce:

  1. Try entering a word with 'fi' in Figma
  2. Enable/disable ligatures

Expected Behavior:
I would think if there's no actual join between fi then the spacing should remain consistent across ligatures/no ligatures.

Alternatively, is there supposed to be a join between them?

The preferred weight for variable fonts should be 400, not 100.

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:

The preferred weight of Geist Mono Variable is 100, not 400. As a result, most software uses the incorrect default font weight.

Steps to Reproduce:

  1. In "Icons View" of Finder, the weight used for preview is Thin, rather than Regular. (See ❶ in screenshots.)
  2. In "Font Book" App, the weight used for preview is also Thin, but it's displayed as "Regular". (See ❷) If I open the drop-down menu, I will find that Thin is not listed; instead, Regular appears in its place. (See ❸)
  3. After installing the font, if I set the default font in VSCode to Geist Mono Variable without enabling any other options (such as font weight or variable font settings), the default font weight will also be Thin. (See ❹)
  4. When you open a software that allows font setting, such as Text Edit, you won’t find Regular font weight listed in the macOS system font menu either. (See ❺ and ❻)

Expected Behavior:

In the scenarios mentioned above, the default font weight should be 400.

Screenshots:

Here are screenshots mentioned above.

image image image image image image

Environment (please complete the following information):

  • OS: macOS
  • Software: *
  • Version of the Font: 1.1.0

Additional Context:

N/A

Request italic font files

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
I want to use the Geist Sans font in react-pdf. My use case requires italics to enable them I need to register the font file which it doesn't exist. My current fallback is to define the italic variant as a non-italic variant, otherwise the pdf generation fails.

Screenshots:

    Pdf.Font.register({
      family: "Geist",
      fonts: [
        { src: path.resolve(fontPath, "Geist-Regular.woff2"), fontWeight: "normal" },
        { src: path.resolve(fontPath, "Geist-Regular.woff2"), fontWeight: "normal", fontStyle: "italic" }, // Not actually italic
        { src: path.resolve(fontPath, "Geist-Bold.woff2"), fontWeight: "bold" },
        { src: path.resolve(fontPath, "Geist-Bold.woff2"), fontWeight: "bold", fontStyle: "italic" },  // Not actually italic
      ]
    });

Environment (please complete the following information):

  • OS: MacOS
  • Software: react-pdf
  • Version of the Font: 1.0

Request for ligature character for `???`

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Please provide a clear and concise description of the issue.

Steps to Reproduce:

N/A

Expected Behavior:

??? can be used for marking methods that remain to be implemented in Scala. Geist Mono includes ligature character for ?? only and applies it to the first two ? of ???, which looks very inconsistent.

Screenshots:

image

Environment (please complete the following information):

  • OS: macOS
  • Software: Visual Studio Code
  • Version of the Font: 1.1.0

Additional Context:

N/A

Add powerline characters

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Please provide a clear and concise description of the issue.

Steps to Reproduce:

  1. Set font in a powerline terminal
  2. warp > settings > appearance > select GeistMono font

Expected Behavior:
Special characters to show

Screenshots:
JetBrainsMono Powerline terminal(👍🏼)
Screenshot 2023-12-06 at 9 57 56 am

GeistMono Powerline terminal(👎🏼)
Screenshot 2023-12-06 at 9 58 14 am

Environment (please complete the following information):

  • OS: MacOS
  • Software: Warp + ohmyzsh + agnoster theme
  • Version of the Font: 1.1.0

Additional Context:
A list of known powerline fonts => https://github.com/powerline/fonts

v1.002 Yen ¥ bars are offset in Thin

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Version: Geist.v1.002.(2023-11-07) from v1.0.1 release
Files: GeistVariableVF.ttf and Geist-Thin.otf

The horizontal bars on the Yen symbol (00A5) are offset to the right in the Thin master.

The image below is from the Thin static font.
Looks the same in the VF Thin instance.

Yen-bars-offset

Support 100-900 scale for variable font weight in VSCode (Geist Mono)

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
It seems like the 100-900 font weight scale doesn't work corretly in VSCode.

Steps to Reproduce:

  1. In user settings.json set "editor.fontWeight": 1, - you get a very thin font weight.
  2. In user settings.json set "editor.fontWeight": 100, - you get a thicker font weight than 1.
    Test with other values as needed.

Expected Behavior:
Every 100 increment value between "editor.fontWeight": 100, and "editor.fontWeight": 900, should have a different font weight going from very thin to very bold.

Screenshots:
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

  • OS: Windows 10 64bit
  • Software: VSCode
  • Version of the Font: 1.0

Additional Context:
Add any other context about the problem here.

Capital 'o' and zero characters are impossible to tell which is which.

Is there a design choice to why these two are essentially the same design? As a developer using geist mono, I feel like there should be a different design for the zero char to tell the difference without a second look.

I provided what the two characters look like side-to-side:

Screenshot 2023-10-28 at 12 40 59 PM

[Question] Language coverage

It is stated that Vercel covers 32 languages, is it possible to get a list of these languages? Also, do you plan on covering more languages in the future?

Typescript generic issue

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • [+] Geist Mono Regular

Description of the Issue:
When I try to use generic in typescript, i can't go between arrows as it be taken as one symbol.

Steps to Reproduce:

  1. as in screenshot, just type any interface with generic type, for example FC<>

Expected Behavior:
I expected to have an opportunity to go between these arrows and write my interface, but the cursor just goes left or right, but not in the middle

Screenshots:
Geist bug

If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

  • OS: MacOS
  • Version of the Font: 1.0.1

Additional Context:
Font looks great, this bug is the only bad a thing, imo of course

Add Geist to Google Fonts

This is a great project and I would love to see it available on Google Fonts .

Me or anyone else with experience onboarding fonts to Google Fonts would be happy to help move this through the onboarding pipeline, there is already an issue google/fonts#6922 in the Google Fonts Git repository asking for it to be included in the collection.

A guide covering all the technical requirements for inclusion in the Google Fonts catalog is available here, but the technical details can be handled by the people onboarding the fonts.

Inappropreate fallback font for Geist Mono

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Currently, Geist Mono makes use of adjustFontFallback from next/font, which defaults to Arial. Yet, for a monospace font, this makes absolutely no sense and may result in undesired text display behavior.

Steps to Reproduce:

  1. Import GeistMono and make use of it in a Next.js project

Expected Behavior:
Geist Mono should make use of a monospace font as the fallback font. It can be done by adding the following options:

diff --git a/node_modules/geist/dist/font.js b/node_modules/geist/dist/font.js
index c1d4da3..ad07bdd 100644
--- a/node_modules/geist/dist/font.js
+++ b/node_modules/geist/dist/font.js
@@ -100,4 +100,6 @@ export const GeistMono = localFont({
     },
   ],
   variable: "--font-geist-mono",
+  adjustFontFallback: false,
+  fallback: ['monospace'],
 });

Screenshots:
image

Environment (please complete the following information):

  • OS: Windows
  • Software: Next.js 14
  • Version of the Font: 1.0

Additional Context:
N/A

Inconsistencies in Safari Version 17.1 (19616.2.9.11.7) for weights 600, 700, 800 and 900

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Please provide a clear and concise description of the issue.
Inconsistencies in Safari Version 17.1 (19616.2.9.11.7) for weights 600, 700, 800 and 900 compared to other browsers.

image

Steps to Reproduce:

  1. Add the following markup to a page in your Next.js app:
<div>
        <p className="font-thin">The quick brown fox jumps over the lazy dog</p>
        <p className="font-extralight">The quick brown fox jumps over the lazy dog</p>
        <p className="font-light">The quick brown fox jumps over the lazy dog</p>
        <p className="font-normal">The quick brown fox jumps over the lazy dog</p>
        <p className="font-medium">The quick brown fox jumps over the lazy dog</p>
        <p className="font-semibold">The quick brown fox jumps over the lazy dog</p>
        <p className="font-bold">The quick brown fox jumps over the lazy dog</p>
        <p className="font-extrabold">The quick brown fox jumps over the lazy dog</p>
        <p className="font-black">The quick brown fox jumps over the lazy dog</p>
      </div>
  1. Compare the page in different browsers.

Expected Behavior:
A clear and concise description of what you expected to happen.
I expect all the font weight to be consistent. The result should look like this:

Chrome:
image

Firefox:
image

Edge:
Sorry, I'm on a Mac at the moment so can't take screenshot.

Screenshots:
If applicable, add screenshots to help explain your problem.
See above.

Environment (please complete the following information):

  • OS: [e.g. Windows, MacOS, Linux]
    MacBook Pro, 13-inch, M1, 2020
    macOS 14.1.1 (23B81)

  • Software: [e.g. Adobe Illustrator, Microsoft Word]
    Safari Web Browser.

  • Version of the Font: [e.g. 1.0]
    "geist": "1.1.0",

Additional Context:
Add any other context about the problem here.

I've been reading about the difference browser rendering inconsistencies but then tested with Inter font which is quite popular and that one looks OK in Safari. Screenshot in Safari:

image

Inter looks equally good in Firefox and Chrome on my Mac.

NPM Readme docs named import statement error for GeistSans and GeistMono

Font Name (Geist Sans/Geist Mono):

  • [*] Geist Sans
  • [*] Geist Mono

Description of the Issue:
The Readme on NPM shows the following font import line under "With TailwindCSS" for the app/layout.js file:

import { GeistSans, GeistMono } from 'geist/font/sans'

Should this not be:

import { GeistSans, GeistMono } from 'geist/font';

License

Hi,
Would you mind changing the OFL license to the version without "reserved font name" so it can be added to Google Fonts? Thanks!
NB: I'm not affiliated with Google

Spacing issues

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Too much space between certain characters; extra looks like ex tr a, for example. Baking is bak ing while korn works fine.

Steps to Reproduce:
Type out words like ‘extraño,’ ‘Wikinger,’ ‘buzzing.’ (xt/xx/ki/kk/kp/zz et c.)

Expected Behavior:
Visually pleasing spacing.

Environment (please complete the following information):

  • Software: Font Gauntlet
  • Version of the Font: 1.002

Additional Context:
I suggest using Hoefler’s proof to identify more issues—I am just a dude who likes typefaces.

Geist fonts don't work on `pages` router, only on `app` router

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:

Geist fonts work only on app router but not on pages router. Both Geist Sans and Mono show the following error on pages router:

"SyntaxError: Cannot use import statement outside a module"

Steps to Reproduce:

  1. Create a new Next.js 14 app with pages router
  2. npm i geist@latest and import the font in _app.tsx as docs mention
  3. That's it, you see the error immediately

Pages Router (errors):
Open in StackBlitz

App Router (works fine):
Open in StackBlitz

Expected Behavior:

Geist font should work, as expected, like it does with app router.

Screenshots:

image

Environment:

  • OS: MacOS
  • Software: Using NodeJS runtime and npm as package manager
  • Version of the Font: 1.1.0 (latest at time of writing)

Additional Context:

15+ people from issue #13 faced the same issue mentioned here. But the issue was closed due to a temporary workaround found where adding transpilePackages: ["geist"] in next.config.js fixed the issue. But this fix wasn't documented or mentioned anywhere in docs - nor is it an actual fix for the issue.

StackBlitz links use Next.js 13.5.1, but the issue is the same and persists.

Languages: 32, But Which?

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:

The homepage states that the font supports 32 languages, but there is no accompanying list to specify which languages are supported. Additionally, it's unclear if the font supports CJK (Chinese, Japanese, Korean) characters.

Request Greek support

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Provide support for the Greek alphabet. The contemporary monotonic Greek alphabet should be fine for most use cases. 😊

I can see that the lowercase Greek letter Pi π and the capital Greek letter Omega Ω are already present.

Request Vietnamese support

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Provide support for the Vietnamese alphabet. Most of Vietnamese characters are Roman-based so it still able to display most of it but there still some special ones like ổ, ề, ẫ, ớ,...

Support customizing the `variable` when using each font

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Each font emits it's own variable, --font-geist-sans and --font-geist-mono. We would like to override those to something custom. In our case, we need them to be more generic, such as --font-headings.

Steps to Reproduce:

  1. Use the fonts.

Expected Behavior:
Including the font allows for manual overriding the variable.

Additional Context:
I understand I can manually use localFont and build up the configuration, this would be more of a convenience feature.

Using with Tailwind CSS docs leads to Cumulative Layout Shift

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
When using the docs supplied here https://www.npmjs.com/package/geist?activeTab=readme#with-tailwind-css there is an initial flash of rendering a fallback font which causes a Cumulative Layout Shift from initially rendering the screen. It's not great for my lighthouse score :)

Reverting to https://www.npmjs.com/package/geist?activeTab=readme#app-router solves it.

Steps to Reproduce:

  1. Follow the https://www.npmjs.com/package/geist?activeTab=readme#with-tailwind-css
  2. See layout shift on load (disable cache and run on slow network to se layout shift on text)
  3. Follow https://www.npmjs.com/package/geist?activeTab=readme#app-router to see it working fine

Expected Behavior:
I expect the tailwind css docs to recommend a way that works without cumulative layout shift (i.e. it should work like the app-router docs)

Environment (please complete the following information):

  • OS: MacOS
  • Software: NextJS 14
  • Version of the Font: 1.0.1

Doesn't work in Storybook

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Importing the font into Storybook breaks it. Importing fonts via next/font works fine, however.

Steps to Reproduce:

  1. Create a Next app with Storybook
  2. Create a rootCss variable
import { GeistMono } from 'geist/font/mono'
import { GeistSans } from 'geist/font/sans'

import cs from '~/app/_lib/react/cs' // a utility to join classes

const rootCss = cs(
  GeistSans.variable,
  GeistMono.variable,
  'text-foreground max-w-full bg-background font-sans antialiased',
)

export default rootCss
  1. Use it in Storybook's preview:
import type { Preview } from '@storybook/react'

import '~/app/globals.css'

const preview = {
  decorators: [
    (Story) => <div className={rootCss}><Story/></div>
  ],
  // ...
} satisfies Preview

export default preview
  1. Have an error:
next_font_local__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function
TypeError: next_font_local__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function
    at ./node_modules/.pnpm/[email protected][email protected]/node_modules/geist/dist/mono.js (http://localhost:6006/vendors-node_modules_pnpm_babel_runtime_7_23_5_node_modules_babel_runtime_helpers_esm_defineP-4ea83d.iframe.bundle.js:19620:73)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:301:21)
    at ./app/_lib/react/root-css.tsx (http://localhost:6006/main.iframe.bundle.js:593:73)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:301:21)
    at ./.storybook/decorators/theme/index.tsx (http://localhost:6006/main.iframe.bundle.js:292:81)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:301:21)
    at ./.storybook/preview.tsx (http://localhost:6006/main.iframe.bundle.js:529:75)

Expected Behavior:
Should work

Screenshots:
image

Environment (please complete the following information):

  • OS: N/A
  • Software: Next.js+Storybook
  • Version of the Font: 1.2.0

(Glitch) Strage font resize in Nextjs when using router.refresh()

Font Name (Geist Sans/Geist Mono):

  • [✅] Geist Sans
  • [✅] Geist Mono

Description of the Issue:
When router.refresh() is used, there is a strange resize on font, kind of like a glitch.. but at the end, it goes to normal size.

Steps to Reproduce:

  1. add geist font using tailwind in Nextjs
  2. use router.refresh()

Expected Behavior:
No glitch

Screenshots:
https://github.com/vercel/geist-font/assets/77352432/ea85bec2-f76d-4120-9ae0-c2f1feb7110d

Environment (please complete the following information):

  • OS: MacOS
  • Framework: Nextjs14
  • Version of the Font: 1.0.0

Allow options of `GeistSans` and `GeistMono` to be customizable

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

This is an enhancement instead of a bug. It would be great if we could customize the options of GeistSans and GeistMono. e.g. may be we can do

import localFont from 'next/font/local';

// since LocalFont is not exported from next/font/local
type LocalFont = Parameters<typeof localFont>[0];

// omitting src, clearly we don't want that part to be customizable.
export const GeistMono = (options?: Omit<LocalFont, 'src'>) =>
  localFont({
    src: './fonts/geist-mono/GeistMono-Variable.woff2',
    variable: '--font-geist-mono',
    adjustFontFallback: false,
    fallback: [
      'ui-monospace',
      'SFMono-Regular',
      'Roboto Mono',
      'Menlo',
      'Monaco',
      'Liberation Mono',
      'DejaVu Sans Mono',
      'Courier New',
      'monospace',
    ],
    ...options,
  });

export const GeistSans = (options?: Omit<LocalFont, 'src'>) =>
  localFont({
    src: './fonts/geist-sans/Geist-Variable.woff2',
    variable: '--font-geist-sans',
    ...options,
  });

Then we can allow users to customize the options they way they want, e.g. for my case, I want to prevent the monospace font from being preloaded.

const geistMono = GeistMono({ preload: false });

This syntax also matches that from next/font/google.

Variable font weight scales are incorrect.

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Variable font weight scales are incorrect. Font loads up as bold when font-weight is normal.

Steps to Reproduce:

  1. Use @font-face to set up any of the variable font files. GeistVF.ttf / GeistVF.woff2 / GeistMonoVF.woff2 / GeistMonoVF.ttf
@font-face {
    font-family: "Geist";
    src: url("../fonts/GeistVF.ttf");
}
  1. Setup font with tailwind
    theme: {
      extend: {
          fontFamily: {
              geist: ["Geist"],
  1. Use for an element.
    className={"font-geist"}

Expected Behavior:
Font should respect font-weight and rendered accordingly.

Screenshots:
Screenshot 2023-10-28 at 2 34 30 AM

Environment:

  • OS: MacOS
  • Software: React + Tailwind
  • Version of the Font: 1.0

Incorrect Slovak Diacritics

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Letters Ľ, ľ, ď and ť combine a letter with an acute accent instead of an apostrophe. Additionally, in Geist Sans these letters have inconsistent spacing: the apostrophe-like caron should not introduce extra space, but instead should hang over the following letter.

Screenshots:
image
image

Geist-font works only in Next.js

Hi! It's a good font, thank you, and it's a bummer we can't get to use the package on non-Next.js libraries/frameworks.
Is there a way geist-font can be used in React & others, or it's not just supported?
Thanks.

No Cyrillic support

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
I think it is quite self-descriptive. There is no Cyrillic support.

Screenshots:
image

Environment (please complete the following information):

  • OS: MacOS Sonoma 14.1 (23B73)
  • Software: Google Chrome
  • Version of the Font: 1.0

Additional Context:
Great work on the font! 🤩
However Cyrillic is a gamechanger for many people around the world :)
I personally try to never use different fonts for Cyrillic and Latin versions of my websites and a font supporting both is the first thing I look at.

Adding License.txt to Subsequent Releases

Hi, to preface this isn't a bug per se with the font project:

I'd like to suggest adding the LICENSE.txt file to all subsequent releases of Geist-font as it helps your users abide by your licensing terms and prevents any accidental or intentional license violations.

I checked and saw that both Source archives [zip and tar] contains the license agreement.
So it's just Geist.zip and Geist.Mono.zip that you might want to consider adding in the license before releasing

Thanks!

Non-variable fonts in ttf

Currently released font files only have ttf for variable fonts and otf for non-variable fonts. can you release a non-variable ttf font?

otf rendering on Windows is bad in many cases. I try to use ttf as much as possible, but am currently forced to use otf for things that don't support variable font

Error: @next/font/local failed to run or is incorrectly configured

Font Name (Geist Sans/Geist Mono):

  • [ X] Geist Sans
  • [ X] Geist Mono

Description of the Issue:
Running nextjs 13.5.6 (or 14) and get the following after installing the font. Inter font via next/font works correctly

Error: @next/font/local failed to run or is incorrectly configured.
If you just installed @next/font, please try restarting next dev and resaving your file.

A restart does not resolve

Steps to Reproduce:

  1. install geist font
  2. add to layout
  3. run dev

Expected Behavior:
Font works

Environment (please complete the following information):

  • Nextjs 13.5.6
  • node 21
  • pnpm
  • geist 1.0
  • turborepo

Geist Mono not recognised as 'Fixed Width' on macOS

Font Name:
Geist Mono

Steps to Reproduce:

  1. Install .otf files on macOS
  2. Filter Font Book by fixed width fonts
  3. Geist Mono is not listed

Expected Behavior:
Geist Mono should be listed here as it is a monospaced font

Environment (please complete the following information):

  • OS: macOS
  • Version of the Font: 1.0

Some Geist Mono symbols are too small to read

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
I was trying to use Geist Mono in my VSCode & Terminal, and I notices that some symbols like (* ^ ` ') are too small to read, everything almost looks like a small dot from a distance (Refer to the screenshot below)
image

Compared to my previous font (Cascadia Code PL)
image

And I'm using 12 as my font size.

Steps to Reproduce:

  1. Install Geist Mono
  2. Set the editor font to "Geist Mono"

Expected Behavior:
Those symbols should be easy to read.

Environment (please complete the following information):

  • OS: MacOS
  • Software: VSCode, Terminal
  • Version of the Font: 1.0.1

Inconsistent font variables

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
Should GeistMono variable include fallback fonts (ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace) when GeistSans doesn't? When using with tailwindcss as told in the next/font docs it'll also add fallback fonts and there will be duplicates.

Steps to Reproduce:
In layout.tsx:

import { GeistMono } from "geist/font/mono";
import { GeistSans } from "geist/font/sans";

// ...
<body className={cn(GeistSans.variable, GeistMono.variable)}>

In tailwind.config.ts:

import { fontFamily } from "tailwindcss/defaultTheme";

// ...
fontFamily: {
  sans: ["var(--font-geist-sans)", ...fontFamily.sans],
  mono: ["var(--font-geist-mono)", ...fontFamily.mono],
},

Expected Behavior:
No ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace in the GeistMono variable.

Screenshots:
image

Environment (please complete the following information):

  • OS: Linux
  • Version of the Font: 1.1.0

SyntaxError: Cannot use import statement outside a module

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:

project_root/node_modules/geist/dist/font.js:1
import localFont from "@next/font/local";
^^^^^^

SyntaxError: Cannot use import statement outside a module

Environment (please complete the following information):

  • OS: macOS

Additional Context:
My package.json does not include type: module

Next 13: Error After Import Geist Font -> SyntaxError: Cannot use import statement outside a module

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:
A compilation error occurred after installing and importing the Geist font.

Steps to Reproduce:

  1. Install Geist font, using npm i geist
  2. Import GeistSans or GeistMono in the top level at _app.tsx
  3. Use GeistSans.className at <main className="GeistSans.className" />

Screenshots:

Error:

image

My _app.tsx file.

image

Environment (please complete the following information):

  • OS: [MacOS]
  • Version of the Font: [1.0.0]

Additional Information

  • Next.js Version: [13.1.1]
  • React Version: [18.2.0]

Rename variable fonts

Font Name (Geist Sans/Geist Mono):

  • Geist Sans
  • Geist Mono

Description of the Issue:

Rename variable fonts so that they can be installed alongside TTF.

This is useful when you want to use it in applications that does not support variable fonts, while being able to use them in applications that do.

On macOS it will show up as duplicate due to naming conflicts.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.