DEV Community

adithyasrinivasan
adithyasrinivasan

Posted on • Originally published at adithya.dev on

Using FontShare - a free collection of professional grade fonts

FontShare recently announced their public release of fonts that's available for usage in both personal and commerical projects.

Fontshare is a free fonts service launched by the Indian Type Foundry (ITF). It’s a growing collection of professional grade fonts that are 100% free for personal and commercial use. Our mission is to make high-quality and technically sound fonts accessible to everyone across the globe.

How to use FontShare

Similar to Google Fonts, you can use the CDN directly or download it and use it in your projects.

  • Go to FontShare.com
  • Select a font you like (customization available) and then "Click to view Family"
  • Click on " Download Family", extract it and open the " WEB" directory
  • Copy the " fonts" folder and paste it into your web project
  • Enter " css" folder, copy your font-name.css and paste it in your web project
  • In your stylesheet, import it using @import url('font-name.css'); followed by the font families that you would like

For example, for the font Ranade, you would import the following fonts

@import url('ranade.css');
//The following font-family are available for usage with @font-face
//Example
@font-face {
  font-family: 'Ranade-Variable';
}
font-family: 'Ranade-Variable';
font-family: 'Ranade-VariableItalic';
font-family: 'Ranade-Thin';
font-family: 'Ranade-ThinItalic';
font-family: 'Ranade-Light';
font-family: 'Ranade-LightItalic';
font-family: 'Ranade-Regular';
font-family: 'Ranade-Italic';
font-family: 'Ranade-Medium';
font-family: 'Ranade-MediumItalic';
font-family: 'Ranade-Bold';
font-family: 'Ranade-BoldItalic';
Enter fullscreen mode Exit fullscreen mode

Top comments (0)