summaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorRasmus Andersson <rasmus@notion.se>2017-09-19 01:58:34 +0300
committerRasmus Andersson <rasmus@notion.se>2017-09-19 01:58:34 +0300
commit4fdb4c927e5cfd5bed84e2355bc890337ec34aa5 (patch)
tree7d856f7c45ac13acf53b89e3a466564665b2059c /docs
parenta213c92c252d314cdf567073e726fa34013f9767 (diff)
downloadinter-4fdb4c927e5cfd5bed84e2355bc890337ec34aa5.tar.xz
Rename family from "Interface" to "Inter UI"
Diffstat (limited to 'docs')
-rw-r--r--docs/README.md2
-rw-r--r--docs/glyphs/index.html26
-rw-r--r--docs/index.css2
-rw-r--r--docs/index.html87
-rw-r--r--docs/inter-ui.css59
-rw-r--r--docs/interface.css59
-rw-r--r--docs/lab/index.html76
7 files changed, 146 insertions, 165 deletions
diff --git a/docs/README.md b/docs/README.md
index 916fe231f..193ed97ee 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1 +1 @@
-This directory is published as a website by Github at [https://rsms.me/interface](https://rsms.me/interface/)
+This directory is published as a website by Github at [https://rsms.me/inter](https://rsms.me/inter/)
diff --git a/docs/glyphs/index.html b/docs/glyphs/index.html
index dd140fc81..b46312133 100644
--- a/docs/glyphs/index.html
+++ b/docs/glyphs/index.html
@@ -2,32 +2,32 @@
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
- <title>Repertoire – Interface font family</title>
+ <title>Repertoire – Inter UI font family</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta property="og:title" content="Repertoire of the Interface font family">
- <meta property="twitter:title" content="Repertoire of the Interface font family">
- <meta property="description" content="Interface is a new typeface optimized for high legibility on computer screens">
- <meta property="og:description" content="Interface is a new typeface optimized for high legibility on computer screens">
- <meta property="twitter:description" content="Interface is a new typeface optimized for high legibility on computer screens">
+ <meta property="og:title" content="Inter UI font family">
+ <meta property="twitter:title" content="Inter UI font family">
+ <meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces">
+ <meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces">
+ <meta property="twitter:description" content="Inter UI is a new typeface optimized for computer user interfaces">
<meta property="twitter:card" content="summary">
<meta property="twitter:site" content="@rsms">
<meta property="twitter:creator" content="@rsms">
- <meta property="og:image" content="https://rsms.me/interface/res/poster.png">
- <meta property="twitter:image" content="https://rsms.me/interface/res/poster.png">
+ <meta property="og:image" content="https://rsms.me/inter/res/poster.png">
+ <meta property="twitter:image" content="https://rsms.me/inter/res/poster.png">
<meta property="fb:app_id" content="38027689216">
<meta property="fb:admins" content="728642302">
- <meta property="og:url" content="https://rsms.me/interface/">
+ <meta property="og:url" content="https://rsms.me/inter/">
<meta property="og:site_name" content="rsms.me">
<meta property="og:type" content="product">
<meta property="og:locale" content="en_US" />
<link rel="icon" type="image/png" href="../favicon.ico" />
- <link href="../interface.css" rel="stylesheet">
+ <link href="../inter-ui.css" rel="stylesheet">
<link href="../index.css" rel="stylesheet">
<link href="glyphs.css" rel="stylesheet">
</head>
@@ -3168,10 +3168,10 @@
</div><!--END-SVGS don't remove this comment-->
<div class="row intro"><div>
- <h2 class="back"><a href="../">The Interface font family</a></h2>
- <h1><a href="./">Interface glyphs</a></h1>
+ <h2 class="back"><a href="../">The Inter UI font family</a></h2>
+ <h1><a href="./">Inter UI glyphs</a></h1>
<p>
- This shows the complete set of glyphs in Interface Regular.
+ This shows the complete set of glyphs in Inter UI Regular.
You can zoom in and out by pressing
<kbd>⌘</kbd><kbd>+</kbd> and
<kbd>⌘</kbd><kbd>−</kbd> on your keyboard.
diff --git a/docs/index.css b/docs/index.css
index 438eeebd0..b131f75fd 100644
--- a/docs/index.css
+++ b/docs/index.css
@@ -3,7 +3,7 @@ html { }
body {
background-color: #f4f4f4;
color: #414141;
- font: 16px/22px Interface, sans-serif;
+ font: 16px/22px 'Inter UI', sans-serif;
letter-spacing: -0.1px;
font-weight: 400;
padding-bottom: 30px;
diff --git a/docs/index.html b/docs/index.html
index 764f68c9d..8a031dca0 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,24 +2,22 @@
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
- <title>Interface font family</title>
+ <title>Inter UI font family</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <meta property="og:title" content="Interface font family">
- <meta property="twitter:title" content="Interface font family">
- <meta property="description" content="Interface is a new typeface optimized for high legibility on computer screens">
- <meta property="og:description" content="Interface is a new typeface optimized for high legibility on computer screens">
- <meta property="twitter:description" content="Interface is a new typeface optimized for high legibility on computer screens">
+ <meta property="og:title" content="Inter UI font family">
+ <meta property="twitter:title" content="Inter UI font family">
+ <meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces">
+ <meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces">
+ <meta property="twitter:description" content="Inter UI is a new typeface optimized for computer user interfaces">
<meta property="twitter:card" content="summary">
<meta property="twitter:site" content="@rsms">
<meta property="twitter:creator" content="@rsms">
- <meta property="og:image" content="https://rsms.me/interface/res/poster.png">
- <meta property="twitter:image" content="https://rsms.me/interface/res/poster.png">
-
+ <meta property="og:image" content="https://rsms.me/intra/res/poster.png">
+ <meta property="twitter:image" content="https://rsms.me/intra/res/poster.png">
<meta property="fb:app_id" content="38027689216">
- <meta property="og:url" content="https://rsms.me/interface/">
+ <meta property="og:url" content="https://rsms.me/intra/">
<meta property="og:site_name" content="rsms.me">
<meta property="og:type" content="product">
<meta property="og:locale" content="en_US" />
@@ -27,17 +25,17 @@
<link rel="icon" type="image/png" href="favicon.ico" />
- <link href="interface.css?v=2" rel="stylesheet">
+ <link href="inter-ui.css?v=2" rel="stylesheet">
<link href="index.css?v=2" rel="stylesheet">
</head>
<body>
<script src="index.js"></script>
<div class="row"><div>
- <h1>The Interface font family</h1>
+ <h1>The Inter UI font family</h1>
<p>
- Interface is a font for highly legible text on computer screens.<br>
- <a class="fat" href="https://github.com/rsms/interface/releases/latest/">Download the latest release</a>
+ Inter UI is a font for highly legible text on computer screens.<br>
+ <a class="fat" href="https://github.com/rsms/inter/releases/latest/">Download the latest release</a>
or try it out in the <a href="lab/" class="fat">playground</a>
</p>
</div></div>
@@ -45,14 +43,14 @@
<div class="row white" style="padding-bottom:0"><div>
<h2><a id="sample" href="#sample">Sample</a></h2>
<p style="margin-bottom:0">
- <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/Interface-samples" class="plain"><img src="res/sample.png" width="888" style="width:100%;display:block"></a>
+ <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/" class="plain"><img src="res/sample.png" width="888" style="width:100%;display:block"></a>
</p>
</div></div>
<div class="row dark"><div>
<h2><a id="free" href="#free">How much does it cost?</a></h2>
<p>
- Interface is a <a href="https://github.com/rsms/interface">free and open source</a> font family. You are free to use this font in almost any way imaginable.
+ Inter UI is a <a href="https://github.com/rsms/inter">free and open source</a> font family. You are free to use this font in almost any way imaginable.
Refer to the <a href="https://choosealicense.com/licenses/ofl-1.1/">SIL Open Font License 1.1</a> for exact details on what the conditions and restrictions are.
</p>
@@ -61,16 +59,16 @@
<h2><a id="usage" href="#usage">How do I use it?</a></h2>
<p>
Using the font is as easy as
- <a href="https://github.com/rsms/interface/releases/latest/">download &amp; installing</a> locally on your computer.
+ <a href="https://github.com/rsms/inter/releases/latest/">download &amp; installing</a> locally on your computer.
</p>
<p>
- You're free to bundle copies of Interface with your software, even if it's
- commercial and you charge money for your software. Interface can also be used
+ You're free to bundle copies of Inter UI with your software, even if it's
+ commercial and you charge money for your software. Inter UI can also be used
on the web by either hosting the font files yourself or by including this CSS:
</p>
- <code>@import url('https://rsms.me/interface/interface.css');</code>
- <p>Use the following CSS rules to specify the Interface family:</p>
- <code>font-family: Interface, sans-serif;</code>
+ <code>@import url('https://rsms.me/inter/inter-ui.css');</code>
+ <p>Use the following CSS rules to specify the Inter UI family:</p>
+ <code>font-family: 'Inter UI', sans-serif;</code>
</div></div>
<div class="row"><div>
@@ -172,16 +170,16 @@
<div class="row-divider"></div>
<div class="row"><div>
- <h2><a id="story" href="#story">The story behind Interface</a></h2>
+ <h2><a id="story" href="#story">The story behind Inter UI</a></h2>
<p>
- Interface started out in late 2016 as an experiment to build a perfectly
+ Inter UI started out in late 2016 as an experiment to build a perfectly
pixel-fitting font at a specific small size (11px.) The idea was that
by crafting a font in a particular way, with a particular coordinate system
(Units Per EM), and for a particular target rasterization size (11), it would
be possible to get the best of both sharpness and readability.
</p>
<p>
- However after a few months of using an early version of Interface, it dawned
+ However after a few months of using an early version of Inter UI, it dawned
on everyone exposed to the test that this approach had some serious real-world
problems. Most notably that it was really hard to read longer text. Because of
the pixel-aligning nature of that approach, the font took an almost
@@ -193,17 +191,17 @@
The project was rebooted with a different approach, sticking with the
specific UPM, but crafting glyphs and kerning in a way that made for
more variation in the rhythm and smoother vertical and horizontal stems.
- As Interface was being developed, it was tested on an internal version of
- <a href="https://www.figma.com/">Figma</a>—where the author of Interface works as a designer—and slowly improved upon based on experience and feedback.
+ As Inter UI was being developed, it was tested on an internal version of
+ <a href="https://www.figma.com/">Figma</a>—where the author of Inter UI works as a designer—and slowly improved upon based on experience and feedback.
</p>
<p>&nbsp;</p>
<h2><a id="status" href="#status">Current status &amp; usability</a></h2>
<p>
- Interface works great for English-language text, and pretty well for other
+ Inter UI works great for English-language text, and pretty well for other
Latin and Cyrillic languages. There's still a lot of work to be done, and
- <a href="https://github.com/rsms/interface/blob/master/CONTRIBUTING.md">contributions are warmly welcomed</a>. The playground contains <a href="lab/?sample=Body%20text%201&size=16">a lot of samples</a>, including some common <a href="lab/?sample=Kerning%20body%20multi-lang&size=16">non English-language words in the playground.</a>
+ <a href="https://github.com/rsms/inter/blob/master/CONTRIBUTING.md">contributions are warmly welcomed</a>. The playground contains <a href="lab/?sample=Body%20text%201&size=16">a lot of samples</a>, including some common <a href="lab/?sample=Kerning%20body%20multi-lang&size=16">non English-language words in the playground.</a>
</p>
<p>
@@ -226,34 +224,17 @@
source directory.
</li>
- <li class="q" id="faq-naming">
- There's another font family with a similar name (InterFace).
- How do I make sure I'm talking about the right font?
- </li>
- <li class="a">
- The world is a small place and just like all the
- <a href="https://en.wikipedia.org/wiki/Eric_Erickson">Eric Ericksons</a>,
- name alone sometimes does not suffice for unambiguous identity.
- The best way to be clear about what font you are talking about is to
- use the URL of this page (<q>rsms.me/interface</q>) when telling
- people about it.
- <a href="https://figma.com/">Design tools</a> and other software uses
- <a href="https://www.microsoft.com/typography/otspec/name.htm#nameIDs">a set of information embedded into every font</a> for identity, so names are only
- important for humans, not computers, and so you need not to worry about
- "conflicts." At least not with well-behaved software.
- </li>
-
<li class="q" id="faq-contribute">
- Can I help with improving Interface?
+ Can I help with improving Inter UI?
</li>
<li class="a">
- Yes you can! Interface is an open-source project, meaning the source
+ Yes you can! Inter UI is an open-source project, meaning the source
code—or "source design" if you will—that is used to build the font files
- <a href="https://github.com/rsms/interface">are freely available</a> to improve upon.
+ <a href="https://github.com/rsms/inter">are freely available</a> to improve upon.
Font making requires a fair bit of technical work and
depending on what you'd like to do, some things might be more fun
depending on your technical skills.
- The <a href="https://github.com/rsms/interface/blob/master/CONTRIBUTING.md">"Contributing" document</a> is a great place to start. The document outlines where
+ The <a href="https://github.com/rsms/inter/blob/master/CONTRIBUTING.md">"Contributing" document</a> is a great place to start. The document outlines where
you can have the biggest impact, how things are setup and how to get
started.
</li>
@@ -262,7 +243,7 @@
This website claims work started in 2016, but the git repository's log says it started later?
</li>
<li class="a">
- Interface was developed in an a private, internal git repository
+ Inter UI was developed in an a private, internal git repository
starting in November 2016, prior to being published on August 22, 2017.
Between November 2016 and August 2017, there were
<num>2&#x2006;990&#x2006;150</num> line edits made across 247 versions.
@@ -290,7 +271,7 @@
</li>
<li class="q" id="faq-contact">
- I've made a cool thing that uses Interface, can I share it with you?
+ I've made a cool thing that uses Inter UI, can I share it with you?
&nbsp;<dem>or</dem>
</li>
<li class="q">
diff --git a/docs/inter-ui.css b/docs/inter-ui.css
new file mode 100644
index 000000000..3a5ee56ac
--- /dev/null
+++ b/docs/inter-ui.css
@@ -0,0 +1,59 @@
+@font-face {
+ font-family: 'Inter UI';
+ font-style: normal;
+ font-weight: 400;
+ src: url("font-files/Inter-UI-Regular.woff2?v=1.8") format("woff2"),
+ url("font-files/Inter-UI-Regular.woff?v=1.8") format("woff");
+}
+@font-face {
+ font-family: 'Inter UI';
+ font-style: italic;
+ font-weight: 400;
+ src: url("font-files/Inter-UI-RegularItalic.woff2?v=1.8") format("woff2"),
+ url("font-files/Inter-UI-RegularItalic.woff?v=1.8") format("woff");
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: normal;
+ font-weight: 500;
+ src: url("font-files/Inter-UI-Medium.woff2?v=1.8") format("woff2"),
+ url("font-files/Inter-UI-Medium.woff?v=1.8") format("woff");
+}
+@font-face {
+ font-family: 'Inter UI';
+ font-style: italic;
+ font-weight: 500;
+ src: url("font-files/Inter-UI-MediumItalic.woff2?v=1.8") format("woff2"),
+ url("font-files/Inter-UI-MediumItalic.woff?v=1.8") format("woff");
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: normal;
+ font-weight: 700;
+ src: url("font-files/Inter-UI-Bold.woff2?v=1.8") format("woff2"),
+ url("font-files/Inter-UI-Bold.woff?v=1.8") format("woff");
+}
+@font-face {
+ font-family: 'Inter UI';
+ font-style: italic;
+ font-weight: 700;
+ src: url("font-files/Inter-UI-BoldItalic.woff2?v=1.8") format("woff2"),
+ url("font-files/Inter-UI-BoldItalic.woff?v=1.8") format("woff");
+}
+
+@font-face {
+ font-family: 'Inter UI';
+ font-style: normal;
+ font-weight: 900;
+ src: url("font-files/Inter-UI-Black.woff2?v=1.8") format("woff2"),
+ url("font-files/Inter-UI-Black.woff?v=1.8") format("woff");
+}
+@font-face {
+ font-family: 'Inter UI';
+ font-style: italic;
+ font-weight: 900;
+ src: url("font-files/Inter-UI-BlackItalic.woff2?v=1.8") format("woff2"),
+ url("font-files/Inter-UI-BlackItalic.woff?v=1.8") format("woff");
+}
diff --git a/docs/interface.css b/docs/interface.css
deleted file mode 100644
index 19abb61d0..000000000
--- a/docs/interface.css
+++ /dev/null
@@ -1,59 +0,0 @@
-@font-face {
- font-family: 'Interface';
- font-style: normal;
- font-weight: 400;
- src: url("font-files/Interface-Regular.woff2?v=1.8") format("woff2"),
- url("font-files/Interface-Regular.woff?v=1.8") format("woff");
-}
-@font-face {
- font-family: 'Interface';
- font-style: italic;
- font-weight: 400;
- src: url("font-files/Interface-RegularItalic.woff2?v=1.8") format("woff2"),
- url("font-files/Interface-RegularItalic.woff?v=1.8") format("woff");
-}
-
-@font-face {
- font-family: 'Interface';
- font-style: normal;
- font-weight: 500;
- src: url("font-files/Interface-Medium.woff2?v=1.8") format("woff2"),
- url("font-files/Interface-Medium.woff?v=1.8") format("woff");
-}
-@font-face {
- font-family: 'Interface';
- font-style: italic;
- font-weight: 500;
- src: url("font-files/Interface-MediumItalic.woff2?v=1.8") format("woff2"),
- url("font-files/Interface-MediumItalic.woff?v=1.8") format("woff");
-}
-
-@font-face {
- font-family: 'Interface';
- font-style: normal;
- font-weight: 700;
- src: url("font-files/Interface-Bold.woff2?v=1.8") format("woff2"),
- url("font-files/Interface-Bold.woff?v=1.8") format("woff");
-}
-@font-face {
- font-family: 'Interface';
- font-style: italic;
- font-weight: 700;
- src: url("font-files/Interface-BoldItalic.woff2?v=1.8") format("woff2"),
- url("font-files/Interface-BoldItalic.woff?v=1.8") format("woff");
-}
-
-@font-face {
- font-family: 'Interface';
- font-style: normal;
- font-weight: 900;
- src: url("font-files/Interface-Black.woff2?v=1.8") format("woff2"),
- url("font-files/Interface-Black.woff?v=1.8") format("woff");
-}
-@font-face {
- font-family: 'Interface';
- font-style: italic;
- font-weight: 900;
- src: url("font-files/Interface-BlackItalic.woff2?v=1.8") format("woff2"),
- url("font-files/Interface-BlackItalic.woff?v=1.8") format("woff");
-}
diff --git a/docs/lab/index.html b/docs/lab/index.html
index 4602bf9af..e9b325d92 100644
--- a/docs/lab/index.html
+++ b/docs/lab/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="../favicon.ico" />
- <link href="../interface.css" rel="stylesheet">
+ <link href="../inter-ui.css" rel="stylesheet">
<script type="text/javascript">
const samples = new Map()
@@ -700,67 +700,67 @@ for (const ch of uniqueChars) {
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
@font-face {
- font-family: 'Interface-VERSION';
+ font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 400;
- src: url("fonts/Interface-Regular.woff2") format("woff2"),
- url("fonts/Interface-Regular.woff") format("woff");
+ src: url("fonts/Inter-UI-Regular.woff2") format("woff2"),
+ url("fonts/Inter-UI-Regular.woff") format("woff");
}
@font-face {
- font-family: 'Interface-VERSION';
+ font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 400;
- src: url("fonts/Interface-RegularItalic.woff2") format("woff2"),
- url("fonts/Interface-RegularItalic.woff") format("woff");
+ src: url("fonts/Inter-UI-RegularItalic.woff2") format("woff2"),
+ url("fonts/Inter-UI-RegularItalic.woff") format("woff");
}
@font-face {
- font-family: 'Interface-VERSION';
+ font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 500;
- src: url("fonts/Interface-Medium.woff2") format("woff2"),
- url("fonts/Interface-Medium.woff") format("woff");
+ src: url("fonts/Inter-UI-Medium.woff2") format("woff2"),
+ url("fonts/Inter-UI-Medium.woff") format("woff");
}
@font-face {
- font-family: 'Interface-VERSION';
+ font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 500;
- src: url("fonts/Interface-MediumItalic.woff2") format("woff2"),
- url("fonts/Interface-MediumItalic.woff") format("woff");
+ src: url("fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
+ url("fonts/Inter-UI-MediumItalic.woff") format("woff");
}
@font-face {
- font-family: 'Interface-VERSION';
+ font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 700;
- src: url("fonts/Interface-Bold.woff2") format("woff2"),
- url("fonts/Interface-Bold.woff") format("woff");
+ src: url("fonts/Inter-UI-Bold.woff2") format("woff2"),
+ url("fonts/Inter-UI-Bold.woff") format("woff");
}
@font-face {
- font-family: 'Interface-VERSION';
+ font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 700;
- src: url("fonts/Interface-BoldItalic.woff2") format("woff2"),
- url("fonts/Interface-BoldItalic.woff") format("woff");
+ src: url("fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
+ url("fonts/Inter-UI-BoldItalic.woff") format("woff");
}
@font-face {
- font-family: 'Interface-VERSION';
+ font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 900;
- src: url("fonts/Interface-Black.woff2") format("woff2"),
- url("fonts/Interface-Black.woff") format("woff");
+ src: url("fonts/Inter-UI-Black.woff2") format("woff2"),
+ url("fonts/Inter-UI-Black.woff") format("woff");
}
@font-face {
- font-family: 'Interface-VERSION';
+ font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 900;
- src: url("fonts/Interface-BlackItalic.woff2") format("woff2"),
- url("fonts/Interface-BlackItalic.woff") format("woff");
+ src: url("fonts/Inter-UI-BlackItalic.woff2") format("woff2"),
+ url("fonts/Inter-UI-BlackItalic.woff") format("woff");
}
-.interface, .interface input, .interface select {
- font-family: 'Interface-VERSION', 'Interface', serif !important;
+.inter-ui, .inter-ui input, .inter-ui select {
+ font-family: 'Inter-UI-VERSION', 'Inter UI', serif !important;
}
</style>
@@ -1046,11 +1046,11 @@ canvas {
<script type="text/javascript">
const fontVersion = Math.round(Date.now()).toString(36)
-let fontFamilyName = 'Interface-v' + fontVersion
+let fontFamilyName = 'Inter-UI-v' + fontVersion
const fontCSSTemplate = document.querySelector('#font-css')
const fontCSS = fontCSSTemplate.cloneNode(true)
-fontCSS.innerHTML = fontCSS.innerHTML.replace(/Interface-VERSION/g, fontFamilyName)
-fontFamilyName += ', Interface'
+fontCSS.innerHTML = fontCSS.innerHTML.replace(/Inter-UI-VERSION/g, fontFamilyName)
+fontFamilyName += ", 'Inter UI'"
fontCSS.setAttribute('id', '')
fontCSS.setAttribute('type', 'text/css')
document.head.appendChild(fontCSS)
@@ -1058,7 +1058,7 @@ document.head.appendChild(fontCSS)
</script>
</head>
<body>
- <div class="options interface">
+ <div class="options inter-ui">
<select name="sample"></select>
<label>
@@ -1219,7 +1219,7 @@ document.head.appendChild(fontCSS)
<div class="preview">
<samples>
- <sample contenteditable class="primary interface"></sample>
+ <sample contenteditable class="primary inter-ui"></sample>
<sample contenteditable class="secondary"></sample>
</samples>
@@ -1227,7 +1227,7 @@ document.head.appendChild(fontCSS)
<canvas id="renderCanvas" width="120" height="50"></canvas>
</div>
- <div id="measure" class="interface">Åj</div>
+ <div id="measure" class="inter-ui">Åj</div>
<script type="text/javascript">
@@ -1422,9 +1422,9 @@ class Vars {
function main() {
const vars = new Vars(document.location.search)
- let interfaceSample = document.querySelector('sample.interface');
+ let interUISample = document.querySelector('sample.inter-ui');
let secondarySample = document.querySelector('sample.secondary');
- secondarySample.innerText = interfaceSample.innerText;
+ secondarySample.innerText = interUISample.innerText;
const renderCanvas = document.querySelector('#renderCanvas')
const displayCanvas = document.querySelector('#displayCanvas')
@@ -1465,12 +1465,12 @@ function main() {
if (typeof sampleText == 'object' && sampleText.toHTML) {
const html = sampleText.toHTML()
- interfaceSample.innerHTML = html
+ interUISample.innerHTML = html
secondarySample.innerHTML = html
} else {
sampleText = String(sampleText).replace(/^[\s\r\n\r]+|[\s\r\n\r]+$/g, '')
if (sampleText) {
- interfaceSample.innerText = sampleText
+ interUISample.innerText = sampleText
secondarySample.innerText = sampleText
}
}
@@ -1499,7 +1499,7 @@ function main() {
window.addEventListener('load', measure)
const cssAffectedElements = [
- interfaceSample,
+ interUISample,
secondarySample,
measureDiv
].concat(secondaryFontElements).concat(primaryFontElements)
generated by cgit v1.2.3 (git 2.39.0) at 2024-06-29 10:09:34 +0300