Skip to content

Latest commit

 

History

History
101 lines (77 loc) · 2.94 KB

README.md

File metadata and controls

101 lines (77 loc) · 2.94 KB
Raw

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