vercel / geist-font Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://vercel.com/font
License: SIL Open Font License 1.1
Home Page: https://vercel.com/font
License: SIL Open Font License 1.1
Nerd Fonts is heavily used to generate patched programming fonts with many useful icons. After reading the license, I think it's something that's permitted and would benefit many folks.
I made a PR upstream to the Nerd Fonts repo to add & patch Geist Mono: ryanoasis/nerd-fonts#1398
the font is blur in Rider
Font Name (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:
GeistMono
and make use of it in a Next.js projectExpected 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'],
});
Environment (please complete the following information):
Additional Context:
N/A
Font Name (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:
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):
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.
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?
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
Font Name (Geist Sans/Geist Mono):
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:
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
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
Additional Context:
Font looks great, this bug is the only bad a thing, imo of course
Font Name (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.
Environment (please complete the following information):
Font Name (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.
Steps to Reproduce:
<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>
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:
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:
Inter looks equally good in Firefox and Chrome on my Mac.
Font Name (Geist Sans/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:
Expected Behavior:
Font works
Environment (please complete the following information):
Font Name (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:
Environment (please complete the following information):
Additional Context:
N/A
Font Name (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):
Additional Context:
My package.json
does not include type: module
Font Name (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
.
Font Name (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.
Font Name (Geist Sans/Geist Mono):
Description of the Issue:
Please provide a clear and concise description of the issue.
Steps to Reproduce:
Expected Behavior:
Special characters to show
Screenshots:
JetBrainsMono Powerline terminal(👍🏼)
GeistMono Powerline terminal(👎🏼)
Environment (please complete the following information):
Additional Context:
A list of known powerline fonts => https://github.com/powerline/fonts
Font Name (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.
Font Name (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:
"editor.fontWeight": 1,
- you get a very thin font weight."editor.fontWeight": 100,
- you get a thicker font weight than 1.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):
Additional Context:
Add any other context about the problem here.
Hi. I want to use this font with @vercel/og
. Can someone tell me is there a way?
Font Name (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.
Font Name (Geist Sans/Geist Mono):
Description of the Issue:
I think it is quite self-descriptive. There is no Cyrillic support.
Environment (please complete the following information):
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.
Font Name (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:
Expected Behavior:
Got very thin font weight as default. Was expecting something similar to other fonts.
Environment (please complete the following information):
Font Name (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)
Compared to my previous font (Cascadia Code PL)
And I'm using 12 as my font size.
Steps to Reproduce:
Expected Behavior:
Those symbols should be easy to read.
Environment (please complete the following information):
Font Name (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.
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.
Font Name (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):
Font Name (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:
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
import type { Preview } from '@storybook/react'
import '~/app/globals.css'
const preview = {
decorators: [
(Story) => <div className={rootCss}><Story/></div>
],
// ...
} satisfies Preview
export default preview
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
Environment (please complete the following information):
Font Name (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:
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.
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"
pages
routernpm i geist@latest
and import the font in _app.tsx
as docs mentionGeist font should work, as expected, like it does with app
router.
NodeJS
runtime and npm
as package manager1.1.0
(latest at time of writing)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.
Font Name (Geist Sans/Geist Mono):
Description of the Issue:
It would be helpful to have a CSS file to load the fonts. I want to use it from a CDN like unpkg.com (like so https://unpkg.com/browse/[email protected]/dist/font.css) where font.css loads the font files.
Font Name (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.
Font Name (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):
Additional Context:
I suggest using Hoefler’s proof to identify more issues—I am just a dude who likes typefaces.
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
Font Name (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.
Font Name (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';
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.
Font Name (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.
Font Name (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:
Expected Behavior:
In the scenarios mentioned above, the default font weight should be 400.
Screenshots:
Here are screenshots mentioned above.
Environment (please complete the following information):
Additional Context:
N/A
Font Name (Geist Sans/Geist Mono):
Description of the Issue:
Steps to Reproduce:
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?
Font Name (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 ổ, ề, ẫ, ớ,...
Font Name (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:
Expected Behavior:
No glitch
Screenshots:
https://github.com/vercel/geist-font/assets/77352432/ea85bec2-f76d-4120-9ae0-c2f1feb7110d
Environment (please complete the following information):
Font Name (Geist Sans/Geist Mono):
Description of the Issue:
A compilation error occurred after installing and importing the Geist font.
Steps to Reproduce:
npm i geist
<main className="GeistSans.className" />
Screenshots:
Error:
My _app.tsx file.
Environment (please complete the following information):
Additional Information
Font Name (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:
@font-face {
font-family: "Geist";
src: url("../fonts/GeistVF.ttf");
}
theme: {
extend: {
fontFamily: {
geist: ["Geist"],
className={"font-geist"}
Expected Behavior:
Font should respect font-weight and rendered accordingly.
Environment:
It would be great if this could be added to https://github.com/Homebrew/homebrew-cask-fonts for easy installation for those that use Homebrew.
Font Name (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:
├──
Expected Behavior:
├──
should be aligned
Environment (please complete the following information):
Additional Context:
This issue is not observed in 1.0.1
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!
Font Name (Geist Sans/Geist Mono):
Description of the Issue:
Usually, the capital ẞ is differentiated from ß via two things. Geist doesn't do either correctly:
Steps to Reproduce:
ICH WOHNE IN GIEẞEN
.Expected Behavior:
Geist has a more conventional ẞ.
Environment (please complete the following information):
Additional Context:
None
Font Name:
Geist Mono
Steps to Reproduce:
Expected Behavior:
Geist Mono should be listed here as it is a monospaced font
Environment (please complete the following information):
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.