Typography

font-family   

English font is Inter

الخط العربي كايرو

Copy
Edit
<!-- components/Typography/font-family.html --> <h3>English font is Inter</h3> <h3>الخط العربي كايرو</h3>
Copy
Copy
Edit
/* scss/Typography/_font-family.scss */ // @font-face { // font-family: 'mainfont'; // src: url('webfonts/cairo-regular/cairo-regular.eot'); /* IE9 Compat Modes */ // src: url('webfonts/cairo-regular/cairo-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ // url('webfonts/cairo-regular/cairo-regular.woff2') format('woff2'), /* Super Modern Browsers */ // url('webfonts/cairo-regular/cairo-regular.woff') format('woff'), /* Pretty Modern Browsers */ // url('webfonts/cairo-regular/cairo-regular.ttf') format('truetype'), /* Safari, Android, iOS */ // url('webfonts/cairo-regular/cairo-regular.svg#svgFontName') format('svg'); /* Legacy iOS */ // unicode-range: U+0600-06ff; // } // @font-face { // font-family: 'mainfont'; // src: url('webfonts/inter-regular/inter-regular.eot'); /* IE9 Compat Modes */ // src: url('webfonts/inter-regular/inter-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ // url('webfonts/inter-regular/inter-regular.woff2') format('woff2'), /* Super Modern Browsers */ // url('webfonts/inter-regular/inter-regular.woff') format('woff'), /* Pretty Modern Browsers */ // url('webfonts/inter-regular/inter-regular.ttf') format('truetype'), /* Safari, Android, iOS */ // url('webfonts/inter-regular/inter-regular.svg#svgFontName') format('svg'); /* Legacy iOS */ // } @font-face { font-family: 'mainfont'; src: url('https://designsystem.myexpandcart.dev/cdn/webfonts/cairo-regular/cairo-regular.eot'); /* IE9 Compat Modes */ src: url('https://designsystem.myexpandcart.dev/cdn/webfonts/cairo-regular/cairo-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://designsystem.myexpandcart.dev/cdn/webfonts/cairo-regular/cairo-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://designsystem.myexpandcart.dev/cdn/webfonts/cairo-regular/cairo-regular.woff') format('woff'), /* Pretty Modern Browsers */ url('https://designsystem.myexpandcart.dev/cdn/webfonts/cairo-regular/cairo-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://designsystem.myexpandcart.dev/cdn/webfonts/cairo-regular/cairo-regular.svg#svgFontName') format('svg'); /* Legacy iOS */ unicode-range: U+0600-06ff; } @font-face { font-family: 'mainfont'; src: url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-regular/inter-regular.eot'); /* IE9 Compat Modes */ src: url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-regular/inter-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-regular/inter-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-regular/inter-regular.woff') format('woff'), /* Pretty Modern Browsers */ url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-regular/inter-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-regular/inter-regular.svg#svgFontName') format('svg'); /* Legacy iOS */ font-weight: 400; font-display: swap; } @font-face { font-family: 'mainfont'; src: url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-medium/inter-medium.eot'); src: url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-medium/inter-medium.eot?#iefix') format('embedded-opentype'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-medium/inter-medium.woff2') format('woff2'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-medium/inter-medium.woff') format('woff'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-medium/inter-medium.ttf') format('truetype'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-medium/inter-medium.svg#inter-medium') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'mainfont'; src: url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-semibold/inter-semibold.eot'); src: url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-semibold/inter-semibold.eot?#iefix') format('embedded-opentype'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-semibold/inter-semibold.woff2') format('woff2'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-semibold/inter-semibold.woff') format('woff'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-semibold/inter-semibold.ttf') format('truetype'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-semibold/inter-semibold.svg#inter-semibold') format('svg'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'mainfont'; src: url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-bold/inter-bold.eot'); src: url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-bold/inter-bold.eot?#iefix') format('embedded-opentype'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-bold/inter-bold.woff2') format('woff2'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-bold/inter-bold.woff') format('woff'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-bold/inter-bold.ttf') format('truetype'), url('https://designsystem.myexpandcart.dev/cdn/webfonts/inter-bold/inter-bold.svg#inter-bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } body { font-family: mainfont !important; }

FontSize   

.display-2xl

.display-xl

.display-lg

.display-md

.display-sm

.display-xs

.text-xl

.text-lg

.text-md

.text-sm

Copy
Edit
<!-- components/Typography/FontSize.html --> <p class="display-2xl">.display-2xl</p> <p class="display-xl">.display-xl</p> <p class="display-lg">.display-lg</p> <p class="display-md">.display-md</p> <p class="display-sm">.display-sm</p> <p class="display-xs">.display-xs</p> <p class="text-xl">.text-xl</p> <p class="text-lg">.text-lg</p> <p class="text-md">.text-md</p> <p class="text-sm">.text-sm</p>
Copy
Copy
Edit
/* scss/Typography/_FontSize.scss */ html { font-size: 16px; } .display-2xl { font-size: 4.5rem; line-height: 5.625rem; #{$ltr} & { letter-spacing: -0.02rem; } } .display-xl { font-size: 3.75rem; line-height: 4.625rem; #{$ltr} & { letter-spacing: -0.02rem; } } .display-lg { font-size: 3rem; line-height: 3.75rem; #{$ltr} & { letter-spacing: -0.02rem; } } .display-md { font-size: 2.25rem; line-height: 2.75rem; #{$ltr} & { letter-spacing: -0.02rem; } } .display-sm { font-size: 1.875rem; line-height: 2.375rem; @media (max-width: 991px) { font-size: 30px; line-height: 38px; } } .display-xs { font-size: 1.5rem; line-height: 2rem; } .text-xl { font-size: 1.25rem; line-height: 1.875rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; @media (max-width: 991px) { font-size: 16px; line-height: 24px; } } .text-md { font-size: 1rem; line-height: 1.5rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xs { font-size: 0.75rem; line-height: 1.2rem; }

FontWeight   

.weight-r

.weight-m

.weight-s

.weight-b

Copy
Edit
<!-- components/Typography/FontWeight.html --> <h2 class="weight-r">.weight-r</h2> <h2 class="weight-m">.weight-m</h2> <h2 class="weight-s">.weight-s</h2> <h2 class="weight-b">.weight-b</h2>
Copy
Copy
Edit
/* scss/Typography/_FontWeight.scss */ .weight-r { font-weight: 400; } .weight-m { font-weight: 500; } .weight-s { font-weight: 600; } .weight-b { font-weight: 700; }