Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kmsunmin/grass-flower-font
A custom handwriting font created by using calligraphr.com
https://github.com/kmsunmin/grass-flower-font
custom-font font webfont
Last synced: about 2 months ago
JSON representation
A custom handwriting font created by using calligraphr.com
- Host: GitHub
- URL: https://github.com/kmsunmin/grass-flower-font
- Owner: kmsunmin
- License: ofl-1.1
- Created: 2021-09-09T03:34:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-22T18:52:22.000Z (about 1 year ago)
- Last Synced: 2023-12-23T19:31:56.636Z (about 1 year ago)
- Topics: custom-font, font, webfont
- Language: HTML
- Homepage:
- Size: 629 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# grass flower font
**grass flower** is a custom font that I created by using [Calligraphr](https://www.calligraphr.com/). Calligraphr is a website that allows users to create their own custom fonts at a free cost. I learned about this website thanks to my coworkers. I also used [Font Squirrel](https://www.fontsquirrel.com/) that generates webfont for free. For more detailed tutorial for custom fonts, please check out [this article](https://blog.schoolofcode.co.uk/a-beginners-guide-to-creating-your-very-own-custom-web-font-7b71b16f4ef3). Hope you enjoy this and perhaps have fun making your own as well :balloon:
## Why the font is named as 'grass flower'
I named it after one of my favourite Korean poems, 풀꽃(pulkkot) meaning 'grass flower'.
## How to install (.otf file)
#### Windows:
1. After downloading the font file on your computer, right-click the file and select **Install**.
2. When the font installation is complete, you can use the font.
#### Mac:
1. After downloading the font file on your computer, double-click the file and select **Install Font**.
2. When the font installation is complete, you can use the font.
#### Linux:
1. After downloading the font file on your computer, double-click the file and select **Install** on top right corner.
2. When the font installation is complete, you can use the font.
## How to use grass-flower font for your website
1. After downloading the font files on your computer, upload the font files in `webfont/` (ex: .woff, .woff2, stylesheet.css) in this repository to your website.
2. Open `stylesheet.css` file that has the following code:
```css
@font-face {
font-family: 'grass-flower';
src: url('grass-flower-webfont.woff2') format('woff2'),
url('grass-flower-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
```
3. Replace `'grass-flower-webfont.woff'` and `'grass-flower-webfont.woff2'` inside `url()` with the location of the files on your server.
4. After updating `stylesheet.css` file, you can include it on your HTML document. You can put `stylesheet.css` before any of your CSS.
**Example:**
```html
...
...
```
5. Then, you can use grass-flower font in your main CSS file.
**Example:**
```css
font-family: 'grass-flower', serif;
```
## Example
## License
This font software is licensed under the [SIL Open Font License, Version 1.1](http://scripts.sil.org/OFL). This means that the font can be "used, studied, modified and redistributed freely as long as they are not sold by themselves". More information is available at http://scripts.sil.org/OFL.