kyleamathews / typefaces Goto Github PK

NPM packages for Open Source typefaces

CSS 98.56% JavaScript 1.44%

typefaces's Introduction

The Typefaces project is now deprecated.

@DecliningLotus created FontSource which provides the same functionality as Typefaces but with automated releases & richer support for importing specific weights, styles, or language subsets.

To start using Fontsource, replace in your package.json any instances of "typeface-" with "@fontsource/".

Then change imports from e.g. "import 'typeface-roboto'" to "import '@fontsource/roboto/latin.css'".

Typeface packages will continue working indefinitely so no immediate changes are necessary.

Typefaces

NPM packages for Open Source typefaces — making it easier to self-host webfonts.

https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/

Why

Self-hosting is significantly faster. Loading a typeface from Google Fonts or other hosted font service adds an extra (blocking) network request. In my testing, I’ve found replacing Google Fonts with a self-hosted font can improve a site’s speedindex by ~300 miliseconds on desktop and 1+ seconds on 3g. This is a big deal.
Your fonts load offline. It’s annoying to start working on a web project on the train or airplane and see your interface screwed up because you can’t access Google fonts. I remember once being in this situation and doing everything possible to avoid reloading a project as I knew I’d lose the fonts and be forced to stop working.
Go beyond Google Fonts. Some of my favorite typefaces aren’t on Google Fonts like Clear Sans, Cooper Hewitt, and Aleo.
All web(site|app) dependencies should be managed through NPM whenever possible. Tis the modern way.

What

Each typeface package ships with all the necessary font files and css to self-host an open source typeface.

All Google Fonts have been added as well as a small but growing list of other open source fonts. Open an issue if you want a font added!

How

Couldn’t be easier. This is how you’d add Open Sans.

npm install --save typeface-open-sans

Then in your app or site’s entry file.

require("typeface-open-sans")

And that’s it! You’re now self-hosting Open Sans!

It should take < 5 minutes to swap out Google Fonts.

Typeface assumes you’re using webpack with loaders setup for loading css and font files (you can use Typeface with other setups but webpack makes things really really simple). Assuming your webpack configuration is setup correctly you then just need to require the typeface in the entry file for your project.

Many tools built with webpack such as Gatsby and Create React App are already setup to work with Typefaces. Gatsby by default also embeds your CSS in your <head> for even faster loading.

If you’re not using webpack or equivalent tool that allows you to require css, then you’ll need to manually integrate the index.css and font files from the package into your build system.

Alternatives without Webpack

For Ember users, there is an addon https://github.com/jeffjewiss/ember-typeface

Adding other fonts

The easiest way to find out if your favorite typeface is supported is by searching on NPM or in the packages directory in this repo.

I’d love to see every open source font on NPM! Open an issue if a favorite typeface of yours is missing. I’ve programmatically published all fonts from Google Fonts and am planning on doing the same with fonts hosted on FontSquirrel through their API.

Other ideas to explore

Add subsetted version of every font.
Initially I’ve just added support for the Latin version of fonts. Would love to hear ideas for how to support other languages. Perhaps additional css files e.g. require('open-sans/greek.css')?
Ship fallback css helpers — figuring out your fallback css isn’t particularly easy. Perhaps there’s a way to automate this. E.g. if you’re using typeface X at fontsize Y with fallback font Z, here’s a function to generate the fallback css.
Explore futher optimizations for loading fonts. https://www.zachleat.com/web/comprehensive-webfonts/ has a long list. Most require painful per-project scripting. What if the best strategies could be automated?

typefaces's People

Contributors

Stargazers

Watchers

Forkers

iam-peekay mikaelbr vfulco cybernetics dmirtyisme jeznag gijs jffernandez fk taivu ocean greatislander thibautre erykpiast knownasilya arif-hanif amar-kamat vovanr dotnetcarpenter digital-drifter humphreybc casprwang purwnt ankeetmaini imsugat danielmorena quotapath zach-ovic dmackerman witkops garrettjstevens xs9627 bsides khadro sgalmeid chrisbuttery capi1o vmaark magicpriest begrafx dum3bi archaeocode emon535 peripona vijaywyd wootsbot ps-amaureder thelliot tchigher darthgawd dustygaron usrbowe hhy5277 fifn2 davidjb oferitz alanphanth backflip mariolorenz hongweitang machinechatllc suryaj92 zhtkrky braininteractive jegardner josephjlee eter5 jacklaw adoel90 mayrsascha zirkeldesign willrbc hahlh dexter4life marcocom cdepman dipalmarla browniebroke normanclaro mmoonniikkaa rsatyakaal sugeng-riyanto carlosoliveiraburn rixiobarrios nama0027 tay1orjones jeymix mkreatif gtulipani baburshahsayer presbes0rueno ramodemir

typefaces's Issues

typeface-roboto-condensed parsing error

typeface-robot-condensed seems to be broken.
Google chrome says it can't parse the files.

Tried other typeface packages and it works well in the same project so there's definitely something wrong with this one I think.

do you need require.js ?

I notice you write:

require("typeface-open-sans")

what if you don't have require.js? Should I add it require.js to my web app, or can I add the font another way?

TypeFace.js support?

Hi. Thanks for undertaking this project.

Could you add support for TypeFace.js? Some libraries (e.g. Three.js) can't handle typical font files and need the font to be defined in JSON format instead.

Ant.Design Iconfonts

Love this library! Already using it for the Roboto families and Lora. I'm currently using [a workaround] to get the Icons from Ant.Design into my project (as the default is hosted in China).

Might this be a case for typefaces?

Auto-generate screenshots for each typeface

Anyone know an easy tool for doing this? Throw it up on Amazon Lambda perhaps?

Bundle size seems very large?

Hi, any tips on reducing the bundle size? I used typeface-lato and ended up with a bundle size of 4.43MB (2.39MB after Gzip).

All I have in entry.js is:

 require('typeface-lato');

Webpack config:

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader:'style!css!'
      },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader' },
    ],
  },
  output: {
    filename: 'bundle.js',
  },
  plugins: [
    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
}

Geometria Light and Acens

Hello!

Could you please add:

I tried running scripts/package-from-fontsquirrel.js on geometria-light, but it looks like the expected zip download path at https://www.fontsquirrel.com/fontfacekit/geometria-light is no longer valid.

Parcel?

Parcel is the way of the future compared to webpack.

parcel support?

Add Hermit and Koruri fonts

Hello! I like this idea a lot and would like to use some custom fonts for my new site (Gatsby :D). I wonder if you could add these two fonts to the list:

Koruri.
Hermit. <- The author is a friend of mine so I could ask him anything if needed.

They provide tff and otf formats so I guess it's possible to get the other formats. I've also checked the licenses and, to my understanding, they both should be fine.

Keep up the good work! 🙂

Suggestion: Use NPM scoped packages

@KyleAMathews, Hey just wanted to say thanks for all the work you put into typefaces, after doing a lot of fruitless searching this seems like it really is the way to go with NPM installing open source fonts into projects.

Just thought I would put this out as a suggestion. With NPM's scoped packages, it makes it easy to predict package names and trust that you are getting what you intend to. For example, if I want to install the router for Angular, I npm install @angular/router. If I want the TypeScript definitions for JQuery, I npm install @types/jquery. I think it would be super awesome if anyone could install a typeface using npm install @typeface/open-sans or something similar. This could really become a standard way of acquiring fonts from NPM. (At the time of writing the NPM username typeface and typefaces are both available.)

Font files are still missing from "spectral"

Related to #48

how to use it in typescript project

Multiple languages support

As I understand, for now package supports only western languages subset. Is there some plan to add support for other languages?

(screenshot from font squirrel webform generator page)

typeface-montserrat references files that don't exist.

index.css in montserrat contains references to

files/montserrat-latin-300italic.svg
files/montserrat-latin-700italic.svg
files/montserrat-latin-800.svg

These files are not present in the files directory that house all the other fonts.

This is preventing webpack with file-loader from building.

Font files missing from typeface-roboto package

For example, the CSS references roboto-latin-400italic.woff2, which isn't in the published package:

> tar -t -f typeface-roboto-0.0.32.tgz | sort
package/.npmignore
package/README.md
package/files-hash.json
package/files/.npmignore
package/files/roboto-latin-100.eot
package/files/roboto-latin-100.svg
package/files/roboto-latin-100.woff
package/files/roboto-latin-100.woff2
package/files/roboto-latin-100italic.eot
package/files/roboto-latin-100italic.svg
package/files/roboto-latin-100italic.woff
package/files/roboto-latin-100italic.woff2
package/files/roboto-latin-300.eot
package/files/roboto-latin-300.svg
package/files/roboto-latin-300.woff
package/files/roboto-latin-300.woff2
package/files/roboto-latin-300italic.eot
package/files/roboto-latin-300italic.svg
package/files/roboto-latin-300italic.woff
package/files/roboto-latin-300italic.woff2
package/files/roboto-latin-400.eot
package/files/roboto-latin-400.svg
package/files/roboto-latin-400.woff
package/files/roboto-latin-400.woff2
package/files/roboto-latin-400italic.eot
package/files/roboto-latin-400italic.woff
package/files/roboto-latin-500.eot
package/files/roboto-latin-500.svg
package/files/roboto-latin-500.woff
package/files/roboto-latin-500italic.eot
package/files/roboto-latin-500italic.svg
package/files/roboto-latin-700.svg
package/files/roboto-latin-700.woff
package/files/roboto-latin-700.woff2
package/files/roboto-latin-700italic.woff
package/files/roboto-latin-700italic.woff2
package/files/roboto-latin-900.svg
package/files/roboto-latin-900italic.woff
package/files/roboto-latin-900italic.woff2
package/index.css
package/package.json

Typeface: Lora not finding .woff files

Hi Kyle! Sorry to be a pest. It's not a big deal (I'll just switch out the font), but just FYI, it seems that 'typeface-lora` is broken. Here's my error:

./node_modules/typeface-lora/index.css
Module not found: Can't resolve './files/lora-latin-400.woff' in 'C:\Users\surface\Projects\Bootcamp\census\graphql\raw_typeface_test\node_modules\typeface-lora'

I've created a test repository that zero's in on the font, as typeface-roboto works, where typeface-lora doesn't:

https://github.com/loganpowell/RAW_Typeface_Test/blob/master/src/index.js#L7

[font request] IBM Plex

https://ibm.github.io/type/
https://github.com/IBM/type/

Documentation for local development

Hello!

Great library!

I am currently writing some utility to take screenshots of every font in typefaces automatically and locally, hopefully fixing #4 (I will open a PR when I will be done with it). I am blocked by some undocumented feature: how do you generate/download the font files? I see that they are not in the git repo but they are in the npm packages.

I tried to run some scripts of the scripts folder but without success.

List of supported fonts

@KyleAMathews is there a list of fonts published over npm within this project?

[Font request] Interface

Ok, I had a look on Font Squirrel and the typeface I mentioned in #30 isn't there.

It's called Interface, it's open source on GitHub and someone was looking to use it in a Node project, so I thought of this project (as we use some of your other npm font packages at my work already).

The release archive already has .woff and .woff2 files in it, so hopefully that makes it easier for you. I had a look at the scripts you've got, but didn't feel I was up to writing a script to download and generate the package based off the scripts you have though, sorry.

Legal stuff

The legal issues around distributing fonts are foreign to me. I'm assuming anything on Google Fonts is fine. But for fonts from other sources...?

Eslint error

I am getting the following ESlint errors, I just recently started using eslint and find it great as it enforces a discipline in my style. For now, I managed to ignore these errors, by adding the import to a file which is part of .eslintignore.

But would like to know why is eslint complaining, I am new to fonts and typefaces.

Missing file extension "css" for "typeface-quattrocento-sans" import/extensions
Missing file extension "css" for "typeface-work-sans" import/extensions

Update Montserrat

Google now has other styles for Montserrat but we still have only Regular and Bold.

Missing Google font subsets

typefaces-* packages only support Latin while Google fonts support many different subsets. The project relies on https://google-webfonts-helper.herokuapp.com/api/fonts/ which only downloads Latin fonts by default.

Add Norwester?

Anyway you could add Norwester?
https://www.fontsquirrel.com/fonts/norwester

Local "Regular" font weights not being detected

The title doesn't do the issue any justice, but it's a simple problem:

On my system (macOS Sierra), I have installed the Ubuntu font via brew cask, the regular variant of which is listed on my system under the font name "Ubuntu". However, the generated CSS for Ubuntu expects the local name to be either "Ubuntu Regular" or "Ubuntu-Regular" (see here). Adding local('Ubuntu') to the list fixes the issue completely. Therefore, I simply propose updating your font CSS generator to handle this case.

Thanks,
Caleb

typeface-exo-2 references non existent svg files

When using exo-2 with webpack or angular-cli the pack won't build as the index.css file references svg file that are not existent in the npm-package. The files directory only contains .svg.mtd files. Is this on purpose or should the index.css actually reference those .mtd files? I could PR the latter.

typeface-pt-sans references non-existant files

Similar to #26, PT Sans has 3 files that have the .mtd extension and cause them to not be found:

pt-sans-latin-400.eot.mtd
pt-sans-latin-400.svg.mtd
pt-sans-latin-700.eot.mtd

From what I gathered from the previous issue, this is just something that @KyleAMathews can regenerate, but let me know if there's anything I can do to help!

Webpack unable to resolve font files

Hey there! I'm getting started with material-ui and trying to get typeface-roboto added to my build process for self hosting.

I've tried using webpack file-loader & url-loader, with every possible configuration option I can think of, and I still can't get webpack to resolve these font files.

Since this project runs on the assumption that users will be using webpack as their build tool, I think it would be advantageous to provide documentation on the appropriate webpack configuration for woff files in the README.

Here is my current configuration:

{
    test: /\.(woff|woff2|eot|ttf)$/,
    use: [
       { loader: 'file-loader' }
     ]
}

It could be that I'm missing something basic. I will admit webpack is not my forte. I ended up here because the Material Design Documentation points back to the typefaces project. Can also see the following issue in material-ui

Implement subsetting with a webpack plugin?

Initially I’ve just added support for the Latin version of fonts. Would love to hear ideas for how to support other languages. Perhaps additional css files e.g. require('open-sans/greek')?

Is it possible to implement subsetting via a webpack plugin? Then you could ship the whole font (which would be ideal – feels like the default behavior should be to make the whole font available).

where to add require('fontname') in gatsby

Hi there,

Atm using google fonts gastby package but would like to self host a google font to improve pagespeed.

Where in my gastby project should I add the require('fontname')?

Thanks v much.

[Feature Request] Support for Google Fonts Early Access. (Noto Sans family)

Thanks for the awesome works!

I want to use Noto Snas TC with my project. Is there any plans to add the Google Fonts Early Access to this project?

another approach to the problem

Example: i'm using my own bundler(which, admittedly, could use webpack under the hood) and i came up with an alternative solution: downloading at bundle time. It's not yet perfect but i think it's easier to generalize, unless the remote service sets up some kind of protection (unless the legality of this is questionable).

Material-Icons font?

Using Gatsby with react-md, I've got two fonts loading from Google fonts, but one's an icon font -- Material Icons -- and doesn't look like it's packaged. It looks like it's not listed on fonts.google.com, which I suspect is the immediate reason it's not included here? The other is Roboto, which is easy :).

If you're happy to have icon fonts included, I'm happy to do the work to include them. But some advice on what approach you'd prefer to take would be very welcome.

Reference is https://fonts.googleapis.com/css?family=Material+Icons

Scope packages under @typeface?

@KyleAMathews Great repo! Thank you for sharing!

I had a thought about the distribution of these typefaces, would you be open to hosting them on the npm registry under the @typeface scope. Assuming you create the @typography user on npm, the packages can then be distributed via npm i @typeface/font-family which i find to be cleaner than the conventional prefix

Offline loading introduces jitter

Firstly, Thank You for the thought leadership in making these libraries. I am in the process of doing a side-by-side comparison between Create React App and Gatsby, and in that process I am running into a couple of technical issues. Most likely these are simply a matter of the difference between SSR and CSR approaches.

I loaded Ubuntu/Open Sans typefaces and required them in the layout. Magically they are included in the HTML. So far so good. Now when a page is served, it is served first with the user agent font style, Arial, Helvetica, whatever... and then once the font is done loading offline, the font is switched. The span of time is just long enough to introduce a noticeable jitter. At least is does using on Chrome 62.0.3202.94.

When using Google Fonts the (browser-dependent) effect is to have a space reserved where the text shows up. That seems preferable if the rest of the layout completes while the font is loading.

How do I address this for mobile/slow network users going forward?

Gidole incorrect font-style

When loading the 'typeface-gidole' webpack throws an error becuase font-style is missing:

Module build failed:
font-style: ;
^
Style declaration must contain a value

https://github.com/KyleAMathews/typefaces/blob/master/packages/gidole/index.css#L4

how to avoid roundtrip to svr?

I was playing w/ the Google Lighthouse extension & I noticed the typefaces I'd added from this project were loaded in second trip to the server:

Looking @ Gatsby's site (below), it looks like fonts are loaded in the first trip.

I'm assuming the Gatsby site uses typefaces project for fonts. Was there any special step you took to get the fonts on the first round trip?

To load the fonts, I'm simply calling them via requires in layouts/index.js:

require('typeface-lato');
require('typeface-ubuntu');

Then, using the gatsby-plugin-typograhy, I just declare the fonts:

headerFontFamily: ['Ubuntu', 'sans-serif'],
bodyFontFamily: ['Lato', 'serif'],

PR or issue for adding a typeface?

Hi Kyle, love your work 👍

Do you take pull requests to add typefaces to this project? Or would you prefer a request via issue (as you already have your own process created to generate and package the files and release them etc.)?

Only load used font weights

Is it possible to only load the weights of the font that are actually being used? Seems wasteful to load all font weight variants when I'm only actually using one or two of them.

fonts arent loading using webpack and fontfaceobserver

Hey @KyleAMathews ,

thanks for your awesome work, i was trying to implement it in a project with
fontfaceobserver and webpack,
it does all work if i implement it using the google font url in my app.scss , but as soon as i import the typeface node module it doesn't throwing :

Uncaught (in promise) A {family: "Output Sans", style: "normal", weight: 400, stretch: "normal"}

thats the entry.js ...i have no idea why whats causing it to be honest:


// Load Open Sans typeface
import 'typeface-open-sans';

// import CSS to bundle it with webpack
import '../scss/app.scss';

const FontFaceObserver = require('fontfaceobserver');

const openSans = new FontFaceObserver('Open Sans', {
  style: 'normal',
  weight: 400,
});

openSans.load().then(() => {
  console.log('Open Sans has loaded'); ´
});

Cooper Hewitt CSS declaration doesn't work

Hi!
The font Cooper Hewitt doesn't work because it has 2 src declaration as seen there: https://github.com/KyleAMathews/typefaces/blob/master/packages/cooper-hewitt/index.css#L4

If you remove one, it works fine again.

Thanks!

typeface-poppins files not included

The files for poppins are not included in the npm package when it is installed

Any chance you could add sofachrome?

http://www.1001fonts.com/sofachrome-font.html

Use Fira Sans from FontSquirrel

Compared to Google Fonts, FontSquirrel's Fira Sans includes some extra intermediate weights, e.g. "Fira Sans Hair", "Fira Sans Book" and "Fira Sans Heavy".

Would it be possible to use the version from FontSquirrel?

Add League Spartan

Hi Kyle,

Any chance you could add 'League Spartan' to the packages?

https://www.theleagueofmoveabletype.com/league-spartan

I'd be happy to do it myself if I knew what to do!

I have my gatsby develop and build working fine with fonts included via url('the font'); but in production something is going awry, so looking for another way to handle webfonts.

webpack config instructions

Any chance you can include the mentioned "loaders setup for loading css and font files"? I installed the node module for the font and imported it into my entry file but my font doesn't change. No webpack error, just not seeing new font.

Would be helpful to see an example of what the webpack.config file should look like.

Thanks