feat: update website font (#78)

SocialGouv · Sep 15, 2020 · 01673ab · 01673ab
1 parent 4cad7cf
commit 01673ab
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 0 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -45,6 +45,15 @@ module.exports = {
       },
       resolve: `gatsby-source-filesystem`,
     },
+    {
+      options: {
+        custom: {
+          families: ["OpenSans"],
+          urls: ["/fonts/fonts.css"],
+        },
+      },
+      resolve: "gatsby-plugin-web-font-loader",
+    },
     {
       // If you want to use styled components you should change the injection order.
       options: {

diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "gatsby-plugin-sharp": "^2.6.34",
     "gatsby-plugin-typescript": "latest",
     "gatsby-remark-autolink-headers": "^2.3.12",
+    "gatsby-plugin-web-font-loader": "^1.0.4",
     "gatsby-source-filesystem": "^2.3.29",
     "gatsby-transformer-remark": "^2.8.34",
     "gatsby-transformer-sharp": "^2.5.14",

diff --git a/src/theme.ts b/src/theme.ts
@@ -7,6 +7,22 @@ import {
 } from "@material-ui/core/styles";
 import deepMerge from "deepmerge";
 
+import OpenSans from "../static/fonts/OpenSans-Regular.ttf";
+
+const openSans = {
+  fontDisplay: "swap",
+  fontFamily: "OpenSans",
+  fontStyle: "normal",
+  fontWeight: 400,
+  src: `
+    local('OpenSans'),
+    local('OpenSans-Regular'),
+    url(${OpenSans}) format('ttf')
+  `,
+  unicodeRange:
+    "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",
+};
+
 const darkBlue = {
   contrastText: "#fff",
   dark: "#202a54",
@@ -17,10 +33,20 @@ const darkBlue = {
 const makeTheme = (variant: ThemeOptions): Theme => {
   const type = variant?.palette?.type;
   const common = {
+    overrides: {
+      MuiCssBaseline: {
+        "@global": {
+          "@font-face": [openSans],
+        },
+      },
+    },
     palette: {
       primary: type === "light" ? darkBlue : blue,
       secondary: grey,
     },
+    typography: {
+      fontFamily: "OpenSans, Arial",
+    },
   };
   const theme = createMuiTheme(deepMerge(common, variant));
   return responsiveFontSizes(theme);

diff --git a/static/fonts/OpenSans-Regular.ttf b/static/fonts/OpenSans-Regular.ttf
diff --git a/yarn.lock b/yarn.lock
@@ -6976,6 +6976,14 @@ gatsby-plugin-typescript@^2.4.16, gatsby-plugin-typescript@latest:
     "@babel/runtime" "^7.10.3"
     babel-plugin-remove-graphql-queries "^2.9.15"
 
+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@^3.0.12:
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-3.0.12.tgz#1c6a7c3fd2d54ec618f42a6e793ff8293070b6bc"
@@ -15466,6 +15474,11 @@ web-namespaces@^1.0.0, web-namespaces@^1.1.2:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
   integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
 
+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.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"