Skip to content

Commit a0b6ce6

Browse files
CocolaCocola
committed
feat (font) add typekit example font locally
look at https://github.com/swissspidy/local-webfont
1 parent 6c4b2de commit a0b6ce6

File tree

9 files changed

+68
-7
lines changed

9 files changed

+68
-7
lines changed

‎src/fonts/Circular/CircularStdBlack.woff‎

-38.1 KB
Binary file not shown.

‎src/fonts/Circular/CircularStdBlack.woff2‎

-28.4 KB
Binary file not shown.

‎src/fonts/Circular/CircularStdBold.woff‎

-38.4 KB
Binary file not shown.

‎src/fonts/Circular/CircularStdBold.woff2‎

-28.4 KB
Binary file not shown.

‎src/fonts/Circular/CircularStdBook.woff‎

-33.9 KB
Binary file not shown.

‎src/fonts/Circular/CircularStdBook.woff2‎

-25 KB
Binary file not shown.

‎src/fonts/Circular/CircularStdMedium.woff‎

-37.9 KB
Binary file not shown.

‎src/fonts/Circular/CircularStdMedium.woff2‎

-28.1 KB
Binary file not shown.

‎src/scss/abstract/_fonts.scss‎

Lines changed: 68 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
$font-sansserif: Arial, Helvetica, sans-serif;
55
$font-serif: Times, Georgia, serif;
66
$customfont-1: Roboto, sans-serif;
7-
$customfont-2: Circular, sans-serif;
7+
$customfont-2: sofia-pro, sans-serif;
88

99
/**
1010
* Font Size
@@ -18,13 +18,74 @@ $heading-font-size: 25px;
1818
$base-lh: 1.4;
1919
$heading-line-height: 1.2;
2020

21-
//Roboto for body text
21+
// Roboto for body text
2222
@include declare-font-face("Roboto", "#{$fonts-url}/roboto-v15-latin/roboto-v15-latin-regular"); //regularx400
2323
@include declare-font-face("Roboto", "#{$fonts-url}/roboto-v15-latin/roboto-v15-latin-500", 500); //mediumx500
2424
@include declare-font-face("Roboto", "#{$fonts-url}/roboto-v15-latin/roboto-v15-latin-700", bold); //boldx700
2525

26-
//Circular for Hn
27-
@include declare-font-face("Circular", "#{$fonts-url}/Circular/CircularStdBook"); //regularx400
28-
@include declare-font-face("Circular", "#{$fonts-url}/Circular/CircularStdMedium", 500); //mediumx500
29-
@include declare-font-face("Circular", "#{$fonts-url}/Circular/CircularStdBold", bold); //boldx700
30-
@include declare-font-face("Circular", "#{$fonts-url}/Circular/CircularStdBlack", 900); //blackx900
26+
// Sofia Pro for Hn
27+
// Use this script to add external ressource like typekit: https://github.com/swissspidy/local-webfont
28+
// example: npx local-webfont https://use.typekit.net/bjc8obi.css src/scss/abstract/temp_to_copy_paste_delete.css swap
29+
@font-face {
30+
font-display: swap;
31+
font-family: "sofia-pro";
32+
src: url("https://use.typekit.net/af/0c5f71/00000000000000003b9b1aa0/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"), url("https://use.typekit.net/af/0c5f71/00000000000000003b9b1aa0/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"), url("https://use.typekit.net/af/0c5f71/00000000000000003b9b1aa0/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
33+
font-style: normal;
34+
font-weight: 900;
35+
}
36+
37+
@font-face {
38+
font-display: swap;
39+
font-family: "sofia-pro";
40+
src: url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
41+
font-style: normal;
42+
font-weight: 700;
43+
}
44+
45+
@font-face {
46+
font-display: swap;
47+
font-family: "sofia-pro";
48+
src: url("https://use.typekit.net/af/1ca530/00000000000000003b9b1a94/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff2"), url("https://use.typekit.net/af/1ca530/00000000000000003b9b1a94/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff"), url("https://use.typekit.net/af/1ca530/00000000000000003b9b1a94/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("opentype");
49+
font-style: normal;
50+
font-weight: 200;
51+
}
52+
53+
@font-face {
54+
font-display: swap;
55+
font-family: "sofia-pro";
56+
src: url("https://use.typekit.net/af/572508/00000000000000003b9b1a96/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"), url("https://use.typekit.net/af/572508/00000000000000003b9b1a96/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"), url("https://use.typekit.net/af/572508/00000000000000003b9b1a96/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
57+
font-style: normal;
58+
font-weight: 300;
59+
}
60+
61+
@font-face {
62+
font-display: swap;
63+
font-family: "sofia-pro";
64+
src: url("https://use.typekit.net/af/b4d13d/00000000000000003b9b1a9a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/b4d13d/00000000000000003b9b1a9a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/b4d13d/00000000000000003b9b1a9a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
65+
font-style: normal;
66+
font-weight: 500;
67+
}
68+
69+
@font-face {
70+
font-display: swap;
71+
font-family: "sofia-pro";
72+
src: url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
73+
font-style: normal;
74+
font-weight: 400;
75+
}
76+
77+
@font-face {
78+
font-display: swap;
79+
font-family: "sofia-pro";
80+
src: url("https://use.typekit.net/af/7158ff/00000000000000003b9b1a9c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/7158ff/00000000000000003b9b1a9c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/7158ff/00000000000000003b9b1a9c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
81+
font-style: normal;
82+
font-weight: 600;
83+
}
84+
85+
@font-face {
86+
font-display: swap;
87+
font-family: "sofia-pro";
88+
src: url("https://use.typekit.net/af/0a60d4/00000000000000003b9b1a92/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i1&v=3") format("woff2"), url("https://use.typekit.net/af/0a60d4/00000000000000003b9b1a92/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i1&v=3") format("woff"), url("https://use.typekit.net/af/0a60d4/00000000000000003b9b1a92/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i1&v=3") format("opentype");
89+
font-style: italic;
90+
font-weight: 100;
91+
}

0 commit comments

Comments
 (0)