feat(rfc-font-loading-strategy): conclude to using variable fonts in …

…both (#1840)

* feat: conclude to using variable fonts in both

* feat: update compressed size

* feat: update font names

rfcs/2023-11-08-font-loading-strategy.md

@@ -167,7 +167,7 @@ TASA Orbiter is compatible with license requirements of fontsource. Thus we can
 - Changing font weights, font styles, variants will require consumer migration of imports
 - Dependency on fontsource reviews thus can take time to implement
 
-> **Note**
+> [!Note]
 >
 > We will be contributing TASA Orbiter to fontsouce although we'll go with method 2 due to the cons mentioned above.
 
@@ -195,6 +195,16 @@ Cons from all of the above 🙈
 
 ## Implementation Details
 
+### Font Size Optimization
+
+To optimize on font-size, we are splitting fonts into multiple files.
+
+- `inter-latin-blade.woff2` (alphabets, numbers, common symbols, currency) [~80kb]
+- `inter-latin-blade-extra.woff2` (rare symbols, extra glyphs) [~100kb]
+- Other bundles of greek, vietnamese, cyrillic files
+
+we are defining these files using [`unicode-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range) so most sites will always load only one `inter-latin-blade.woff2` file.
+
 ### Variable Fonts vs Static Fonts
 
 Should Blade load variable fonts or static-fonts?
@@ -204,20 +214,20 @@ The performance of variable font vs static font depends on how many weights and
 These are the weights and styles being used right now
 
 **Tasa Orbiter:** 400, 500, 600
-**Inter:** 400, 600
+**Inter:** 400, 500, 600
 
 **Conclusion**
 
-We'll use TASA Orbiter as variable font and Inter as static font based on which is the lightest version.
+We'll be using variable fonts in both Tasa and Inter based on the size below-
 
-|                  | **Static**                        | **Variable** |
-| ---------------- | --------------------------------- | ------------ |
-| **Inter**        | 70kb \* 2 weights = ✅ **~140kb** | ~200kb       |
-| **TASA Orbiter** | 30kb \* 3 weights = ~90kb         | ✅ **~32kb** |
+|                  | **Static**                 | **Variable**                    |
+| ---------------- | -------------------------- | ------------------------------- |
+| **Inter**        | 70kb \* 3 weights = ~210kb | ✅ **~215kb (80kb latin file)** |
+| **TASA Orbiter** | 30kb \* 3 weights = ~90kb  | ✅ **~32kb**                    |
 
-> **Note**
+> [!Note]
 >
-> The sizes in the table of Inter are taken from font files of fontsource which has comparitively smaller font size than Google Fonts
+> The 80kb file size of Inter comes from our custom glyphs that we're using in Razorpay as mentioned in [Font Size Optimization](#font-size-optimization).
 
 ### Font Fallbacks
 
@@ -239,4 +249,4 @@ We'll use TASA Orbiter as variable font and Inter as static font based on which
   - [Example](https://github.com/adobe/react-spectrum/blob/9ce2f674eab2cc8912800d3162dcf00a1ce94274/.storybook/preview-head.html#L13-L24)
 - [Reshaped](https://reshaped.so/content/docs/getting-started/react/installation#using-fonts): Just gives link to the official font site but does not give recommendation or download fonts
 - [Primer](https://primer.style/react/getting-started) uses system fonts only
-- [@fontsource/inter](https://www.npmjs.com/package/@fontsource/inter?activeTab=code) was referred for lighter inter version
+- [@fontsource-variable/inter](https://www.npmjs.com/package/@fontsource-variable/inter?activeTab=code) was referred for lighter inter version