%% generate tags start %%
#design
%% generate tags end %%
#software-engineering #design/font
## What is It?
One [[Font#What is a font file exactly? | font file]] give you many different variation. you can filter only variable font on google font.
### Differences between Static and Variable Fonts
Now that we know about Static and Variable Fonts, let's understand the significant differences.
|**Static Fonts**|**Variable Fonts**|
|---|---|
|Static Fonts maintain a different file for each variation.|Variable fonts maintain a single file having all the possible variations.|
|Static Fonts do not support any CSS transition or animation.|Variable fonts support CSS transition and animation.|
|Static Fonts are bound with fixed design limitations.|Variable Fonts offer multiple typographic variations.|
|Static Fonts cannot create a custom font style.|Variable Fonts offer the ability to create a custom font style.|
|Static Fonts do not improve a website's performance.|Variable Fonts enhance the website's performance, responsiveness, and readability.|
To learn more
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">Introducing variable fonts – Fonts Knowledge - Google Fonts</div>
<div class="nifty-link-card-description">Variable fonts remove the explicit distinctions between different weights and styles, and put more typographic control in the hands of the user.</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/introducing_type/introducing_variable_fonts
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://lh3.googleusercontent.com/oj6m2E0mW0Fkzcey9VHHVAuqCv7atfIngzRIjT03EHlU64N0JXcDmWI5iLI')">
</div>
</div>
</a>
</div>
%% run end %%
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://fonts.google.com/knowledge/using_variable_fonts_on_the_web/web_font_comparisons_variable_vs_static")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://fonts.google.com/knowledge/using_variable_fonts_on_the_web/web_font_comparisons_variable_vs_static" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">Web font comparisons: variable vs. static – Fonts Knowledge - Google Fonts</div>
<div class="nifty-link-card-description">How efficient are variable web fonts when compared to static fonts? As with most questions related to typography, the answer—for better or worse—is “it depends.”</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/using_variable_fonts_on_the_web/web_font_comparisons_variable_vs_static
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://lh3.googleusercontent.com/aysP5zxw4bR4Dl-7VXwuU-7-f9k-dRxAs6GksygKoulWnLs1BmevervRGQI')">
</div>
</div>
</a>
</div>
%% run end %%
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://www.browserstack.com/guide/variable-fonts-vs-static-fonts#:~:text=Now%20that%20we%20know%20about,let%27s%20understand%20the%20significant%20differences.&text=Static%20Fonts%20maintain%20a%20different,any%20CSS%20transition%20or%20animation.")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://www.browserstack.com/guide/variable-fonts-vs-static-fonts#:~:text=Now%20that%20we%20know%20about,let%27s%20understand%20the%20significant%20differences.&text=Static%20Fonts%20maintain%20a%20different,any%20CSS%20transition%20or%20animation." target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">Variable Fonts Vs Static Fonts | BrowserStack</div>
<div class="nifty-link-card-description">Learn about the two types of Fonts that are available - Static and Variable Fonts, and their differences and pros/cons over each other.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://browserstack.wpenginepowered.com/wp-content/themes/browserstack/img/favicons/apple-touch-icon.png">
https://www.browserstack.com/guide/variable-fonts-vs-static-fonts#:~:text=Now%20that%20we%20know%20about,let%27s%20understand%20the%20significant%20differences.&text=Static%20Fonts%20maintain%20a%20different,any%20CSS%20transition%20or%20animation.
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://browserstack.wpenginepowered.com/wp-content/uploads/2022/09/Variable-Fonts-Vs-Static-Fonts.png')">
</div>
</div>
</a>
</div>
%% run end %%
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://web.dev/articles/variable-fonts")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://web.dev/articles/variable-fonts" target="_blank">
<div class="nifty-link-card-text" style="width: 100%;">
<div class="nifty-link-card-title line-clamp-2">Introduction to variable fonts on the web | Articles | web.dev</div>
<div class="nifty-link-card-description">How variable fonts work, how typographers implement variable fonts, and how to work with variable fonts in CSS.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://www.gstatic.com/devrel-devsite/prod/v8968f24824135f40588bee141def93b2aa6ccdc7d86f8afca8cdd685d8fa94b7/web/images/touchicon-180.png">
https://web.dev/articles/variable-fonts
</div>
</div>
</a>
</div>
%% run end %%
## How to Check if a File is Variable Font File
### Use Axis-praxis
you can check your font file here to see if it is a variable font
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://www.axis-praxis.org")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://www.axis-praxis.org" target="_blank">
<div class="nifty-link-card-text" style="width: 100%;">
<div class="nifty-link-card-title line-clamp-2">Axis-Praxis: Variable Fonts in the browser</div>
<div class="nifty-link-card-description">Axis-Praxis is a website for playing with OpenType variable fonts in modern browsers.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="">
https://www.axis-praxis.org
</div>
</div>
</a>
</div>
%% run end %%
### Use Fonttools
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/fonttools/fonttools")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/fonttools/fonttools" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - fonttools/fonttools: A library to manipulate font files from Python.</div>
<div class="nifty-link-card-description">A library to manipulate font files from Python. Contribute to fonttools/fonttools 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/fonttools/fonttools
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/c0dabbe5749a81491cd2fe649c1db5fa74bb472a6c5fda5675940fe014ba0d66/fonttools/fonttools')">
</div>
</div>
</a>
</div>
%% run end %%
On macOS, you can use the `fonttools` Python library to examine the font file and determine if it is a variable font or a static font. Here's how you can do it:
1. Install `fonttools` by opening Terminal and running the following command:
```
pip install fonttools
```
2. Once installed, navigate to the directory containing your font file in Terminal using the `cd` command. For example, if your font file is located on the desktop, you can use:
```
cd ~/Desktop
```
3. To check if the font is variable, run the following command, replacing `your_font_file.ttf` with the name of your font file:
```
ttx -o temp.xml your_font_file.ttf
```
4. After running the command, a temporary XML file named `temp.xml` will be generated in the current directory.
5. Open the `temp.xml` file using any text editor or command-line tool. Look for `<table name="name">` within the XML content.
6. Under the `<table name="name">` section, search for `<nameID value="17">` or `<nameID value="18">`. If either of these exists, the font is a variable font.
7. Once you're done, you can delete the `temp.xml` file to clean up the temporary file created earlier.
Using these steps, you can determine whether a font file is a variable font or a static font on macOS.