fix: font metrics for better vertical alignment and change Slanted to Oblique (#30)

* fix(glyphs): ascender and descender metrics

* fix(glyphs): glyphs3 internal ascender value

* chore(fonts): export font files

* fix(glyphs): winDescent metric to be positive

Per the spec, it should be positive instead of a negative number like
the others.

* fix(glyphs): metrics for Oblique style

* fix(glyphs): glyphs3 internal metrics cause bugs, resetting back to prior value

* fix: update minor version to 200

The 100 is for the prior glyphs that were added.
The 200 is for this change of font metrics and spacing.

* chore(fonts): export font files with new style name Oblique

* fix: all references to "Slanted" to now use "Oblique"

Author: caidanw

README.md

@@ -38,12 +38,12 @@ Copy the below snippet into your CSS file:
   font-display: swap;
 }
 
-/* Slanted variant - used for italic/oblique text */
+/* Oblique variant - used for italic/oblique text */
 @font-face {
   font-family: 'ServerMono';
-  src: url('/fonts/ServerMono-RegularSlanted.woff2') format('woff2'),
-       url('/fonts/ServerMono-RegularSlanted.woff') format('woff'),
-       url('/fonts/ServerMono-RegularSlanted.otf') format('opentype');
+  src: url('/fonts/ServerMono-RegularOblique.woff2') format('woff2'),
+       url('/fonts/ServerMono-RegularOblique.woff') format('woff'),
+       url('/fonts/ServerMono-RegularOblique.otf') format('opentype');
   font-weight: normal;
   font-style: oblique;
   font-display: swap;
@@ -75,12 +75,12 @@ Or you can copy the below snippet into your CSS file:
   font-display: swap;
 }
 
-/* Slanted variant - used for italic/oblique text */
+/* Oblique variant - used for italic/oblique text */
 @font-face {
   font-family: 'ServerMono';
-  src: url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-RegularSlanted.woff2') format('woff2'),
-       url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-RegularSlanted.woff') format('woff'),
-       url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-RegularSlanted.otf') format('opentype');
+  src: url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-RegularOblique.woff2') format('woff2'),
+       url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-RegularOblique.woff') format('woff'),
+       url('https://cdn.jsdelivr.net/gh/internet-development/www-server-mono@latest/public/fonts/ServerMono-RegularOblique.otf') format('opentype');
   font-weight: normal;
   font-style: oblique;
   font-display: swap;
@@ -97,7 +97,7 @@ Then you can use it across your entire site like so:
 }
 ```
 
-To use the slanted version, set the font style to either `oblique` or `italic`:
+To use the oblique version, set the font style to either `oblique` or `italic`:
 
 ```css
 p {

components/MarketingServerMono.tsx

@@ -94,7 +94,7 @@ export default function MarketingServerMono(props) {
             </P>
           </div>
           <div className={styles.right}>
-            <Title style={{}}>Regular Slanted</Title>
+            <Title style={{}}>Regular Oblique</Title>
             <P style={{ marginTop: `1rem`, fontStyle: 'oblique' }}>
               Mi sina alta mappa ëa, lómëa coivië, lómëa lúmë, á tyelë, á auta mi i sáma lómë, liëa olassëar ar ilyë lúmët elenaië.
               <br />

fonts/ServerMono.glyphs

@@ -1,25 +1,6 @@
 {
 .appVersion = "3343";
 .formatVersion = 3;
-DisplayStrings = (
-"$123
-$123",
-"200%
-200%",
-"123%
-123%",
-":(){ :|:/ampersand.ss01  };:",
-"/Placeholder oo/Placeholder o/Placeholder/Placeholder o
-nhH0o_",
-"|¦|",
-"<=>",
-">_<",
-"200%",
-"/.notdef",
-"/.notdef ▂▃▄▅▆▇█▀▔▏▎▍▌▋▊▉▐▕▖▗▘▙▚▛▜▝▞▟░▒▓●○◦◊■□▲▶▼◀▴▾◂╦╗╔═╩╝╚║╬╣╠╥╖╓┰┒┧┎┟╁┯┑┩┍┡╇╤╕╒╍╏╻┳┓┏━╸╾┉┋╺┅┇╹┻┛╿┗┃╋┫┣╅┭┵┽┲┺╊╃╮╭╯╰╌╎╳╲╱╷┬┐┌─╴╼┈┊╶┄┆╵╽┴┘└│┼┤├╆┮┶┾┱┹╉╄╨╜╙╀┸┦┚┞┖╈┷┪┙┢┕╧╛╘╫╢╟╂┨┠┿┥┝╪╡╞",
-"▁▂▃▄▅▆▇█▀▏▎▍▌▋▊▉▐",
-"◂"
-);
 axes = (
 {
 name = Weight;
@@ -374,35 +355,35 @@ value = n;
 },
 {
 name = hheaAscender;
-value = 750;
+value = 900;
 },
 {
 name = hheaDescender;
-value = -250;
+value = -200;
 },
 {
 name = hheaLineGap;
 value = 0;
 },
 {
 name = typoAscender;
-value = 750;
+value = 900;
 },
 {
 name = typoDescender;
-value = -250;
+value = -200;
 },
 {
 name = typoLineGap;
 value = 0;
 },
 {
 name = winAscent;
-value = 750;
+value = 900;
 },
 {
 name = winDescent;
-value = 250;
+value = 200;
 }
 );
 guides = (
@@ -485,35 +466,35 @@ value = n;
 },
 {
 name = hheaAscender;
-value = 750;
+value = 900;
 },
 {
 name = hheaDescender;
-value = -250;
+value = -200;
 },
 {
 name = hheaLineGap;
 value = 0;
 },
 {
 name = typoAscender;
-value = 750;
+value = 900;
 },
 {
 name = typoDescender;
-value = -250;
+value = -200;
 },
 {
 name = typoLineGap;
 value = 0;
 },
 {
 name = winAscent;
-value = 750;
+value = 900;
 },
 {
 name = winDescent;
-value = 250;
+value = 200;
 }
 );
 id = "941849C8-D0D1-40F0-8537-D2B5B3A46943";
@@ -541,7 +522,7 @@ pos = -200;
 pos = 10;
 }
 );
-name = "Regular Slanted";
+name = "Regular Oblique";
 stemValues = (
 96,
 86,
@@ -21959,7 +21940,7 @@ unicode = 40;
 },
 {
 glyphname = parenright;
-lastChange = "2024-07-26 14:30:06 +0000";
+lastChange = "2025-07-11 20:55:20 +0000";
 layers = (
 {
 layerId = m01;
@@ -64816,7 +64797,7 @@ instanceInterpolations = {
 };
 isItalic = 1;
 linkStyle = Regular;
-name = "Regular Slanted";
+name = "Regular Oblique";
 }
 );
 kerningLTR = {
@@ -64927,5 +64908,5 @@ oV = "96";
 };
 };
 versionMajor = 1;
-versionMinor = 0;
+versionMinor = 200;
 }

global.scss

@@ -9,9 +9,9 @@
 
 @font-face {
   font-family: 'ServerMono';
-  src: url('/fonts/ServerMono-RegularSlanted.woff2') format('woff2'),
-       url('/fonts/ServerMono-RegularSlanted.woff') format('woff'),
-       url('/fonts/ServerMono-RegularSlanted.otf') format('opentype');
+  src: url('/fonts/ServerMono-RegularOblique.woff2') format('woff2'),
+       url('/fonts/ServerMono-RegularOblique.woff') format('woff'),
+       url('/fonts/ServerMono-RegularOblique.otf') format('opentype');
   font-weight: normal;
   font-style: oblique;
 }