To learn more about font:
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://fonts.google.com/knowledge")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://fonts.google.com/knowledge" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">Fonts Knowledge - Google Fonts</div>
<div class="nifty-link-card-description">Making the web more beautiful, fast, and open through great typography</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://www.gstatic.com/images/branding/product/2x/google_fonts_96dp.png">
https://fonts.google.com/knowledge
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/opengraph_knowledge.png')">
</div>
</div>
</a>
</div>
%% run end %%
## Where You Can Find Fonts?
1. Google font → [Browse Fonts - Google Fonts](https://fonts.google.com/)
2. Github, if you search font on github you will find many
3. [Free Fonts | 110,000+ Font Downloads | FontSpace](https://www.fontspace.com/)
## A List of Good Font
### Geist
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/vercel/geist-font")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/vercel/geist-font" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - vercel/geist-font</div>
<div class="nifty-link-card-description">Contribute to vercel/geist-font development by creating an account on GitHub.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/vercel/geist-font
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/2f3e35ea6b26717276207ea9bcef1b568a1f556fdee3b552ee1fe129e2d27bb6/vercel/geist-font')">
</div>
</div>
</a>
</div>
%% run end %%
### IA Writer
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/iaolo/iA-Fonts")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/iaolo/iA-Fonts" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - iaolo/iA-Fonts: Free variable writing fonts from iA</div>
<div class="nifty-link-card-description">Free variable writing fonts from iA. Contribute to iaolo/iA-Fonts development by creating an account on GitHub.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/iaolo/iA-Fonts
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/c9425bdf1196cfb85a74dbb811b4d1b179c47fb3c37226e7b11bd172d1ed0711/iaolo/iA-Fonts')">
</div>
</div>
</a>
</div>
%% run end %%
### Inter
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/rsms/inter")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/rsms/inter" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - rsms/inter: The Inter font family</div>
<div class="nifty-link-card-description">The Inter font family. Contribute to rsms/inter development by creating an account on GitHub.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/rsms/inter
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://repository-images.githubusercontent.com/101033179/d7f411b3-ceac-4da4-8e97-0e792a9ff098')">
</div>
</div>
</a>
</div>
%% run end %%
### JetBrain Font
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/JetBrains/JetBrainsMono")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/JetBrains/JetBrainsMono" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - JetBrains/JetBrainsMono: JetBrains Mono – the free and open-source typeface for developers</div>
<div class="nifty-link-card-description">JetBrains Mono – the free and open-source typeface for developers - GitHub - JetBrains/JetBrainsMono: JetBrains Mono – the free and open-source typeface for developers</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/JetBrains/JetBrainsMono
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://repository-images.githubusercontent.com/173314762/b6526a80-cab4-11ea-8935-40b78dabfa18')">
</div>
</div>
</a>
</div>
%% run end %%
### [[Github Monaspace]]
![[Github monaspace]]
### Zpix
low pixel font
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/SolidZORO/zpix-pixel-font")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/SolidZORO/zpix-pixel-font" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - SolidZORO/zpix-pixel-font: Zpix (最像素) is a pixel font (像素字体), supporting English, Traditional Chinese, Simplified Chinese and Japanese.</div>
<div class="nifty-link-card-description">Zpix (最像素) is a pixel font (像素字体), supporting English, Traditional Chinese, Simplified Chinese and Japanese. - GitHub - SolidZORO/zpix-pixel-font: Zpix (最像素) is a pixel font (像素字体), supporting Engl...</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/SolidZORO/zpix-pixel-font
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/1421e13709a9fd1b23ff3de56c8b06d1904267e2d8977934f6942825d6be359a/SolidZORO/zpix-pixel-font')">
</div>
</div>
</a>
</div>
%% run end %%
## What is a font file exactly?
>[!faq] The history of font file?
The history of font file formats dates back several decades and has evolved along with advancements in technology and design. There are several font file types, but the most common ones are TrueType (.ttf), OpenType (.otf), PostScript Type 1 (.pfb/.pfm), Web Open Font Format (.woff/.woff2), and Scalable Vector Graphics Fonts (.svg). Here's a brief overview of these types and their differences:
1. TrueType (.ttf): Developed by Apple and Microsoft, TrueType fonts use a quadratic Bézier curve to represent glyphs. They became widely used in the 1990s due to their cross-platform compatibility and flexibility.
2. OpenType (.otf): OpenType is an extension of TrueType and PostScript font formats. It offers advanced typographic features, international language support, and additional design options. OpenType fonts can be either TrueType-based or PostScript-based.
3. PostScript Type 1 (.pfb/.pfm): PostScript Type 1 fonts were the first widely used digital outline font format. They use Bézier curves to define letter shapes and were popular in the pre-TrueType era. Type 1 fonts consist of two files: a printer font binary (.pfb) and a metrics file (.pfm).
4. Web Open Font Format (.woff/.woff2): WOFF is a font format specifically optimized for web usage. It compresses font data and includes metadata, making it more efficient for online delivery. WOFF2 is a newer version that offers improved compression compared to WOFF.
5. Scalable Vector Graphics Fonts (.svg): SVG fonts use an XML-based format to describe individual glyphs using vector shapes. They are typically used for web-based vector graphics and allow for resolution-independent scaling.
The existence of multiple font files is primarily due to historical development, varying technical requirements, and specific platform compatibility. Different font file types offer distinct features, capabilities, and optimizations that cater to different design and usage scenarios.
> [!faq] why do we need one font file per variation?
One font file per variation is needed because each variation represents a distinct style or design of the font. Font variations include attributes such as weight (e.g., bold or light), width (e.g., condensed or expanded), slant (e.g., italic or oblique), and others. Each variation requires separate font data and encoding within its own file so that specific styles can be accurately represented and rendered by software. Having separate files allows for flexibility and efficient management of different font variations.
but you can use [[Variable Fonts]] to rule them all.