system-font-i18n-css

A beautiful, modern, native system font stack for rendering multilingual text, consistent across all major desktop and mobile operating systems and browsers.

Showing:

Popularity

Downloads/wk

8

GitHub Stars

6

Maintenance

Last Commit

2yrs ago

Contributors

4

Package

Dependencies

0

Size (min+gzip)

0.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

system-font-i18n-css

CircleCI Greenkeeper David npm npm

A beautiful modern native system font stack for rendering multilingual text, consistent across all major desktop and mobile operating systems and browsers.

system-font-i18n Provides 5 weights (Thin, Light, Regular, Bold, Heavy) and supports Italic variants for each weight. This font stack provides more consistent per-character typesetting across western and asian languages on all major modern desktop and mobile operating systems and browsers.

Preview

Typography preview

View the docs for type specimens and example text.

Docs

Usage

General

The robust and preferred method is to reference the system-sans-serif.css stylesheet in the <head> of the html document. Then add the utility helper class to the body class.

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="system-sans-serif.css">
</head>
<body class="system-sans-serif">
  <p>this is now using the system font!</p>
</body>

Ember

Use yarn or npm to install the package.

yarn add system-font-i18n-css -D

Add the include path to your ember-cli-build.js file.

var app = new EmberApp(defaults, {
    // …
    sassOptions: {
      includePaths: [
        // …
        'node_modules/system-font-i18n-css',
        // …
      ],
    },
    // …
});

Import the CSS into your Ember project.

@import "system-font-i18n-css";  /* This should be AT or near the top */
/* … other imports */

Add the system-sans-serif CSS classname to the element to be styled, e.g.:

<!--- HTML head -->
<body class="system-sans-serif">
<!-- body -->

LICENSE

MIT

A product of (せい)(しん)(こう)() (seishinkouki) Co., Ltd

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100