Skip to content

Commit 276bbd6

Browse files
CocolaCocola
authored
Merge pull request #93 from BeAPI/feature/font-loading
Feature/font loading
2 parents f7382b5 + a0b6ce6 commit 276bbd6

23 files changed

+652
-862
lines changed

‎header.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<!--[if lte IE 9 ]> <html class="no-js ie lte-ie9 ie9" <?php language_attributes( ); ?>> <![endif]-->
33
<!--[if !(IE)]><! -->
4-
<html class="fonts-loading no-js" <?php language_attributes( ); ?>>
4+
<html class="no-js" <?php language_attributes( ); ?>>
55
<!--<![endif]-->
66
<head>
77
<script type="text/javascript">

‎inc/async/loadfont.php

-13
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,2 @@
11
<!-- Polyfill.io -->
22
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch,Array.prototype.includes,CustomEvent,Element.prototype.closest,NodeList.prototype.forEach"></script>
3-
4-
<script>
5-
// inline loadJS
6-
function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("script")[0],o=window.document.createElement("script");return o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),t&&"function"==typeof t&&(o.onload=t),o}
7-
// then load your JS
8-
if (sessionStorage.getItem('fonts-loaded')) {
9-
// fonts cached, add class to document
10-
document.documentElement.classList.remove('fonts-loading');
11-
} else {
12-
// load script with font observing logic
13-
loadJS('<?php echo get_theme_file_uri( '/src/js/vendor_async/fonts-css-async.js' );?>');
14-
}
15-
</script>

‎package-lock.json

+554-680
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"browser-sync": "^2.26.7",
2828
"browser-sync-webpack-plugin": "^2.2.2",
2929
"concurrently": "^4.1.0",
30-
"copy-webpack-plugin": "^5.0.3",
30+
"copy-webpack-plugin": "^5.1.1",
3131
"css-loader": "^2.1.1",
3232
"eslint": "^5.16.0",
3333
"eslint-config-prettier": "^4.3.0",
@@ -40,7 +40,7 @@
4040
"eslint-plugin-standard": "^4.0.0",
4141
"json2csv": "^4.5.1",
4242
"mini-css-extract-plugin": "^0.7.0",
43-
"node-sass": "^4.12.0",
43+
"node-sass": "^4.13.1",
4444
"optimize-css-assets-webpack-plugin": "^5.0.1",
4545
"postcss-loader": "^3.0.0",
4646
"prettier": "^1.17.1",
@@ -52,7 +52,7 @@
5252
"dependencies": {
5353
"autoprefixer": "^9.5.1",
5454
"cheerio": "^1.0.0-rc.3",
55-
"favicons": "^5.4.1",
55+
"favicons": "^6.0.0",
5656
"lazysizes": "^5.1.0",
5757
"normalize-scss": "^7.0.1",
5858
"ora": "^3.4.0",

‎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/img/sample/beasample-01.jpg

-479 KB
Loading

‎src/js/app.js

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import 'lazysizes/plugins/native-loading/ls.native-loading'
99
import 'lazysizes/plugins/object-fit/ls.object-fit'
1010

1111
import './src/menu'
12-
import './src/button-href'
1312

1413
/**
1514
* LazySizes configuration

‎src/js/src/button-href.js

-87
This file was deleted.

‎src/js/src/menu.js

+17-13
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,23 @@ class Menu {
1111
this.resizeBreakpoint = window.matchMedia('(min-width: 1024px)')
1212
}
1313
init() {
14-
// Events to handle toggle menu
15-
this.menuOpen.addEventListener('click', this.openMenu.bind(this), false)
16-
this.menuClose.addEventListener('click', this.closeMenu.bind(this), false)
17-
// Detect if clicked outside menu
18-
document.addEventListener('click', event => {
19-
const menu = this.menu.contains(event.target)
20-
const buttonContainer = this.buttonContainer.contains(event.target)
21-
if (!menu && !buttonContainer) {
22-
this.closeMenu()
23-
}
24-
})
25-
// Event breakpoint
26-
this.resizeBreakpoint.addListener(this.menuResizing.bind(this))
14+
if (this.menu) {
15+
// Events to handle toggle menu
16+
this.menuOpen.addEventListener('click', this.openMenu.bind(this), false)
17+
this.menuClose.addEventListener('click', this.closeMenu.bind(this), false)
18+
// Detect if clicked outside menu
19+
document.addEventListener('click', event => {
20+
const menu = this.menu.contains(event.target)
21+
const buttonContainer = this.buttonContainer.contains(event.target)
22+
if (!menu && !buttonContainer) {
23+
this.closeMenu()
24+
}
25+
})
26+
// Event breakpoint
27+
this.resizeBreakpoint.addListener(this.menuResizing.bind(this))
28+
} else {
29+
console.log('No menu')
30+
}
2731
}
2832
/**
2933
* Open menu

‎src/js/vendor_async/fonts-css-async.js

-25
This file was deleted.

‎src/scss/abstract/_fonts.scss

+68-7
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+
}

‎src/scss/abstract/_mixins.scss

-4
Original file line numberDiff line numberDiff line change
@@ -279,10 +279,6 @@
279279
line-height: $heading-line-height;
280280
font-family: $customfont-2;
281281

282-
.fonts-loading & {
283-
font-family: $font-sansserif;
284-
}
285-
286282
@if $size == XXL {
287283
font-size: 40px;
288284

‎src/scss/base/_text.scss

-5
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,6 @@ body {
3030
-webkit-font-smoothing: antialiased;
3131
-moz-osx-font-smoothing: grayscale;
3232
overflow-x: hidden;
33-
//Fonts loading FOUT
34-
//Adjust FOUT with tools like https://meowni.ca/font-style-matcher/
35-
.fonts-loading & {
36-
font-family: $font-sansserif;
37-
}
3833
}
3934

4035
a {

‎src/scss/wp/_wysiwyg.scss

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
.wysiwyg {
22
@include clearfix;
33

4-
// * {
5-
// margin-bottom: $base-spacing;
4+
>* {
5+
margin-bottom: $base-spacing;
66

7-
// &:last-child {
8-
// margin-bottom: 0;
9-
// }
10-
// }
7+
&:last-child {
8+
margin-bottom: 0;
9+
}
10+
}
1111

12-
a:not([class]) {
12+
>a:not([class]) {
1313
text-decoration: underline;
1414

1515
@include hover {
@@ -27,6 +27,7 @@
2727

2828
img {
2929
@include img__responsive;
30+
3031
&.alignright,
3132
&.alignleft {
3233
max-width: 50%;

‎src/templates/partials/footer.php

-15
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,6 @@
2929
<!-- Polyfill.io -->
3030
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch,Array.prototype.includes,CustomEvent,Element.prototype.closest,NodeList.prototype.forEach"></script>
3131

32-
33-
<script>
34-
// inline loadJS
35-
function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("script")[0],o=window.document.createElement("script");return o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),t&&"function"==typeof t&&(o.onload=t),o}
36-
37-
// then load your JS
38-
if (sessionStorage.getItem('fonts-loaded')) {
39-
// fonts cached, add class to document
40-
document.documentElement.classList.remove('fonts-loading')
41-
} else {
42-
// load script with font observing logic
43-
loadJS('assets/js/vendor_async/fonts-css-async.js')
44-
}
45-
</script>
46-
4732
<!-- Theme js -->
4833
<?php
4934
if ( is_readable( dirname( __FILE__ ) . '/../WebpackBuiltFiles.php' ) ) {

‎src/templates/partials/header.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<!doctype html>
33
<!--[if lte IE 9 ]> <html class="no-js ie lte-ie9 ie9" lang="fr"> <![endif]-->
44
<!--[if !(IE)]><! -->
5-
<html class="fonts-loading no-js" lang="fr"><!--<![endif]-->
5+
<html class="no-js" lang="fr"><!--<![endif]-->
66
<head>
77

88
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

0 commit comments

Comments
 (0)