Use PT Serif

This commit is contained in:
Leandro Facchinetti 2020-04-09 01:42:46 -04:00
parent 718d380a1f
commit c8964c62ad
21 changed files with 244 additions and 4 deletions

View File

@ -1,6 +1,6 @@
{
"scripts": {
"start": "concurrently \"tsc --watch\" \"nodemon lib\"",
"start": "tsc && concurrently \"tsc --watch\" \"nodemon lib\"",
"test": "tsc && jest && prettier --check src"
},
"dependencies": {

View File

@ -144,6 +144,16 @@ function Layout({ children }: { children: React.ReactNode }) {
sizes="16x16"
/>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link
rel="stylesheet"
type="text/css"
href="/fonts/typeface-pt-serif/index.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/fonts/typeface-pt-mono/index.css"
/>
<link rel="stylesheet" type="text/css" href="/styles.css" />
<title>Kill the Newsletter!</title>
</head>

View File

@ -0,0 +1,34 @@
# typeface-pt-mono
The CSS and web font files to easily self-host “PT Mono”.
## Install
`npm install --save typeface-pt-mono`
## Use
Typefaces assume youre using webpack to process CSS and files. Each typeface
package includes all necessary font files (woff2, woff) and a CSS file with
font-face declarations pointing at these files.
You will need to have webpack setup to load css and font files. Many tools built
with Webpack will work out of the box with Typefaces such as [Gatsby](https://github.com/gatsbyjs/gatsby)
and [Create React App](https://github.com/facebookincubator/create-react-app).
To use, simply require the package in your projects entry file e.g.
```javascript
// Load PT Mono typeface
require('typeface-pt-mono')
```
## About the Typefaces project.
Our goal is to add all open source fonts to NPM to simplify using great fonts in
our web projects. Were currently maintaining 939 typeface packages
including all typefaces on Google Fonts.
If your favorite typeface isnt published yet, [let us know](https://github.com/KyleAMathews/typefaces)
and well add it!

View File

@ -0,0 +1 @@
{"hash":"24310e0c7ef042b882b1e59f6112fa88","updatedAt":"2019-02-28T18:44:13.339Z"}

View File

@ -0,0 +1,13 @@
/* pt-mono-400normal - latin */
@font-face {
font-family: 'PT Mono';
font-style: normal;
font-display: swap;
font-weight: 400;
src:
local('PT Mono Regular '),
local('PT Mono-Regular'),
url('./files/pt-mono-latin-400.woff2') format('woff2'), /* Super Modern Browsers */
url('./files/pt-mono-latin-400.woff') format('woff'); /* Modern Browsers */
}

View File

@ -0,0 +1,48 @@
{
"_from": "typeface-pt-mono",
"_id": "typeface-pt-mono@0.0.72",
"_inBundle": false,
"_integrity": "sha512-7AMVSvB0oT2TDPyCJlVKSIxPjspI08Rlhg/SEUwQORSyalZgtSt2pDJEvVZuJbBIak70oB2ts6vL4iunYPUGKA==",
"_location": "/typeface-pt-mono",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "typeface-pt-mono",
"name": "typeface-pt-mono",
"escapedName": "typeface-pt-mono",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/typeface-pt-mono/-/typeface-pt-mono-0.0.72.tgz",
"_shasum": "1ce4a636d335c77bb01712ba136a99f764647a04",
"_spec": "typeface-pt-mono",
"_where": "/Users/leafac/Projects/www.leafac.com",
"author": {
"name": "Kyle Mathews",
"email": "mathews.kyle@gmail.com"
},
"bundleDependencies": false,
"deprecated": false,
"description": "PT Mono typeface",
"keywords": [
"typeface",
"font",
"font family",
"google fonts",
"pt-mono"
],
"license": "MIT",
"main": "index.css",
"name": "typeface-pt-mono",
"repository": {
"type": "git",
"url": "https://github.com/KyleAMathews/typefaces/tree/master/packages/pt-mono"
},
"version": "0.0.72"
}

View File

@ -0,0 +1,34 @@
# typeface-pt-serif
The CSS and web font files to easily self-host “PT Serif”.
## Install
`npm install --save typeface-pt-serif`
## Use
Typefaces assume youre using webpack to process CSS and files. Each typeface
package includes all necessary font files (woff2, woff) and a CSS file with
font-face declarations pointing at these files.
You will need to have webpack setup to load css and font files. Many tools built
with Webpack will work out of the box with Typefaces such as [Gatsby](https://github.com/gatsbyjs/gatsby)
and [Create React App](https://github.com/facebookincubator/create-react-app).
To use, simply require the package in your projects entry file e.g.
```javascript
// Load PT Serif typeface
require('typeface-pt-serif')
```
## About the Typefaces project.
Our goal is to add all open source fonts to NPM to simplify using great fonts in
our web projects. Were currently maintaining 939 typeface packages
including all typefaces on Google Fonts.
If your favorite typeface isnt published yet, [let us know](https://github.com/KyleAMathews/typefaces)
and well add it!

View File

@ -0,0 +1 @@
{"hash":"f24beeb816ce0f4678f1a9f6a6d421da","updatedAt":"2019-02-28T18:41:29.859Z"}

View File

@ -0,0 +1,52 @@
/* pt-serif-400normal - latin */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-display: swap;
font-weight: 400;
src:
local('PT Serif Regular '),
local('PT Serif-Regular'),
url('./files/pt-serif-latin-400.woff2') format('woff2'), /* Super Modern Browsers */
url('./files/pt-serif-latin-400.woff') format('woff'); /* Modern Browsers */
}
/* pt-serif-400italic - latin */
@font-face {
font-family: 'PT Serif';
font-style: italic;
font-display: swap;
font-weight: 400;
src:
local('PT Serif Regular italic'),
local('PT Serif-Regularitalic'),
url('./files/pt-serif-latin-400italic.woff2') format('woff2'), /* Super Modern Browsers */
url('./files/pt-serif-latin-400italic.woff') format('woff'); /* Modern Browsers */
}
/* pt-serif-700normal - latin */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-display: swap;
font-weight: 700;
src:
local('PT Serif Bold '),
local('PT Serif-Bold'),
url('./files/pt-serif-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('./files/pt-serif-latin-700.woff') format('woff'); /* Modern Browsers */
}
/* pt-serif-700italic - latin */
@font-face {
font-family: 'PT Serif';
font-style: italic;
font-display: swap;
font-weight: 700;
src:
local('PT Serif Bold italic'),
local('PT Serif-Bolditalic'),
url('./files/pt-serif-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('./files/pt-serif-latin-700italic.woff') format('woff'); /* Modern Browsers */
}

View File

@ -0,0 +1,48 @@
{
"_from": "typeface-pt-serif",
"_id": "typeface-pt-serif@0.0.72",
"_inBundle": false,
"_integrity": "sha512-R/ZnbjL3H8mfeWrkYSU1fCk8TAsz+dyw+W5jnqlXXJPcsdu7sT/cGJGqx02zskaMeDCHwdNfTCORN8/NxN7x9w==",
"_location": "/typeface-pt-serif",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "typeface-pt-serif",
"name": "typeface-pt-serif",
"escapedName": "typeface-pt-serif",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/typeface-pt-serif/-/typeface-pt-serif-0.0.72.tgz",
"_shasum": "d8761c02a298bd0203e53a2028081b6f03246cd5",
"_spec": "typeface-pt-serif",
"_where": "/Users/leafac/Projects/www.leafac.com",
"author": {
"name": "Kyle Mathews",
"email": "mathews.kyle@gmail.com"
},
"bundleDependencies": false,
"deprecated": false,
"description": "PT Serif typeface",
"keywords": [
"typeface",
"font",
"font family",
"google fonts",
"pt-serif"
],
"license": "MIT",
"main": "index.css",
"name": "typeface-pt-serif",
"repository": {
"type": "git",
"url": "https://github.com/KyleAMathews/typefaces/tree/master/packages/pt-serif"
},
"version": "0.0.72"
}

View File

@ -1,5 +1,5 @@
body {
font-family: Charter, Georgia, serif;
font-family: "PT Serif", Charter, Georgia, serif;
line-height: 1.5;
max-width: 600px;
padding: 0 2em;
@ -11,8 +11,7 @@ a {
}
code {
font-family: Menlo, Consolas, monospace;
font-size: 0.875em;
font-family: "PT Mono", Menlo, Consolas, monospace;
}
h1,