Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jul 11, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
afb8e00
fix(glyphs): ascender and descender metrics
caidanw Jul 11, 2025
7e41283
fix(glyphs): glyphs3 internal ascender value
caidanw Jul 11, 2025
cb4e6bf
chore(fonts): export font files
caidanw Jul 11, 2025
9249a49
fix(glyphs): winDescent metric to be positive
caidanw Jul 11, 2025
1728af7
fix(glyphs): metrics for Oblique style
caidanw Jul 11, 2025
5f0dcdb
fix(glyphs): glyphs3 internal metrics cause bugs, resetting back to p…
caidanw Jul 11, 2025
9f70aa2
fix: update minor version to 200
caidanw Jul 11, 2025
76e4d97
chore(fonts): export font files with new style name Oblique
caidanw Jul 11, 2025
dcd85c5
fix: all references to "Slanted" to now use "Oblique"
caidanw Jul 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion components/MarketingServerMono.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
51 changes: 16 additions & 35 deletions fonts/ServerMono.glyphs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 = (
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -541,7 +522,7 @@ pos = -200;
pos = 10;
}
);
name = "Regular Slanted";
name = "Regular Oblique";
stemValues = (
96,
86,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -64816,7 +64797,7 @@ instanceInterpolations = {
};
isItalic = 1;
linkStyle = Regular;
name = "Regular Slanted";
name = "Regular Oblique";
}
);
kerningLTR = {
Expand Down Expand Up @@ -64927,5 +64908,5 @@ oV = "96";
};
};
versionMajor = 1;
versionMinor = 0;
versionMinor = 200;
}
6 changes: 3 additions & 3 deletions global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Binary file modified public/fonts/ServerMono-Regular.otf
View file
Open in desktop
Binary file not shown.
Binary file modified public/fonts/ServerMono-Regular.woff
View file
Open in desktop
Binary file not shown.
Binary file modified public/fonts/ServerMono-Regular.woff2
View file
Open in desktop
Binary file not shown.
Binary file renamed public/fonts/ServerMono-RegularSlanted.otf → public/fonts/ServerMono-RegularOblique.otf
View file
Open in desktop
Binary file not shown.
Binary file added public/fonts/ServerMono-RegularOblique.woff
View file
Open in desktop
Binary file not shown.
Binary file added public/fonts/ServerMono-RegularOblique.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed public/fonts/ServerMono-RegularSlanted.woff
View file
Open in desktop
Binary file not shown.
Binary file removed public/fonts/ServerMono-RegularSlanted.woff2
View file
Open in desktop
Binary file not shown.
8 changes: 4 additions & 4 deletions server-mono.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
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;
Expand Down