Skip to content
This repository has been archived by the owner on Sep 12, 2022. It is now read-only.

Commit

Permalink
Optimize google font load to prevent FOUT
Browse files Browse the repository at this point in the history
  • Loading branch information
@flexdinesh
flexdinesh committed Jan 21, 2019
1 parent f657b00 commit cacad32
Show file tree
Hide file tree
Showing 7 changed files with 129 additions and 31 deletions.
8 changes: 0 additions & 8 deletions gatsby-config.js
View file
Expand Up @@ -50,14 +50,6 @@ module.exports = {
icon: `src/images/boy.png`, // This path is relative to the root of the site.
},
},
{
resolve: 'gatsby-plugin-web-font-loader',
options: {
google: {
families: ['Ubuntu:400,700:latin'],
},
},
},
`gatsby-plugin-sass`,
{
resolve: `gatsby-plugin-google-analytics`,
Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Expand Up @@ -35,7 +35,6 @@
"gatsby-plugin-offline": "^2.0.16",
"gatsby-plugin-react-helmet": "^3.0.2",
"gatsby-plugin-sharp": "^2.0.14",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-source-filesystem": "^2.0.8",
"gatsby-transformer-javascript-frontmatter": "^2.0.5",
"gatsby-transformer-remark": "^2.1.19",
Expand Down
128 changes: 128 additions & 0 deletions src/styles/_font.scss
View file
@@ -0,0 +1,128 @@
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCs6KVjbNBYlgoKcg72nU6AF7xm.woff2)
format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCs6KVjbNBYlgoKew72nU6AF7xm.woff2)
format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCs6KVjbNBYlgoKcw72nU6AF7xm.woff2)
format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCs6KVjbNBYlgoKfA72nU6AF7xm.woff2)
format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCs6KVjbNBYlgoKcQ72nU6AF7xm.woff2)
format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCs6KVjbNBYlgoKfw72nU6AFw.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCv6KVjbNBYlgoCxCvjvWyNPYZvg7UI.woff2)
format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCv6KVjbNBYlgoCxCvjtGyNPYZvg7UI.woff2)
format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCv6KVjbNBYlgoCxCvjvGyNPYZvg7UI.woff2)
format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCv6KVjbNBYlgoCxCvjs2yNPYZvg7UI.woff2)
format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCv6KVjbNBYlgoCxCvjvmyNPYZvg7UI.woff2)
format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'),
url(https://fonts.gstatic.com/s/ubuntu/v12/4iCv6KVjbNBYlgoCxCvjsGyNPYZvgw.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
9 changes: 0 additions & 9 deletions src/styles/_global.scss
View file
Expand Up @@ -18,15 +18,6 @@ body {
background-color: $colorBG;
}

.wf-loading {
visibility: hidden;
}

.wf-active,
.wf-inactive {
visibility: visible;
}

a {
color: $colorPrimary;
text-decoration: none;
Expand Down
1 change: 1 addition & 0 deletions src/styles/base.scss
View file
@@ -1,2 +1,3 @@
@import 'reset';
@import 'font';
@import 'global';
Empty file removed src/styles/global-styles.module.scss
View file
Empty file.
13 changes: 0 additions & 13 deletions yarn.lock
View file
Expand Up @@ -5230,14 +5230,6 @@ gatsby-plugin-sharp@^2.0.14:
sharp "^0.21.0"
svgo "^0.7.2"

gatsby-plugin-web-font-loader@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/gatsby-plugin-web-font-loader/-/gatsby-plugin-web-font-loader-1.0.4.tgz#c50bdb0c1980110b3fd213a5be70feb2459514c3"
integrity sha512-3c39bX9CcsYJQFhhmTyjuMJSqpld2rX+HsTOxP9k1PKFR4Rvo3lpzBW4d1tVpmUesR8BNL6u9eHT7/XksS1iog==
dependencies:
babel-runtime "^6.26.0"
webfontloader "^1.6.28"

gatsby-react-router-scroll@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.0.2.tgz#d8046ce2f3bfa52ef6ec55804007d976b0bb6bef"
Expand Down Expand Up @@ -12203,11 +12195,6 @@ web-namespaces@^1.0.0, web-namespaces@^1.1.2:
resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.2.tgz#c8dc267ab639505276bae19e129dbd6ae72b22b4"
integrity sha512-II+n2ms4mPxK+RnIxRPOw3zwF2jRscdJIUE9BfkKHm4FYEg9+biIoTMnaZF5MpemE3T+VhMLrhbyD4ilkPCSbg==

webfontloader@^1.6.28:
version "1.6.28"
resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
integrity sha1-23hhKSU8tujq5UwvsF+HCvZnW64=

webpack-dev-middleware@3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.4.0.tgz#1132fecc9026fd90f0ecedac5cbff75d1fb45890"
Expand Down

0 comments on commit cacad32

Please sign in to comment.