Skip to content

Commit

Permalink
fix: use local Open Sans font from assets instead of dependency
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivangabriele
ivangabriele committed Jan 18, 2024
1 parent 6e92541 commit 88e7f2e
Show file tree
Hide file tree
Showing 7 changed files with 51 additions and 35 deletions.
7 changes: 6 additions & 1 deletion e2e/release/sample/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { DatePicker, DateRangePicker } from '@mtes-mct/monitor-ui'
import { DatePicker, DateRangePicker, Figure } from '@mtes-mct/monitor-ui'
import { useState } from 'react'

function App() {
Expand Down Expand Up @@ -26,6 +26,11 @@ function App() {
withTime
/>
<pre data-cy="fields-daterangepicker-output">{JSON.stringify(dateRangePickerOutut)}</pre>

<h2>Figure</h2>
<p>
This number should be in Open Sans: <Figure>1234</Figure>.
</p>
</>
)
}
Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@
"@chrisneedham/rollup-plugin-peer-deps-external": "2.3.1",
"@commitlint/cli": "18.4.3",
"@commitlint/config-conventional": "17.6.7",
"@fontsource-variable/open-sans": "5.0.23",
"@jest/globals": "29.7.0",
"@rollup/plugin-commonjs": "25.0.3",
"@rollup/plugin-node-resolve": "15.2.3",
Expand Down
34 changes: 22 additions & 12 deletions src/GlobalStyle.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { createGlobalStyle } from 'styled-components'
import '@fontsource-variable/open-sans'

// @ts-ignore
import MarianneBold from './assets/fonts/Marianne-Bold.woff2'
Expand All @@ -17,58 +16,69 @@ import MarianneMediumItalic from './assets/fonts/Marianne-Medium_Italic.woff2'
import MarianneRegular from './assets/fonts/Marianne-Regular.woff2'
// @ts-ignore
import MarianneItalic from './assets/fonts/Marianne-Regular_Italic.woff2'
// @ts-ignore
import OpenSansRegular from './assets/fonts/OpenSans-Regular.woff2'

export const GlobalStyle = createGlobalStyle`
@font-face {
font-family: Marianne;
src: local('Marianne'), local('Marianne-Regular'), url(${MarianneRegular}) format('woff2');
font-weight: normal;
src: local('Marianne'), local('Marianne-Regular'), url(${MarianneRegular}) format('woff2');
}
@font-face {
@font-face {
font-family: Marianne;
src: local('Marianne-Thin'), url(${MarianneLight}) format('woff2');
font-weight: 300;
src: local('Marianne-Thin'), url(${MarianneLight}) format('woff2');
}
@font-face {
font-family: Marianne;
src:local('Marianne-Medium'), url(${MarianneMedium}) format('woff2');
font-weight: 500;
src:local('Marianne-Medium'), url(${MarianneMedium}) format('woff2');
}
@font-face {
font-family: Marianne;
src: local('Marianne-Medium_Italic'), url(${MarianneMediumItalic}) format('woff2');
font-weight: 500;
font-style: italic;
src: local('Marianne-Medium_Italic'), url(${MarianneMediumItalic}) format('woff2');
}
@font-face {
font-family: Marianne;
src: local('Marianne-Thin_Italic'), url(${MarianneLightItalic}) format('woff2');
font-weight: lighter;
font-style: italic;
src: local('Marianne-Thin_Italic'), url(${MarianneLightItalic}) format('woff2');
}
@font-face {
font-family: Marianne;
src:local('Marianne-Regular_Italic'), url(${MarianneItalic}) format('woff2');
font-weight: normal;
font-style: italic;
src:local('Marianne-Regular_Italic'), url(${MarianneItalic}) format('woff2');
}
@font-face {
@font-face {
font-family: Marianne;
src: local('Marianne-Bold'), url(${MarianneBold}) format('woff2');
font-weight: 700;
src: local('Marianne-Bold'), url(${MarianneBold}) format('woff2');
}
@font-face {
@font-face {
font-family: Marianne;
src: local('Marianne-Bold_Italic'), url(${MarianneBoldItalic}) format('woff2');
font-style: italic;
font-weight: 700;
src: local('Marianne-Bold_Italic'), url(${MarianneBoldItalic}) format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-stretch: 100%;
font-style: normal;
font-weight: 400;
src: url(${OpenSansRegular}) format('woff2');
}
body {
Expand Down
34 changes: 22 additions & 12 deletions src/OnlyFontGlobalStyle.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { createGlobalStyle } from 'styled-components'
import '@fontsource-variable/open-sans'

// @ts-ignore
import MarianneBold from './assets/fonts/Marianne-Bold.woff2'
Expand All @@ -17,58 +16,69 @@ import MarianneMediumItalic from './assets/fonts/Marianne-Medium_Italic.woff2'
import MarianneRegular from './assets/fonts/Marianne-Regular.woff2'
// @ts-ignore
import MarianneItalic from './assets/fonts/Marianne-Regular_Italic.woff2'
// @ts-ignore
import OpenSansRegular from './assets/fonts/OpenSans-Regular.woff2'

export const OnlyFontGlobalStyle = createGlobalStyle`
@font-face {
font-family: Marianne;
src: local('Marianne'), local('Marianne-Regular'), url(${MarianneRegular}) format('woff2');
font-weight: normal;
src: local('Marianne'), local('Marianne-Regular'), url(${MarianneRegular}) format('woff2');
}
@font-face {
@font-face {
font-family: Marianne;
src: local('Marianne-Thin'), url(${MarianneLight}) format('woff2');
font-weight: 300;
src: local('Marianne-Thin'), url(${MarianneLight}) format('woff2');
}
@font-face {
font-family: Marianne;
src:local('Marianne-Medium'), url(${MarianneMedium}) format('woff2');
font-weight: 500;
src:local('Marianne-Medium'), url(${MarianneMedium}) format('woff2');
}
@font-face {
font-family: Marianne;
src: local('Marianne-Medium_Italic'), url(${MarianneMediumItalic}) format('woff2');
font-weight: 500;
font-style: italic;
src: local('Marianne-Medium_Italic'), url(${MarianneMediumItalic}) format('woff2');
}
@font-face {
font-family: Marianne;
src: local('Marianne-Thin_Italic'), url(${MarianneLightItalic}) format('woff2');
font-weight: lighter;
font-style: italic;
src: local('Marianne-Thin_Italic'), url(${MarianneLightItalic}) format('woff2');
}
@font-face {
font-family: Marianne;
src:local('Marianne-Regular_Italic'), url(${MarianneItalic}) format('woff2');
font-weight: normal;
font-style: italic;
src:local('Marianne-Regular_Italic'), url(${MarianneItalic}) format('woff2');
}
@font-face {
@font-face {
font-family: Marianne;
src: local('Marianne-Bold'), url(${MarianneBold}) format('woff2');
font-weight: 700;
src: local('Marianne-Bold'), url(${MarianneBold}) format('woff2');
}
@font-face {
@font-face {
font-family: Marianne;
src: local('Marianne-Bold_Italic'), url(${MarianneBoldItalic}) format('woff2');
font-style: italic;
font-weight: 700;
src: local('Marianne-Bold_Italic'), url(${MarianneBoldItalic}) format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-stretch: 100%;
font-style: normal;
font-weight: 400;
src: url(${OpenSansRegular}) format('woff2');
}
body {
Expand Down
Binary file added src/assets/fonts/OpenSans-Regular.woff2
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion src/elements/Figure.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@ export type FigureProps = HTMLAttributes<HTMLSpanElement>
* <Figure /> uses the Open Sans font to render fixed-width digits.
*/
export const Figure = styled.span`
font-family: 'Open Sans Variable', monospace;
font-family: 'Open Sans', monospace;
`
8 changes: 0 additions & 8 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2410,13 +2410,6 @@ __metadata:
languageName: node
linkType: hard

"@fontsource-variable/open-sans@npm:5.0.23":
version: 5.0.23
resolution: "@fontsource-variable/open-sans@npm:5.0.23"
checksum: d6c3e8981d91f20102f8b8c25b76ee9259496c31e3003b78e2330b1b6c90fdd73151e09e7a8e9431bda840786cd68c6948b4fc3e99f57b1959690ad1eabd8013
languageName: node
linkType: hard

"@hapi/hoek@npm:^9.0.0":
version: 9.3.0
resolution: "@hapi/hoek@npm:9.3.0"
Expand Down Expand Up @@ -3107,7 +3100,6 @@ __metadata:
"@chrisneedham/rollup-plugin-peer-deps-external": "npm:2.3.1"
"@commitlint/cli": "npm:18.4.3"
"@commitlint/config-conventional": "npm:17.6.7"
"@fontsource-variable/open-sans": "npm:5.0.23"
"@jest/globals": "npm:29.7.0"
"@rollup/plugin-commonjs": "npm:25.0.3"
"@rollup/plugin-node-resolve": "npm:15.2.3"
Expand Down

0 comments on commit 88e7f2e

Please sign in to comment.