[archived] collection of open-source fonts distributed with jsDelivr
feat: improve readme
+27
-11
+27
-11
README.md
+27
-11
README.md
···
2
2
3
3
[](https://www.npmjs.com/package/@intergrav/fonts) [](https://cdn.jsdelivr.net/npm/@intergrav/fonts/) [](https://github.com/intergrav/fonts)
4
4
5
-
A fast, open-source CDN for open-source fonts. Inspired by [xz/fonts](https://github.com/xz/fonts).
5
+
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.
6
6
7
-
You can view available fonts in the `/serve` directory. More fonts will be added later. If you have any suggestions, open up an issue.
7
+
Typically, web developers have two main methods for using custom fonts on their websites:
8
8
9
-
Typically, web developers use custom fonts on their websites using one of two methods:
9
+
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.
10
+
11
+
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.
12
+
13
+
In comparison, intergrav/fonts offers several advantages:
10
14
11
-
- hosting font files on the same server as the website
12
-
- using a central font service, such as Google Fonts or Adobe Typekit
15
+
- 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.
13
16
14
-
intergrav/fonts, by comparison:
17
+
- 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.
15
18
16
-
- serves font files through jsDelivr's global content delivery network
17
-
- is fully open source and only serves open source fonts
19
+
- intergrav/fonts exclusively serves open source fonts. By avoiding proprietary or licensed fonts, you can avoid any potential restrictions through licensing.
18
20
19
21
## Importing
20
22
21
-
In your CSS you could do:
23
+
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:
24
+
25
+
### CSS Import
26
+
27
+
In your CSS file, you can import the font CSS content using the `@import` rule:
22
28
23
29
```css
24
30
@import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css");
25
31
```
26
32
27
-
Or in your HTML's `<head>` you could do:
33
+
### HTML Link
34
+
35
+
Alternatively, you can link the font CSS file directly in the `<head>` section of your HTML file:
28
36
29
37
```html
30
38
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css">
31
39
```
32
40
33
-
Replace `inter` with the font name, of course.
41
+
### Set a font
42
+
43
+
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.
44
+
45
+
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.
46
+
47
+
## Credits
48
+
49
+
- [xz/fonts](https://github.com/xz/fonts) is the main inspiration for this project