Merge pull request #28 from solimer/bugfix/fix-homepage-title-font

Add Secular One font family

src/components/Shared/Contact/Map.tsx

@@ -1,14 +1,13 @@
 import React from "react";
-
-import { compose, withStateHandlers } from "recompose";
+import { KeyTextField, LinkField, NumberField } from "@prismicio/types";
 import {
- withScriptjs,
- withGoogleMap,
  GoogleMap,
- Marker,
  InfoWindow,
+ Marker,
+ withGoogleMap,
+ withScriptjs,
 } from "react-google-maps";
-import { KeyTextField, LinkField, NumberField } from "@prismicio/types";
+import { compose, withStateHandlers } from "recompose";
 
 const coordinates = {
  lat: 32.0723871,
@@ -29,9 +28,7 @@ const MapLabel: React.FC<
  target="_blank"
  rel="noopener noreferrer"
  >
- <h4 id="firstHeading" className="firstHeading">
- {map_label_text}
- </h4>
+ <h4 id="firstHeading">{map_label_text}</h4>
  </a>
  </div>
 );

src/pages/_app.tsx

@@ -8,7 +8,8 @@ import { repositoryName } from "../../prismicio";
 import "../styles/styles.scss";
 import { AppProps } from "next/app";
 
-import { montserrat, openSans } from "../styles/fontLoad";
+import cn from "../lib/utils/cn";
+import { montserrat, openSans, secularOne } from "../styles/fontLoad";
 
 const App = ({ Component, pageProps }: AppProps) => {
  return (
@@ -25,7 +26,7 @@ const App = ({ Component, pageProps }: AppProps) => {
  >
  <ThemeProvider theme={{}}>
  <PrismicPreview repositoryName={repositoryName}>
- <main className={montserrat.className}>
+ <main className={cn(montserrat.className, secularOne.variable)}>
  <Component {...pageProps} />
  </main>
  </PrismicPreview>

src/styles/fontLoad.ts

@@ -1,4 +1,4 @@
-import { Montserrat, Open_Sans } from "next/font/google";
+import { Montserrat, Open_Sans, Secular_One } from "next/font/google";
 
 export const montserrat = Montserrat({
  subsets: ["latin"],
@@ -9,3 +9,9 @@ export const openSans = Open_Sans({
  subsets: ["hebrew"],
  variable: "--font-sans",
 });
+
+export const secularOne = Secular_One({
+ subsets: ["latin"],
+ variable: "--font-secular",
+ weight: "400",
+});

src/styles/homepage/global.scss

@@ -1,11 +1,5 @@
 @charset "utf-8";
 
-@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700|Roboto:300,400|Athiti:300,400|Indie+Flower");
-
-@import url("https://fonts.googleapis.com/css?family=Indie+Flower|Secular+One|Assistant");
-
-@import url("//fonts.googleapis.com/earlyaccess/opensanshebrew.css");
-
 @import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
 
 * {

tailwind.config.js

@@ -20,7 +20,7 @@ module.exports = {
  },
  fontFamily: {
  serif: "'Libre Baskerville', sans-serif",
- secular: "'Secular One', sans-serif",
+ secular: "var(--font-secular), 'Secular One', sans-serif",
  montserrat: "var(--font-montserrat), Montserrat, sans-serif",
  hebrew: "Open Sans Hebrew, sans-serif",
  sans: ["var(--font-sans)", ...fontFamily.sans],