From 3f174fcef6b614ee58716b7ec1b2744e137069ae Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Mon, 26 Sep 2022 17:09:36 -0700 Subject: Remove slnt/ital VF axis This removes the slant/italic variable axis and breaks up the font in two: roman and italic. This change will allow diverging designs for italic (for example single-storey a). It also addresses the fact that most software, including web browsers, doesn't handle VFs with slnt or ital well. --- misc/dist/install-linux.txt | 4 +- misc/dist/install-mac.txt | 8 +- misc/dist/install-win.txt | 7 +- misc/dist/inter.css | 239 +++++++++----------------------------------- 4 files changed, 59 insertions(+), 199 deletions(-) (limited to 'misc/dist') diff --git a/misc/dist/install-linux.txt b/misc/dist/install-linux.txt index 7e83c95f8..d04e35b35 100644 --- a/misc/dist/install-linux.txt +++ b/misc/dist/install-linux.txt @@ -7,8 +7,8 @@ differently. These instructions are for the most common Linux distributions: 1. Create a folder called ".fonts" in your home directory. Example: mkdir -p ~/.fonts -2. Copy the otf files in the "Inter Desktop" folder into your .fonts directory - Example: cp "Inter Desktop"/*.otf ~/.fonts/ +2. Copy the otf files in the "Desktop" folder into your .fonts directory + Example: cp "Desktop"/*.otf ~/.fonts/ You may have to restart apps and/or your window server session. diff --git a/misc/dist/install-mac.txt b/misc/dist/install-mac.txt index 36c0517d4..f68ea93c5 100644 --- a/misc/dist/install-mac.txt +++ b/misc/dist/install-mac.txt @@ -6,13 +6,13 @@ Using Font Book: 1. Open the "Font Book" application. 2. In the main menu, select File, then Add Fonts... -3. Find the "Inter Desktop" folder, select the folder (or open the folder and +3. Find the "Desktop" folder, select the folder (or open the folder and select all the files inside the folder) and press the Open button. Using Finder: -1. Copy the "Inter Desktop" folder -2. Press cmd-shift-G in Finder and go to: ~/Library/Fonts +1. Copy the files in the "Desktop" folder +2. Press cmd-shift-G in Finder and go to: ~/Library/Fonts 3. Delete any existing "Inter" files and folders -4. Paste the "Inter Desktop" folder +4. Paste the copied files diff --git a/misc/dist/install-win.txt b/misc/dist/install-win.txt index 85c22af00..b1c757a11 100644 --- a/misc/dist/install-win.txt +++ b/misc/dist/install-win.txt @@ -1,8 +1,8 @@ Installing on Windows 10: -1. Copy the "Inter Desktop" folder in the zip file to your Desktop. -2. Open the "Inter Desktop" folder on your Desktop. +1. Copy the "Desktop" folder in the zip file to your Desktop. +2. Open the "Desktop" folder on your Desktop. 4. Select all font files. 5. Right-click the selected files and choose "Install for all users". @@ -21,5 +21,4 @@ of text. However, the hints for Inter are automatically generated and are not always a good thing. If you do prefer to use the version with hints, use the font files in the -"Inter Hinted for Windows/Desktop" folder instead of "Inter Desktop". - +"Desktop with TrueType hints" folder instead of "Desktop". diff --git a/misc/dist/inter.css b/misc/dist/inter.css index f45001012..78359f9d7 100644 --- a/misc/dist/inter.css +++ b/misc/dist/inter.css @@ -1,200 +1,61 @@ +/* Variable fonts usage: +:root { font-family: 'Inter', sans-serif; } +@supports (font-variation-settings: normal) { + :root { font-family: 'InterVar', sans-serif; font-optical-sizing: auto; } +} */ @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 100; - font-display: swap; - src: url("Inter-Thin.woff2?v=3.19") format("woff2"), - url("Inter-Thin.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 100; - font-display: swap; - src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"), - url("Inter-ThinItalic.woff?v=3.19") format("woff"); -} - -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 200; - font-display: swap; - src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"), - url("Inter-ExtraLight.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 200; - font-display: swap; - src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"), - url("Inter-ExtraLightItalic.woff?v=3.19") format("woff"); -} - -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url("Inter-Light.woff2?v=3.19") format("woff2"), - url("Inter-Light.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 300; - font-display: swap; - src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"), - url("Inter-LightItalic.woff?v=3.19") format("woff"); -} - -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url("Inter-Regular.woff2?v=3.19") format("woff2"), - url("Inter-Regular.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: url("Inter-Italic.woff2?v=3.19") format("woff2"), - url("Inter-Italic.woff?v=3.19") format("woff"); -} - -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url("Inter-Medium.woff2?v=3.19") format("woff2"), - url("Inter-Medium.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 500; - font-display: swap; - src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"), - url("Inter-MediumItalic.woff?v=3.19") format("woff"); -} - -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"), - url("Inter-SemiBold.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 600; - font-display: swap; - src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"), - url("Inter-SemiBoldItalic.woff?v=3.19") format("woff"); -} - -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url("Inter-Bold.woff2?v=3.19") format("woff2"), - url("Inter-Bold.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 700; - font-display: swap; - src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"), - url("Inter-BoldItalic.woff?v=3.19") format("woff"); -} - -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"), - url("Inter-ExtraBold.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 800; - font-display: swap; - src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"), - url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff"); -} - -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: url("Inter-Black.woff2?v=3.19") format("woff2"), - url("Inter-Black.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 900; - font-display: swap; - src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"), - url("Inter-BlackItalic.woff?v=3.19") format("woff"); -} - -/* ------------------------------------------------------- -Variable font. -Usage: - - html { font-family: 'Inter', sans-serif; } - @supports (font-variation-settings: normal) { - html { font-family: 'Inter var', sans-serif; } - } -*/ -@font-face { - font-family: 'Inter var'; + font-family: 'InterVar'; font-weight: 100 900; font-display: swap; font-style: normal; font-named-instance: 'Regular'; - src: url("Inter-roman.var.woff2?v=3.19") format("woff2"); + src: url("Inter.var.woff2?v=3.19") format("woff2-variations"), + url("Inter.var.woff2?v=3.19") format("woff2"); } @font-face { - font-family: 'Inter var'; + font-family: 'InterVar'; font-weight: 100 900; font-display: swap; font-style: italic; font-named-instance: 'Italic'; - src: url("Inter-italic.var.woff2?v=3.19") format("woff2"); -} - - -/* -------------------------------------------------------------------------- -[EXPERIMENTAL] Multi-axis, single variable font. - -Slant axis is not yet widely supported (as of February 2019) and thus this -multi-axis single variable font is opt-in rather than the default. - -When using this, you will probably need to set font-variation-settings -explicitly, e.g. - - * { font-variation-settings: "slnt" 0deg } - .italic { font-variation-settings: "slnt" 10deg } - -*/ -@font-face { - font-family: 'Inter var experimental'; - font-weight: 100 900; - font-display: swap; - font-style: oblique 0deg 10deg; - src: url("Inter.var.woff2?v=3.19") format("woff2"); -} + src: url("Inter-italic.var.woff2?v=3.19") format("woff2-variations"), + url("Inter-italic.var.woff2?v=3.19") format("woff2"); +} +/* static fonts "Inter" */ +@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url("Inter-Thin.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url("Inter-Light.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("Inter-Regular.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url("Inter-Italic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("Inter-Medium.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("Inter-Bold.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url("Inter-Black.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"); } +/* static fonts "InterDisplay" */ +@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 100; font-display: swap; src: url("Inter-DisplayThin.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 100; font-display: swap; src: url("Inter-DisplayThinItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 200; font-display: swap; src: url("Inter-DisplayExtraLight.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 200; font-display: swap; src: url("Inter-DisplayExtraLightItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 300; font-display: swap; src: url("Inter-DisplayLight.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 300; font-display: swap; src: url("Inter-DisplayLightItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 400; font-display: swap; src: url("Inter-DisplayRegular.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 400; font-display: swap; src: url("Inter-DisplayItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 500; font-display: swap; src: url("Inter-DisplayMedium.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 500; font-display: swap; src: url("Inter-DisplayMediumItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 600; font-display: swap; src: url("Inter-DisplaySemiBold.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 600; font-display: swap; src: url("Inter-DisplaySemiBoldItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 700; font-display: swap; src: url("Inter-DisplayBold.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 700; font-display: swap; src: url("Inter-DisplayBoldItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 800; font-display: swap; src: url("Inter-DisplayExtraBold.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 800; font-display: swap; src: url("Inter-DisplayExtraBoldItalic.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 900; font-display: swap; src: url("Inter-DisplayBlack.woff2?v=3.19") format("woff2"); } +@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 900; font-display: swap; src: url("Inter-DisplayBlackItalic.woff2?v=3.19") format("woff2"); } -- cgit v1.2.3