Skip to content
This repository has been archived by the owner on Jan 17, 2021. It is now read-only.

Add font-display to css #63

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add font-display to css #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5862694
Reduce Block Period of font loading
DemigodCode Aug 26, 2020
7b9e9fd
Reduce Block Perdiod of Font loading
DemigodCode Aug 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions css/mixins.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@
url('@{font-full-path}-@{type}.woff') format('woff');
font-weight: @weight;
font-style: @style;
font-dispaly: swap;
}

@font-face {
font-family: '@{variant}-@{type}';
src: url('@{font-full-path}-@{type}.woff2') format('woff2'),
url('@{font-full-path}-@{type}.woff') format('woff');
font-dispaly: swap;
}
}
2 changes: 2 additions & 0 deletions css/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ $roboto-font-path: '../../../fonts' !default;
url('#{$font-full-path}-#{$type}.woff') format('woff');
font-weight: $weight;
font-style: $style;
font-dispaly: swap;
}

@font-face {
font-family: '#{$variant}-#{$type}';
src: url('#{$font-full-path}-#{$type}.woff2') format('woff2'),
url('#{$font-full-path}-#{$type}.woff') format('woff');
font-dispaly: swap;
}
}
143 changes: 72 additions & 71 deletions css/roboto-condensed/roboto-condensed-fontface.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,72 @@
@font-face {
font-family: "Roboto-Condensed";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-Regular.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: "Roboto-Condensed-Regular";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-Regular.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-Regular.woff") format("woff");
}

@font-face {
font-family: "Roboto-Condensed";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-RegularItalic.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-RegularItalic.woff") format("woff");
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: "Roboto-Condensed-RegularItalic";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-RegularItalic.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-RegularItalic.woff") format("woff");
}

@font-face {
font-family: "Roboto-Condensed";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-Light.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: "Roboto-Condensed-Light";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-Light.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-Light.woff") format("woff");
}

@font-face {
font-family: "Roboto-Condensed";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-LightItalic.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-LightItalic.woff") format("woff");
font-weight: 300;
font-style: italic;
}

@font-face {
font-family: "Roboto-Condensed-LightItalic";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-LightItalic.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-LightItalic.woff") format("woff");
}

@font-face {
font-family: "Roboto-Condensed";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-Bold.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: "Roboto-Condensed-Bold";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-Bold.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-Bold.woff") format("woff");
}

@font-face {
font-family: "Roboto-Condensed";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-BoldItalic.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-BoldItalic.woff") format("woff");
font-weight: 700;
font-style: italic;
}

@font-face {
font-family: "Roboto-Condensed-BoldItalic";
src: url("../../fonts/roboto-condensed/Roboto-Condensed-BoldItalic.woff2") format("woff2"), url("../../fonts/roboto-condensed/Roboto-Condensed-BoldItalic.woff") format("woff");
}
@font-face {
font-family: "Roboto-Condensed";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-Regular.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-dispaly: swap;
}
@font-face {
font-family: "Roboto-Condensed-Regular";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-Regular.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-Regular.woff") format("woff");
font-dispaly: swap;
}
@font-face {
font-family: "Roboto-Condensed";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-RegularItalic.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-RegularItalic.woff") format("woff");
font-weight: 400;
font-style: italic;
font-dispaly: swap;
}
@font-face {
font-family: "Roboto-Condensed-RegularItalic";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-RegularItalic.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-RegularItalic.woff") format("woff");
font-dispaly: swap;
}
@font-face {
font-family: "Roboto-Condensed";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-Light.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-dispaly: swap;
}
@font-face {
font-family: "Roboto-Condensed-Light";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-Light.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-Light.woff") format("woff");
font-dispaly: swap;
}
@font-face {
font-family: "Roboto-Condensed";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-LightItalic.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-LightItalic.woff") format("woff");
font-weight: 300;
font-style: italic;
font-dispaly: swap;
}
@font-face {
font-family: "Roboto-Condensed-LightItalic";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-LightItalic.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-LightItalic.woff") format("woff");
font-dispaly: swap;
}
@font-face {
font-family: "Roboto-Condensed";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-Bold.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-dispaly: swap;
}
@font-face {
font-family: "Roboto-Condensed-Bold";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-Bold.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-Bold.woff") format("woff");
font-dispaly: swap;
}
@font-face {
font-family: "Roboto-Condensed";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-BoldItalic.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-BoldItalic.woff") format("woff");
font-weight: 700;
font-style: italic;
font-dispaly: swap;
}
@font-face {
font-family: "Roboto-Condensed-BoldItalic";
src: url("../../../fonts/roboto-condensed/Roboto-Condensed-BoldItalic.woff2") format("woff2"), url("../../../fonts/roboto-condensed/Roboto-Condensed-BoldItalic.woff") format("woff");
font-dispaly: swap;
}
63 changes: 32 additions & 31 deletions css/roboto-slab/roboto-slab-fontface.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,48 @@
@font-face {
font-family: 'Roboto-Slab';
src: url('../../fonts/roboto-slab/Roboto-Slab-Thin.woff2') format('woff2'), url('../../fonts/roboto-slab/Roboto-Slab-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
font-family: "Roboto-Slab";
src: url("../../../fonts/roboto-slab/Roboto-Slab-Regular.woff2") format("woff2"), url("../../../fonts/roboto-slab/Roboto-Slab-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-dispaly: swap;
}

@font-face {
font-family: 'Roboto-Slab-Thin';
src: url('../../fonts/roboto-slab/Roboto-Slab-Thin.woff2') format('woff2'), url('../../fonts/roboto-slab/Roboto-Slab-Thin.woff') format('woff');
font-family: "Roboto-Slab-Regular";
src: url("../../../fonts/roboto-slab/Roboto-Slab-Regular.woff2") format("woff2"), url("../../../fonts/roboto-slab/Roboto-Slab-Regular.woff") format("woff");
font-dispaly: swap;
}

@font-face {
font-family: 'Roboto-Slab';
src: url('../../fonts/roboto-slab/Roboto-Slab-Light.woff2') format('woff2'), url('../../fonts/roboto-slab/Roboto-Slab-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-family: "Roboto-Slab";
src: url("../../../fonts/roboto-slab/Roboto-Slab-Light.woff2") format("woff2"), url("../../../fonts/roboto-slab/Roboto-Slab-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-dispaly: swap;
}

@font-face {
font-family: 'Roboto-Slab-Light';
src: url('../../fonts/roboto-slab/Roboto-Slab-Light.woff2') format('woff2'), url('../../fonts/roboto-slab/Roboto-Slab-Light.woff') format('woff');
font-family: "Roboto-Slab-Light";
src: url("../../../fonts/roboto-slab/Roboto-Slab-Light.woff2") format("woff2"), url("../../../fonts/roboto-slab/Roboto-Slab-Light.woff") format("woff");
font-dispaly: swap;
}

@font-face {
font-family: 'Roboto-Slab';
src: url('../../fonts/roboto-slab/Roboto-Slab-Regular.woff2') format('woff2'), url('../../fonts/roboto-slab/Roboto-Slab-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-family: "Roboto-Slab";
src: url("../../../fonts/roboto-slab/Roboto-Slab-Thin.woff2") format("woff2"), url("../../../fonts/roboto-slab/Roboto-Slab-Thin.woff") format("woff");
font-weight: 100;
font-style: normal;
font-dispaly: swap;
}

@font-face {
font-family: 'Roboto-Slab-Regular';
src: url('../../fonts/roboto-slab/Roboto-Slab-Regular.woff2') format('woff2'), url('../../fonts/roboto-slab/Roboto-Slab-Regular.woff') format('woff');
font-family: "Roboto-Slab-Thin";
src: url("../../../fonts/roboto-slab/Roboto-Slab-Thin.woff2") format("woff2"), url("../../../fonts/roboto-slab/Roboto-Slab-Thin.woff") format("woff");
font-dispaly: swap;
}

@font-face {
font-family: 'Roboto-Slab';
src: url('../../fonts/roboto-slab/Roboto-Slab-Bold.woff2') format('woff2'), url('../../fonts/roboto-slab/Roboto-Slab-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-family: "Roboto-Slab";
src: url("../../../fonts/roboto-slab/Roboto-Slab-Bold.woff2") format("woff2"), url("../../../fonts/roboto-slab/Roboto-Slab-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-dispaly: swap;
}

@font-face {
font-family: 'Roboto-Slab-Bold';
src: url('../../fonts/roboto-slab/Roboto-Slab-Bold.woff2') format('woff2'), url('../../fonts/roboto-slab/Roboto-Slab-Bold.woff') format('woff');
font-family: "Roboto-Slab-Bold";
src: url("../../../fonts/roboto-slab/Roboto-Slab-Bold.woff2") format("woff2"), url("../../../fonts/roboto-slab/Roboto-Slab-Bold.woff") format("woff");
font-dispaly: swap;
}
Loading