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.
View the docs for type specimens and example text.
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>Use yarn or npm to install the package.
yarn add system-font-i18n-css -DAdd 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 -->A product of 青 心 工 機 Co., Ltd