Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
55 changes: 53 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,70 @@ Server Mono continues the long tradition of monospace fonts, renowned for their

This single-weight font was released in 2024 by the Internet Development Studio Company of Seattle, Washington. Created by designers Tim Vanhille and Matthieu Salvaggio, with supplemental direction from Jimmy Lee and the Internet Development Studio Company community.

### Setup Website (MacOS)
## Download

You can download the latest version from our [GitHub Releases](https://github.com/internet-development/www-server-mono/releases) page.

Alternatively, you can install it locally using [Homebrew `font-server-mono`](https://formulae.brew.sh/cask/font-server-mono)

```bash
brew install --cask font-server-mono
```

## Usage

Add the downloaded font files to your website's public/static directory. The examples below use a `/fonts/` prefix, but you can adjust this path to match your project structure.

Copy the below snippet into your CSS file:

```css
/* Regular weight - used for normal text */
@font-face {
font-family: 'ServerMono';
src: url('/fonts/ServerMono-Regular.woff2') format('woff2'), /* Best compression, modern browsers */
url('/fonts/ServerMono-Regular.woff') format('woff'), /* Good compression, wider support */
url('/fonts/ServerMono-Regular.otf') format('opentype'); /* Largest files, universal support */
font-weight: normal;
font-style: normal;
font-display: swap;
}

/* Slanted 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');
font-weight: normal;
font-style: oblique;
font-display: swap;
}

```

Then you can use it across your entire site like so:

```css
:root {
font-family: ServerMono, monospace;
}
```

## Setup Website (MacOS)

Start by cloning the repository

Then run the server

```sh
```bash
npm install
npm run dev
```

Go to `http://localhost:10000` in your browser of choice.

---

### Contact

- [Internet Development Studio Company](https://internet.dev)
Expand Down
12 changes: 12 additions & 0 deletions components/MarketingServerMono.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n
<Title style={{ marginTop: `2rem` }}>ASCII</Title>
<P style={{ marginTop: `1rem`, whiteSpace: 'pre-wrap', lineHeight: 1, fontSize: 12 }}>
{`

▄████████ ▄███████▄ ███ █▄
███ ███ ███ ███ ███ ███
███ █▀ ███ ███ ███ ███
Expand All @@ -179,6 +180,17 @@ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n
███ █▄ ███ ███ ███
███ ███ ███ ███ ███
████████▀ ▄████▀ ████████▀

`}
{`

███████╗███████╗██████╗ ██╗ ██╗███████╗██████╗ ███╗ ███╗ ██████╗ ███╗ ██╗ ██████╗
██╔════╝██╔════╝██╔══██╗██║ ██║██╔════╝██╔══██╗ ████╗ ████║██╔═══██╗████╗ ██║██╔═══██╗
███████╗█████╗ ██████╔╝██║ ██║█████╗ ██████╔╝ ██╔████╔██║██║ ██║██╔██╗ ██║██║ ██║
╚════██║██╔══╝ ██╔══██╗╚██╗ ██╔╝██╔══╝ ██╔══██╗ ██║╚██╔╝██║██║ ██║██║╚██╗██║██║ ██║
███████║███████╗██║ ██║ ╚████╔╝ ███████╗██║ ██║ ██║ ╚═╝ ██║╚██████╔╝██║ ╚████║╚██████╔╝
╚══════╝╚══════╝╚═╝ ╚═╝ ╚═══╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝ ╚═════╝

`}
</P>
</div>
Expand Down