Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kjartanhr/jetbrainsmono-webfont
The JetBrainsMono font imported and ready to use in one CSS document using @font-face
https://github.com/kjartanhr/jetbrainsmono-webfont
Last synced: 12 days ago
JSON representation
The JetBrainsMono font imported and ready to use in one CSS document using @font-face
- Host: GitHub
- URL: https://github.com/kjartanhr/jetbrainsmono-webfont
- Owner: kjartanhr
- License: apache-2.0
- Created: 2020-11-23T18:25:03.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-25T19:40:48.000Z (about 1 year ago)
- Last Synced: 2023-10-25T20:37:28.115Z (about 1 year ago)
- Language: CSS
- Size: 2.37 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![](https://data.jsdelivr.com/v1/package/gh/imeuropa/JetBrainsMono-Webfont/badge)](https://www.jsdelivr.com/package/gh/imeuropa/JetBrainsMono-Webfont)
> ⚠️ This project was created as a response to Google Font's lack of support for JetBrains Mono. Now that Google Fonts supports this specimen, it is recommended to [use it from there](https://fonts.google.com/specimen/JetBrains+Mono) instead.
# JetBrainsMono-Webfont
The JetBrainsMono font imported and ready to use in one CSS document using @font-face## Import the font in your project
Simply download the repository as a .ZIP file and drop the `JetBrainsMono` folder into your fonts or css folder in your project. Then include the font by linking the CSS up with the HTML by using the `` tag.
Alternatively you can load the CSS via the jsdelivr content delivery network by simply pasting this code snippet into the `` section of your project:
``
## Use the font properly
To use the JetBrainsMono font properly you should refrain from using the `font-weight` CSS rule and instead change the `font-family` rule to whichever of the following variations suits your use case:
* `JetBrainsMono-ExtraLight`
* `JetBrainsMono-ExtraLight-Italic`
* `JetBrainsMono-Light`
* `JetBrainsMono-Light-Italic`
* `JetBrainsMono-SemiLight`
* `JetBrainsMono-SemiLight-Italic`
* `JetBrainsMono-Regular`
* `JetBrainsMono-Italic`
* `JetBrainsMono-Medium`
* `JetBrainsMono-Medium-Italic`
* `JetBrainsMono-Bold`
* `JetBrainsMono-Bold-Italic`
* `JetBrainsMono-ExtraBold`
* `JetBrainsMono-ExtraBold-Italic`To avoid compatability issues you should add a fallback to the default system monospace font in case the user's browser cannot load the font. This is done by adding a trailing comma to the name of the webfont followed by the word 'monospace'. An example of this would be `font-family: 'JetBrainsMono-Regular', monospace;`.
In the example above you can see that the webfont name is enclosed in single quotes, although not required, it is recommended to use these single quotes for fonts which are not by default enabled in CSS.
## License
As per the license of the JetBrainsMono font itself this project is licensed under the `Apache License 2.0` as an extension of the original project.