webfonts-plus

KO | EN

gitlite — search

#python #ai #go #deep-learning #macos #java #windows #awesome #kubernetes #vue #security #ios #openai #open-source

(★ 52)

Provide more webfonts type and weight from common webfonts provider

webfonts-plus Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Webfonts Plus😍
Discover more font weight that is not provided by common webfonts provider such as [Google Fonts](http://google.com/fonts). For example, [Monserrat](https://www.google.com/fonts/specimen/Montserrat) on [Google Fonts](http://google.com/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](#1-montserrat)
2. [Olivier](#2-olivier)
3. [Sign Painter](#3-sign-painter)
4. [Graphik](#4-graphik)
5. [National](#5-national)
6. [Tiempos Headline](#6-timepos-headline)
7. [Tiempos Text](#7-tiempos-text)
8. _coming soon_ (you can request by create issue to this repo 😊)

### 1. Montserrat

![Montserrat](https://raw.githubusercontent.com/yuripertamax/webfonts-plus/master/src/fonts/Montserrat/Montserrat-Preview.png)

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](https://raw.githubusercontent.com/yuripertamax/webfonts-plus/master/src/fonts/Olivier/Olivier-Preview.png)

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](https://raw.githubusercontent.com/yuripertamax/webfonts-plus/master/src/fonts/SignPainter/SignPainter-Preview.png)

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](https://raw.githubusercontent.com/yuripertamax/webfonts-plus/master/src/fonts/Graphik/Graphik-Preview.png)

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](https://raw.githubusercontent.com/yuripertamax/webfonts-plus/master/src/fonts/National/National-Preview.png)

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](https://raw.githubusercontent.com/yuripertamax/webfonts-plus/master/src/fonts/TiemposHeadline/TiemposHeadline-Preview.png)

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](https://raw.githubusercontent.com/yuripertamax/webfonts-plus/master/src/fonts/TiemposText/TiemposText-Preview.png)

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

webfonts-plus Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

webfonts-plus

webfonts-plus Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README