Skip to content
This repository was archived by the owner on Dec 10, 2024. It is now read-only.

Commit 1d022d9

Browse files
tomasvranatomasvrana
authored
Merge pull request #22 from input-output-hk/add-font
font update
2 parents d415743 + b9fd074 commit 1d022d9

15 files changed

+165
-9
lines changed

‎gatsby-config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@ module.exports = {
3030
}
3131
}
3232
},
33+
{
34+
resolve: 'gatsby-plugin-your-fonts',
35+
options: {
36+
fonts: [
37+
`gibson.css`
38+
]
39+
}
40+
},
3341
{
3442
resolve: `gatsby-plugin-material-ui`,
3543
options: {

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
"eslint-plugin-react": "^7.19.0",
7272
"eslint-plugin-standard": "^4.0.1",
7373
"express": "^4.17.1",
74+
"gatsby-plugin-your-fonts": "^0.0.1",
7475
"portfinder": "^1.0.25",
7576
"react-icons": "^3.11.0",
7677
"webpack": "^4.42.1",

‎src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Provider as LinkProvider } from '@input-output-hk/front-end-core-compon
77
import Styles from '@input-output-hk/front-end-site-components/components/Styles'
88
import { ThemeProvider as MaterialUIThemeProvider } from '@material-ui/core/styles'
99
import { ThemeProvider as StyledThemeProvider } from 'styled-components'
10+
import GlobalStyles from './GlobalStyles.js'
1011
import { analytics, theme } from '@input-output-hk/front-end-core-libraries'
1112
import { navigate, Link as GatsbyLink } from 'gatsby'
1213
import config from './config'
@@ -93,6 +94,7 @@ const App = ({ element }) => {
9394
{({ key: lang }) => (
9495
<LinkProvider lang={lang} component={Link}>
9596
<Styles theme={originalTheme.config} />
97+
<GlobalStyles />
9698
<Router>
9799
{getRoutes(lang)}
98100
<DefaultRoute default element={element} />

‎src/GlobalStyles.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { createGlobalStyle } from 'styled-components'
2+
3+
export default createGlobalStyle`
4+
.fullwidth {
5+
width:100%;
6+
height:auto
7+
}
8+
9+
.clear {
10+
clear:both
11+
}
12+
13+
14+
@font-face {
15+
font-family: 'Gibson Regular';
16+
font-style: normal;
17+
font-weight: normal;
18+
src: local('Gibson Regular'), url('/fonts/gibson-webfont/GibsonRegular.woff') format('woff');
19+
}
20+
21+
@font-face {
22+
font-family: 'Gibson Light';
23+
font-style: normal;
24+
font-weight: normal;
25+
src: local('Gibson Light'), url('/fonts/gibson-webfont/GibsonLight.woff') format('woff');
26+
}
27+
28+
29+
@font-face {
30+
font-family: 'Gibson Bold';
31+
font-style: normal;
32+
font-weight: normal;
33+
src: local('Gibson Bold'), url('/fonts/gibson-webfont/GibsonSemiBd.woff') format('woff');
34+
}
35+
36+
37+
38+
39+
${'' /**
40+
.opacity-10
41+
*/}
42+
${() => {
43+
const opacity = []
44+
for (let i = 0; i <= 10; i++) {
45+
opacity.push(`
46+
.opacity-${i} {
47+
opacity: ${i / 10};
48+
}
49+
`)
50+
}
51+
return opacity.join('')
52+
}}
53+
`

‎src/themes.js

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -102,49 +102,54 @@ const theme = extendDefaultTheme({
102102
typography: {
103103
baseFontSize: 18,
104104
lineHeight: 1.6,
105-
fontWeight: 400,
106-
fontFamily: 'Chivo, sans-serif',
105+
fontWeight: 'normal',
106+
fontFamily: 'Gibson Light, sans-serif',
107107
fontDisplay: 'swap',
108-
googleFontsURL: 'https://fonts.googleapis.com/css?family=Chivo:300,400,700',
109108
h1: {
110109
fontSize: 3,
111-
fontWeight: 300,
110+
fontWeight: 'normal',
112111
lineHeight: 1.1,
113112
letterSpacing: -0.1,
113+
fontFamily: 'Gibson Bold',
114114
textTransform: 'capitalize'
115115
},
116116
h2: {
117117
fontSize: 1.4,
118-
fontWeight: 500,
118+
fontWeight: 'normal',
119119
letterSpacing: 0.05,
120120
lineHeight: 1.2,
121+
fontFamily: 'Gibson Regular',
121122
textTransform: 'capitalize'
122123
},
123124
h3: {
124125
fontSize: 1.3,
125-
fontWeight: 700,
126+
fontWeight: 'normal',
126127
lineHeight: 1.2,
127128
letterSpacing: 0.05,
129+
fontFamily: 'Gibson Regular',
128130
textTransform: 'capitalize'
129131
},
130132
h4: {
131133
fontSize: 1.1,
132-
fontWeight: 700,
134+
fontWeight: 'normal',
133135
letterSpacing: 0.05,
134136
lineHeight: 1.2,
137+
fontFamily: 'Gibson Bold',
135138
textTransform: 'capitalize'
136139
},
137140
h5: {
138141
fontSize: 0.7,
139-
fontWeight: 700,
142+
fontWeight: 'normal',
140143
letterSpacing: 0.15,
141144
lineHeight: 1.4,
145+
fontFamily: 'Gibson Bold',
142146
textTransform: 'uppercase'
143147
},
144148
h6: {
145149
fontSize: 0.6,
146-
fontWeight: 700,
150+
fontWeight: 'normal',
147151
lineHeight: 1.4,
152+
fontFamily: 'Gibson Bold',
148153
textTransform: 'uppercase'
149154
},
150155
body: {

‎static/fonts/gibson-webfont/GibsonBold.woff

38.6 KB
Binary file not shown.

‎static/fonts/gibson-webfont/GibsonBoldIt.woff

39.4 KB
Binary file not shown.

‎static/fonts/gibson-webfont/GibsonItalic.woff

40.7 KB
Binary file not shown.

‎static/fonts/gibson-webfont/GibsonLight.woff

36.2 KB
Binary file not shown.

‎static/fonts/gibson-webfont/GibsonLightIt.woff

39.3 KB
Binary file not shown.

‎static/fonts/gibson-webfont/GibsonRegular.woff

39.7 KB
Binary file not shown.

‎static/fonts/gibson-webfont/GibsonSemiBd.woff

35.8 KB
Binary file not shown.

‎static/fonts/gibson-webfont/GibsonSemiBdIt.woff

36.9 KB
Binary file not shown.

‎static/fonts/gibson-webfont/example.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<link rel="stylesheet" type="text/css"
6+
href="style.css"/>
7+
</head>
8+
9+
<body>
10+
11+
<h1>Generated from: http://www.cufonfonts.com</h1><br/>
12+
<h1 style="font-family:'Gibson Regular';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
13+
<h1 style="font-family:'Gibson Italic';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
14+
<h1 style="font-family:'Gibson Light';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
15+
<h1 style="font-family:'Gibson Light Italic';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
16+
<h1 style="font-family:'Gibson SemiBold';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
17+
<h1 style="font-family:'Gibson Semibold Italic';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
18+
<h1 style="font-family:'Gibson Bold';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
19+
<h1 style="font-family:'Gibson Bold Italic';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
20+
21+
22+
</body>
23+
</html>

‎static/fonts/gibson.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/* #### Generated By: http://www.cufonfonts.com #### */
2+
3+
@font-face {
4+
font-family: 'Gibson Regular';
5+
font-style: normal;
6+
font-weight: normal;
7+
src: local('Gibson Regular'), url('/fonts/gibson-webfont/GibsonRegular.woff') format('woff');
8+
}
9+
10+
11+
@font-face {
12+
font-family: 'Gibson Italic';
13+
font-style: normal;
14+
font-weight: normal;
15+
src: local('Gibson Italic'), url('/fonts/gibson-webfont/GibsonItalic.woff') format('woff');
16+
}
17+
18+
19+
@font-face {
20+
font-family: 'Gibson Light';
21+
font-style: normal;
22+
font-weight: normal;
23+
src: local('Gibson Light'), url('/fonts/gibson-webfont/GibsonLight.woff') format('woff');
24+
}
25+
26+
27+
@font-face {
28+
font-family: 'Gibson Light Italic';
29+
font-style: normal;
30+
font-weight: normal;
31+
src: local('Gibson Light Italic'), url('/fonts/gibson-webfont/GibsonLightIt.woff') format('woff');
32+
}
33+
34+
35+
@font-face {
36+
font-family: 'Gibson SemiBold';
37+
font-style: normal;
38+
font-weight: normal;
39+
src: local('Gibson SemiBold'), url('/fonts/gibson-webfont/GibsonSemiBd.woff') format('woff');
40+
}
41+
42+
43+
@font-face {
44+
font-family: 'Gibson Semibold Italic';
45+
font-style: normal;
46+
font-weight: normal;
47+
src: local('Gibson Semibold Italic'), url('/fonts/gibson-webfont/GibsonSemiBdIt.woff') format('woff');
48+
}
49+
50+
51+
@font-face {
52+
font-family: 'Gibson Bold';
53+
font-style: normal;
54+
font-weight: normal;
55+
src: local('Gibson Bold'), url('/fonts/gibson-webfont/GibsonBold.woff') format('woff');
56+
}
57+
58+
59+
@font-face {
60+
font-family: 'Gibson Bold Italic';
61+
font-style: normal;
62+
font-weight: normal;
63+
src: local('Gibson Bold Italic'), url('/fonts/gibson-webfont/GibsonBoldIt.woff') format('woff');
64+
}

0 commit comments

Comments
 (0)