From 775d4d7ebdf274e4cc8cc707bcb1d78fc1035981 Mon Sep 17 00:00:00 2001 From: Danne Lundqvist Date: Wed, 13 Dec 2023 10:58:22 +0100 Subject: [PATCH 1/3] Added font weights for light, medium, bold and extra bold --- src/showroom/app.tsx | 2 + src/showroom/components/typography.tsx | 62 ++++++++++++++++++++++++++ vite.config.ts | 2 +- 3 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 src/showroom/components/typography.tsx diff --git a/src/showroom/app.tsx b/src/showroom/app.tsx index 66548344..5fe1543d 100644 --- a/src/showroom/app.tsx +++ b/src/showroom/app.tsx @@ -12,9 +12,11 @@ import { BadgeExample } from './components/badge' import { TooltipExample } from './components/tooltip' import { TabsExample } from './components/tabs' import { CalendarExample } from './components/calendar' +import { TypographyExample } from './components/typography' export function App(): JSX.Element { return
+ diff --git a/src/showroom/components/typography.tsx b/src/showroom/components/typography.tsx new file mode 100644 index 00000000..dea8c65d --- /dev/null +++ b/src/showroom/components/typography.tsx @@ -0,0 +1,62 @@ +import { Header } from '../header' +import { Code } from '../code' + +export function TypographyExample(): JSX.Element { + const exampleString = 'å ä æ ö ø Þ ß Å Ä Æ Ö Ø þ' + + return <> +
Typography
+ +
+
+ Light text
+ {exampleString} +
+
+ +Normal text +
`} /> + +
+
+ Normal text
+ {exampleString} +
+
+ +Normal text +`} /> + +
+
+ Medium text
+ {exampleString} +
+
+ +Medium text +`} /> + +
+
+ Bold text
+ {exampleString} +
+
+ +Bold text +`} /> + +
+
+ Extra bold text
+ {exampleString} +
+
+ +Extra bold text +`} /> + + + +} diff --git a/vite.config.ts b/vite.config.ts index 5ac650d2..3d446a78 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -44,7 +44,7 @@ export default defineConfig({ dest: './styles' }, { - src: 'node_modules/@fontsource/inter/files/inter-latin-400-normal.{woff,woff2}', + src: 'node_modules/@fontsource/inter/files/inter-latin-{300,400,500,700,800}-normal.{woff,woff2}', dest: './styles' } ] From f0933d636164225de714ffa02dc1ab94a87f0ccd Mon Sep 17 00:00:00 2001 From: Danne Lundqvist Date: Wed, 13 Dec 2023 11:19:14 +0100 Subject: [PATCH 2/3] Added css for inter font weights --- src/styles/inter.css | 42 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/src/styles/inter.css b/src/styles/inter.css index a98c985b..2dba6656 100644 --- a/src/styles/inter.css +++ b/src/styles/inter.css @@ -1,3 +1,13 @@ +/* inter-latin-300-normal */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-display: swap; + font-weight: 300; + src: url(./files/inter-latin-300-normal.woff2) format('woff2'), url(./files/inter-latin-300-normal.woff) format('woff'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + /* inter-latin-400-normal */ @font-face { font-family: 'Inter'; @@ -5,5 +15,35 @@ font-display: swap; font-weight: 400; src: url(../assets/inter-latin-400-normal.woff2) format('woff2'), url(../assets/inter-latin-400-normal.woff) format('woff'); - unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* inter-latin-500-normal */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-display: swap; + font-weight: 500; + src: url(../assets/inter-latin-500-normal.woff2) format('woff2'), url(../assets/inter-latin-500-normal.woff) format('woff'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* inter-latin-700-normal */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-display: swap; + font-weight: 700; + src: url(../assets/inter-latin-700-normal.woff2) format('woff2'), url(../assets/inter-latin-700-normal.woff) format('woff'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* inter-latin-800-normal */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-display: swap; + font-weight: 800; + src: url(../assets/inter-latin-800-normal.woff2) format('woff2'), url(../assets/inter-latin-800-normal.woff) format('woff'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } From a2d88624ad6f23ef0d29dc56437986a9bb9a1c78 Mon Sep 17 00:00:00 2001 From: Danne Lundqvist Date: Wed, 13 Dec 2023 11:22:59 +0100 Subject: [PATCH 3/3] Amended faulty css asset path --- src/styles/inter.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/inter.css b/src/styles/inter.css index 2dba6656..5c371f00 100644 --- a/src/styles/inter.css +++ b/src/styles/inter.css @@ -4,7 +4,7 @@ font-style: normal; font-display: swap; font-weight: 300; - src: url(./files/inter-latin-300-normal.woff2) format('woff2'), url(./files/inter-latin-300-normal.woff) format('woff'); + src: url(./assets/inter-latin-300-normal.woff2) format('woff2'), url(./assets/inter-latin-300-normal.woff) format('woff'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }