Author: Pedro Lucas Porcellis <porcellis@eletrotupi.com>
all: use a custom font for text (IBM Plex Sans)
assets/style.scss | 5 assets/typo.scss | 324 +++++++++++++++++++++++++++++++++++++++++++++++++
diff --git a/assets/style.scss b/assets/style.scss index 7894352831a26e47bca1f094b87ba63b9acc4e8b..a089747a87ce0b05fd001ea24afe06e525ffa6d8 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -1,9 +1,11 @@ +@import 'typo'; + :root { --content-width: 98rem; --body-padding: 6.4rem; --page-padding: 1.6rem; - --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; @@ -58,6 +60,7 @@ html { font-family: var(--font-family); font-size: var(--font-size-base); + font-feature-settings: "kern" 1,"liga" 1,"calt" 1; color: var(--color-txt); background-color: var(--bg-color); diff --git a/assets/typo.scss b/assets/typo.scss new file mode 100644 index 0000000000000000000000000000000000000000..974a0c49f8d0f329dff4cf6ad43aabfd5f6f5a8c --- /dev/null +++ b/assets/typo.scss @@ -0,0 +1,324 @@ +/* cyrillic-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-italic.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-italic.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-italic.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-italic.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-italic.woff2) format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-italic.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold-italic.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold-italic.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold-italic.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold-italic.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold-italic.woff2) format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold-italic.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold-italic.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold-italic.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold-italic.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold-italic.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold-italic.woff2) format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold-italic.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-regular.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-regular.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-regular.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-regular.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-regular.woff2) format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/fonts/ibmplexsans-regular.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold.woff2) format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/fonts/ibmplexsans-semibold.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold.woff2) format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/fonts/ibmplexsans-bold.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/static/fonts/ibmplexsans-bold-italic.woff2 b/static/fonts/ibmplexsans-bold-italic.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..af079f2979a71d2736457c47a6d5d12a6cd7ca63 Binary files /dev/null and b/static/fonts/ibmplexsans-bold-italic.woff2 differ diff --git a/static/fonts/ibmplexsans-bold.woff2 b/static/fonts/ibmplexsans-bold.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..aee2f963e123b76ef8fda0f8b71f7f8e73b296be Binary files /dev/null and b/static/fonts/ibmplexsans-bold.woff2 differ diff --git a/static/fonts/ibmplexsans-italic.woff2 b/static/fonts/ibmplexsans-italic.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..57523c9d34353ceaa6cd4cb7820f83ac570d836c Binary files /dev/null and b/static/fonts/ibmplexsans-italic.woff2 differ diff --git a/static/fonts/ibmplexsans-regular.woff2 b/static/fonts/ibmplexsans-regular.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..ca64cc5fc21568752a2e5d78af1f14754b49e72e Binary files /dev/null and b/static/fonts/ibmplexsans-regular.woff2 differ diff --git a/static/fonts/ibmplexsans-semibold-italic.woff2 b/static/fonts/ibmplexsans-semibold-italic.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..02306ee746fb9943cda823a4de6af99f1d5edd79 Binary files /dev/null and b/static/fonts/ibmplexsans-semibold-italic.woff2 differ diff --git a/static/fonts/ibmplexsans-semibold.woff2 b/static/fonts/ibmplexsans-semibold.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..78e2fbae4e4124c263890c1d4d53dce11513588d Binary files /dev/null and b/static/fonts/ibmplexsans-semibold.woff2 differ