☞ Comparative style, character & numeral table here
How to Use
- Copy code below into the css of the page you want to use the font
- Set font-family for elements according to the font-family name provided (in css or html)
| single div | <div style="font-family:'CabinetGrotesk'; font-size:13.5pt;"> |
| Paragraph | <p style="font-family:'BPScript';font-size:18pt;"> |
| entire page | html,body{
font-family: 'JetBrains';
font-size: 13.5pt;
color: black;
} |
basically anywhere you can use the font-family tag, you can use one of these fonts, provided you also include the copy-pasted text in the css
Just create an i class in your CSS:
CSS:
i.faune{font-family:'Faune-Italic';}HTML: I want <i class="faune"> neat italics</i>!
Display: I want neat italics!
Remember, font urls and names are cAsE sEnSiTiVe!
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:0xProto is free for commercial use from 0xType Foundry
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Aber Mono is free for commercial use from Tom Robin Karlsson
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Afacad is free for commercial use from dicotype (I cant really figure out how their website works).
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:AnalogueOS is free for commercial use from AbFarid (github)
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:AnalogueOS is free for commercial use from AbFarid (github)
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:The Barecast font family is free for commercial use from Kami Wataru
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:BPScript and BPnoScript are a set of complimentary fonts, free for commercial use from backpacker.gr
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:CabinetGrotesk is free for personal use from Indian Type Foundry, see it in action here
Canarina
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Canarina is free for commercial use, created by Tainome Studio, distributed through tunera.xyz.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:CHNO Pixel Code Pro is free for commercial use from C₂₉H₂₅N₃O₅ (github)
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Darker Grotesque is free for commercial use from Gabriel Lam
Departure Mono
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Departure Mono is free for commercial use from Tobias Fried.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:DPSDbeyond is free for commercial use from backpacker.gr
F5.6
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:F5.6 is free for commercial use from Sora Sagano.
FT88 Italic
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:
Director Regular
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:FT88 Italic and Director Regular are just two fonts in a large happy family honoring the work of Angela Degheest, a collaborative project put together by the brilliant folks at velvetyne.fr. Free for commercial use.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Faune Italic is just one sibling of a family of fonts free for commercial use from Alice Savoie
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:FUNGIS Grotesque is free for commercial use from Milena Leimig
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Gothamono is free for commercial use from Steven Lewis, who says the font is inspired by Batman:The Animated Series.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Grenze Gotisch Thin is adapted from Grenze Gotisch, a variable font with 9 weights. Grenze Gotisch is free for commercial use from Omnibus Type
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:JetBrains is an opensource project to create a font-family for developers, and free for commercial use from jetbrains.com
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:jgs7 is one of three fonts in the jgs family and has a kick-ass repertoire, making it excellent for ASCII art.
jgs is free for commercial use from adelfaure.net/
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Monobiletik supports Cyrillic languages and is free for commercial use from Olga Butyrska
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:NeoDunggeunmo Pro supports Korean characters and is free for commercial use from Eunbin Jeong
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Nounty is free for commercial use from Aex Designs
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:The Ojuju font family is free for commercial use from Chisaokwu Joboson
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Phlatt Grotesk is free for commercial use from randommaerks
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Reno Mono is free for commercial use from Renaud Futterer
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Sector Mono is free for commercial use from Mateo Broillet
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Sligiol is free for commercial use from appliedmetaprojects
Snapit Mono
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Snapit Mono is free for commercial use from Corentin Moussard and Morgane Bartoli.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:UFO! Mono is free for commercial use from Primary Foundry
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Unixel supports Arabic text and is free for commercial use from Mohammad Darvishi (github)
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:VG5000 supports numerous characters and is free for commercial use from Mohammad Darvishi (velvetyne.fr)
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:The Xanh Mono font family is free for commercial use from Yellow Type Foundry (github)
Display Fonts
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:BBBInvader is one font in a collection of fun pixel fonts, free for commercial use from lobbby24 (site currently set to private)
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:The Frames family is free for commercial use from Nathan Laurent
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Jacquard-12, JacquardaBastarda-9 and Micro-5 are all pixel type fonts designed to be adaptable to knitting, from a project called Soft Type. The number indicates the unit height for each typeface. The Soft Type fonts are free for commercial use from Sarah Cadigan-Fried (github)
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Karbon was created by Justin Penner as part of the 36 Days of Type Challenge.
Karbon is free for commercial use, and you can view Justin's other challenge creations here.
le Murmure
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:le Murmure is free for commercial use from Studio Triple, distributed through velvetyne.fr/.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Faune Italic is just one sibling of a family of fonts free for commercial use from Alice Savoie
Qesper Display
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Qesper Display is free for commercial use from Albert Smit.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Paste into your css:Quarantype is free for commercial use from fonderie, their site is bananas, definitely worth a visit!
Also for the life of me I cant figure out why the capital D and F wont appear, even though they do on my desktop. ¯\_(ツ)_/¯