mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

font face

This commit is contained in:
Kseninia Mikhaylova 2024-06-13 13:12:34 +03:00
parent 88ca4334ca
commit e1cae3add7
1 changed files with 56 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
assets/fonts.scss
View File

@ -1,8 +1,47 @@
@mixin font-face($family, $file, $weight: normal, $style: normal) {
@font-face { @font-face {
font-family: 'Overpass'; font-family: $family;
src: url('/Overpass/Overpass-VariableFont_wght.ttf'); src: url($file);
font-weight: $weight;
font-style: $style;
}
} }
// assets/Overpass/static/Overpass-ExtraLight.ttf
// assets/Overpass/static/Overpass-ExtraLightItalic.ttf
// assets/Overpass/static/Overpass-Light.ttf
// assets/Overpass/static/Overpass-LightItalic.ttf
// assets/Overpass/static/Overpass-Medium.ttf
// assets/Overpass/static/Overpass-MediumItalic.ttf
// assets/Overpass/static/Overpass-Italic.ttf
// assets/Overpass/static/Overpass-Regular.ttf
// assets/Overpass/static/Overpass-SemiBold.ttf
// assets/Overpass/static/Overpass-SemiBoldItalic.ttf
// assets/Overpass/static/Overpass-Thin.ttf
// assets/Overpass/static/Overpass-ThinItalic.ttf
// assets/Overpass/static/Overpass-Black.ttf
// assets/Overpass/static/Overpass-BlackItalic.ttf
// assets/Overpass/static/Overpass-Bold.ttf
// assets/Overpass/static/Overpass-BoldItalic.ttf
// assets/Overpass/static/Overpass-ExtraBold.ttf
// assets/Overpass/static/Overpass-ExtraBoldItalic.ttf
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Thin.ttf', 100);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-ThinItalic.ttf', 100, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-ExtraLight.ttf', 200);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-ExtraLightItalic.ttf', 200, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Light.ttf', 300);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-LightItalic.ttf', 300, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Regular.ttf', 400);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Italic.ttf', 400, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Medium.ttf', 500);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-MediumItalic.ttf', 500, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-SemiBold.ttf', 600);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-SemiBoldItalic.ttf', 600, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Bold.ttf', 700);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-BoldItalic.ttf', 700, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Black.ttf', 800);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-BlackItalic.ttf', 800, italic);
// 100 – Thin. // 100 – Thin.
// 200 – Extra Light (Ultra Light) // 200 – Extra Light (Ultra Light)
// 300 – Light. // 300 – Light.
@ -11,79 +50,78 @@
// 600 – Semi Bold (Demi Bold) // 600 – Semi Bold (Demi Bold)
// 700 – Bold. // 700 – Bold.
// 800 – Extra Bold (Ultra Bold) // 800 – Extra Bold (Ultra Bold)
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-Black.ttf '); src: url('~/assets/Roboto/Roboto-Black.ttf ');
font-weight: 800; font-weight: 800;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-BlackItalic.ttf '); src: url('~/assets/Roboto/Roboto-BlackItalic.ttf ');
font-weight: 800; font-weight: 800;
font-style: italic font-style: italic
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-Bold.ttf '); src: url('~/assets/Roboto/Roboto-Bold.ttf ');
font-weight: 700; font-weight: 700;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-BoldItalic.ttf '); src: url('~/assets/Roboto/Roboto-BoldItalic.ttf ');
font-weight: 700; font-weight: 700;
font-style: italic font-style: italic
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-Regular.ttf '); src: url('~/assets/Roboto/Roboto-Regular.ttf ');
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-Italic.ttf '); src: url('~/assets/Roboto/Roboto-Italic.ttf ');
font-style: italic font-style: italic
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-Medium.ttf '); src: url('~/assets/Roboto/Roboto-Medium.ttf ');
font-weight: 500; font-weight: 500;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-MediumItalic.ttf '); src: url('~/assets/Roboto/Roboto-MediumItalic.ttf ');
font-weight: 500; font-weight: 500;
font-style: italic font-style: italic
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-Light.ttf '); src: url('~/assets/Roboto/Roboto-Light.ttf ');
font-weight: 300; font-weight: 300;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-LightItalic.ttf '); src: url('~/assets/Roboto/Roboto-LightItalic.ttf ');
font-weight: 300; font-weight: 300;
font-style: italic font-style: italic
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-Thin.ttf '); src: url('~/assets/Roboto/Roboto-Thin.ttf ');
font-weight: 100; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/Roboto/Roboto-ThinItalic.ttf '); src: url('~/assets/Roboto/Roboto-ThinItalic.ttf ');
font-weight: 100; font-weight: 100;
font-style: italic font-style: italic
} }