diff --git a/gatsby-config.js b/gatsby-config.js index 76684ad..c209829 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -12,16 +12,16 @@ module.exports = { resolve: `@el7cosmos/gatsby-plugin-prefetch-google-fonts`, options: { fonts: [ - { - family: `Inter`, - variants: [`400`, `700`], - }, { family: `Montserrat`, variants: [`400`, `700`], }, { - family: `Oxygen Mono`, + family: `IBM+Plex+Sans`, + variants: [`400`, `700`], + }, + { + family: `IBM+Plex+Mono`, variants: [`400`], }, ], diff --git a/src/components/Home/styles.tsx b/src/components/Home/styles.tsx index be80727..51eb296 100644 --- a/src/components/Home/styles.tsx +++ b/src/components/Home/styles.tsx @@ -124,7 +124,7 @@ export const menuItemStyles = css` position: relative; transition: color 0.3s; margin: 10px 20px 5px 0; - font-family: "Oxygen Mono", monospace; + font-family: "IBM Plex Mono", monospace; &:hover { color: #fff; diff --git a/src/components/HomePartner/styles.tsx b/src/components/HomePartner/styles.tsx index 2f6e104..267d40d 100644 --- a/src/components/HomePartner/styles.tsx +++ b/src/components/HomePartner/styles.tsx @@ -5,7 +5,7 @@ export const HomePartnerWrapper = styled.div` margin-top: 32px; display: flex; align-items: center; - font-family: "Oxygen Mono", monospace; + font-family: "IBM Plex Mono", monospace; text-transform: uppercase; font-size: 22px; color: ${(props) => props.theme.main.foreground}; diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx index 0a0a0d8..9ff17b1 100644 --- a/src/components/Markdown/styles.tsx +++ b/src/components/Markdown/styles.tsx @@ -111,7 +111,7 @@ export const MarkdownWrapper = styled.div` border-radius: 3px; letter-spacing: 0.25px; color: #ebedee; - font-family: "Oxygen Mono", monospace; + font-family: "IBM Plex Mono", monospace; } :not(pre) > code[class*="language-"], diff --git a/src/design/typography.ts b/src/design/typography.ts index 1fd74e4..d31f453 100644 --- a/src/design/typography.ts +++ b/src/design/typography.ts @@ -1,5 +1,5 @@ -const FONT_INTER = "Inter, sans-serif" -const FONT_MONTSERRAT = "Montserrat, sans-serif" +const FONT_BODY = "IBM Plex Sans, sans-serif" +const FONT_HEADER = "Montserrat, sans-serif" export const BASE_FONT_SIZE = 20 export const BASE_LINE_HEIGHT = 26 @@ -24,8 +24,8 @@ export function modularScale(power: number) { } export const fontFamily = { - header: FONT_MONTSERRAT, - body: FONT_INTER, + header: FONT_HEADER, + body: FONT_BODY, } export default fontFamily