From 4f61bc0addb147db64ab5e1c88a4195feee86eb1 Mon Sep 17 00:00:00 2001 From: intergrav Date: Mon, 15 Jul 2024 15:25:31 -0400 Subject: [PATCH] feat: improve readme --- README.md | 38 +++++++++++++++++++++++++++----------- 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 619c4cc..fcfc52d 100644 --- a/README.md +++ b/README.md @@ -2,32 +2,48 @@ [![NPM Version](https://img.shields.io/npm/v/@intergrav/fonts)](https://www.npmjs.com/package/@intergrav/fonts) [![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/@intergrav/fonts)](https://cdn.jsdelivr.net/npm/@intergrav/fonts/) [![GitHub Repo stars](https://img.shields.io/github/stars/intergrav/fonts)](https://github.com/intergrav/fonts) -A fast, open-source CDN for open-source fonts. Inspired by [xz/fonts](https://github.com/xz/fonts). +A fast, open-source CDN for open-source fonts. You can view available fonts in the [`/serve`](https://github.com/intergrav/fonts/tree/main/serve) directory. More fonts will be added later. If you have any suggestions for general improvements or fonts, feel free to open an issue. -You can view available fonts in the `/serve` directory. More fonts will be added later. If you have any suggestions, open up an issue. +Typically, web developers have two main methods for using custom fonts on their websites: -Typically, web developers use custom fonts on their websites using one of two methods: +1. Hosting font files on the same server as the website. This method provides all control over font hosting, but it will usually result in slower loading times and increased server load, especially in some areas of the world. -- hosting font files on the same server as the website -- using a central font service, such as Google Fonts or Adobe Typekit +2. Using a central font service, such as Google Fonts or Adobe Typekit. This method is very easy, but if the service ever experiences downtime or slowdowns, it can negatively impact the user experience. -intergrav/fonts, by comparison: +In comparison, intergrav/fonts offers several advantages: -- serves font files through jsDelivr's global content delivery network -- is fully open source and only serves open source fonts +- intergrav/fonts serves font files through jsDelivr's global content delivery network. jsDelivr uses [multiple CDNs](https://www.jsdelivr.com/network/infographic) for delivery, ensuring that fonts are delivered quickly and reliably regardless of user location. + +- intergrav/fonts is fully open source, so anyone can contribute to its development and improvement. This includes requesting new fonts or making improvements to files. You can also fork it if you want to start your own project. + +- intergrav/fonts exclusively serves open source fonts. By avoiding proprietary or licensed fonts, you can avoid any potential restrictions through licensing. ## Importing -In your CSS you could do: +To use the fonts provided by intergrav/fonts, you have to import the CSS file in your project. There are two ways to do this: + +### CSS Import + +In your CSS file, you can import the font CSS content using the `@import` rule: ```css @import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css"); ``` -Or in your HTML's `` you could do: +### HTML Link + +Alternatively, you can link the font CSS file directly in the `` section of your HTML file: ```html ``` -Replace `inter` with the font name, of course. +### Set a font + +Remember to replace `inter` in the URL with the actual font name you want to use. Visit the [`/serve`](https://github.com/intergrav/fonts/tree/main/serve) directory for fonts that you can use. You can [open an issue](https://github.com/intergrav/fonts/issues) if you need a font to be added, but remember that this project only serves open-source fonts. + +If you're curious, the `.min` in the link means to ask jsDelivr to minify the file using [clean-css](https://github.com/clean-css/clean-css). It often significantly decreases the file's size at no cost, so I recommend using it. + +## Credits + +- [xz/fonts](https://github.com/xz/fonts) is the main inspiration for this project -- 2.51.2