Giter VIP home page Giter VIP logo

webfonts-plus's Introduction

Webfonts Plus๐Ÿ˜

Discover more font weight that is not provided by common webfonts provider such as Google Fonts. For example, Monserrat on Google Fonts only provide 2 styles of weight, 400 and 700. This is very ๐Ÿ’ฉ

How to use

just include this to the top of your styles or css files

@import url(http://webfonts-plus.herokuapp.com/src?family=FontName);

just replace the FontName to one of fonts listed below

Fonts Lists

  1. Montserrat
  2. Olivier
  3. Sign Painter
  4. Graphik
  5. National
  6. Tiempos Headline
  7. Tiempos Text
  8. coming soon (you can request by create issue to this repo ๐Ÿ˜Š)

1. Montserrat

Montserrat

Available weight and styles:

font-weight font-style
100 normal
200 normal
300 normal
400 normal
500 normal
600 normal
700 normal
800 normal

Add this line to the top of your styles or base css files:

@import url(http://webfonts-plus.herokuapp.com?family=Montserrat);

And then your Montserrat font are ready to use for your website!

font-family: "Montserrat", sans-serif;
font-weight: 400;
font-style: normal

2. Olivier

Olivier

Available weight and styles:

font-weight font-style
400 normal

Add this line to the top of your styles or base css files:

@import url(http://webfonts-plus.herokuapp.com?family=Olivier);

And then your Olivier font are ready to use for your website!

font-family: "Olivier", sans-serif;
font-weight: 400;
font-style: normal

3. Sign Painter

SignPainter

Available weight and styles:

font-weight font-style
400 normal

Add this line to the top of your styles or base css files:

@import url(http://webfonts-plus.herokuapp.com?family=SignPainter);

And then your SignPainter font are ready to use for your website!

font-family: "SignPainter", sans-serif;
font-weight: 400;
font-style: normal

4. Graphik

Graphik

Available weight and styles:

font-weight font-style
100 (Thin) normal
italic
200 (Extralight) normal
italic
300 (Light) normal
italic
400 (Regular) normal
italic
500 (Medium) normal
italic
600 (Semibold) normal
italic
700 (Bold) normal
italic
800 (Black) normal
italic
900 (Super) normal
italic

Add this line to the top of your styles or base css files:

@import url(http://webfonts-plus.herokuapp.com?family=Graphik);

And then your Graphik font are ready to use for your website!

font-family: "Graphik", sans-serif;
font-weight: 400;
font-style: normal

5. National

National

Available weight and styles:

font-weight font-style
300 (Book) normal
italic
400 (Regular) normal
italic
500 (Medium) normal
italic
600 (Semibold) normal
italic
700 (Bold) normal
italic
800 (Extrabold) normal
italic

Add this line to the top of your styles or base css files:

@import url(http://webfonts-plus.herokuapp.com?family=National);

And then your National font are ready to use for your website!

font-family: "National", sans-serif;
font-weight: 400;
font-style: normal

6. Tiempos Headline

TiemposHeadline

Available weight and styles:

font-weight font-style
300 (Light) normal
italic
400 (Regular) normal
italic
500 (Medium) normal
italic
600 (Semibold) normal
italic
700 (Bold) normal
italic
800 (Black) normal
italic

Add this line to the top of your styles or base css files:

@import url(http://webfonts-plus.herokuapp.com?family= TiemposHeadline);

And then your TiemposHeadline font are ready to use for your website!

font-family: "TiemposHeadline", serif;
font-weight: 400;
font-style: normal

7. Tiempos Text

TimeposText

Available weight and styles:

font-weight font-style
400 (Regular) normal
italic
500 (Medium) normal
italic
600 (Semibold) normal
italic
700 (Bold) normal
italic

Add this line to the top of your styles or base css files:

@import url(http://webfonts-plus.herokuapp.com?family=SignPainter);

And then your TiemposText font are ready to use for your website!

font-family: "TiemposText", sans-serif;
font-weight: 400;
font-style: normal

License

MIT

webfonts-plus's People

Watchers

James Cloos avatar Winston Hughes avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.