diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js
index b999bc8e..10fbdf90 100644
--- a/ui/src/components/base/index.js
+++ b/ui/src/components/base/index.js
@@ -1,4 +1,6 @@
const constants = require('../../shared/constants');
+const fncs = require('../../shared/functions');
+
const Styled = require('styled-components');
const {
@@ -9,15 +11,27 @@ const {
} = constants;
const {
- default: styled
+ default: styled,
} = Styled;
-module.exports = styled.div`
- @font-face {
- font-family: 'LibreFranklin';
- src: url('../../shared/fonts/LibreFranklin.ttf') format('truetype')
- }
+const {
+ generateFonts
+} = fncs;
+
+// The name that will be used in the 'font-family' property
+const fontFamilies = [
+ 'LibreFranklin'
+];
+
+// The name the font file without the extension
+const fontFilenames = [
+ 'librefranklin-webfont'
+];
+
+module.exports = styled.div`
+ ${generateFonts(fontFamilies, fontFilenames)};
+
font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
diff --git a/ui/src/shared/fonts/LibreFranklin.ttf b/ui/src/shared/fonts/LibreFranklin.ttf
deleted file mode 100644
index 05e5064f..00000000
Binary files a/ui/src/shared/fonts/LibreFranklin.ttf and /dev/null differ
diff --git a/ui/src/shared/fonts/librefranklin-webfont.eot b/ui/src/shared/fonts/librefranklin-webfont.eot
new file mode 100755
index 00000000..88e60e15
Binary files /dev/null and b/ui/src/shared/fonts/librefranklin-webfont.eot differ
diff --git a/ui/src/shared/fonts/librefranklin-webfont.svg b/ui/src/shared/fonts/librefranklin-webfont.svg
new file mode 100755
index 00000000..db7bc77a
--- /dev/null
+++ b/ui/src/shared/fonts/librefranklin-webfont.svg
@@ -0,0 +1,475 @@
+
+
+
\ No newline at end of file
diff --git a/ui/src/shared/fonts/librefranklin-webfont.ttf b/ui/src/shared/fonts/librefranklin-webfont.ttf
new file mode 100755
index 00000000..bd5319cc
Binary files /dev/null and b/ui/src/shared/fonts/librefranklin-webfont.ttf differ
diff --git a/ui/src/shared/fonts/librefranklin-webfont.woff b/ui/src/shared/fonts/librefranklin-webfont.woff
new file mode 100755
index 00000000..1826ba48
Binary files /dev/null and b/ui/src/shared/fonts/librefranklin-webfont.woff differ
diff --git a/ui/src/shared/fonts/librefranklin-webfont.woff2 b/ui/src/shared/fonts/librefranklin-webfont.woff2
new file mode 100755
index 00000000..38b8e4df
Binary files /dev/null and b/ui/src/shared/fonts/librefranklin-webfont.woff2 differ
diff --git a/ui/src/shared/functions.js b/ui/src/shared/functions.js
index 28e540c8..57818b4a 100644
--- a/ui/src/shared/functions.js
+++ b/ui/src/shared/functions.js
@@ -14,6 +14,33 @@ const rndId = (_code) => {
: lastDigit;
};
+const generateFonts = (fontFamilies, fontFilenames) => {
+ const pathToFont = '../../shared/fonts/';
+ let fontCSS = '';
+
+ fontFamilies.forEach( (fontFamily, i) => {
+ fontCSS += `
+ @font-face {
+ font-family: ${fontFamily};
+ src: url(${pathToFont}${fontFilenames[i]}.eot);
+ src: url(${pathToFont}${fontFilenames[i]}.eot?#iefix)
+ format('embedded-opentype');
+ src: url(${pathToFont}${fontFilenames[i]}.woff)
+ format('woff');
+ src: url(${pathToFont}${fontFilenames[i]}.woff2)
+ format('woff2');
+ src: url(${pathToFont}${fontFilenames[i]}.ttf)
+ format('truetype');
+ src: url(${pathToFont}${fontFilenames[i]}.svg#${fontFamily})
+ format('svg');
+ font-weight: normal;
+ font-style: normal;
+ }
+ `;
+ });
+ return fontCSS;
+};
+
module.exports = {
remcalc: (values) => {
values = values.toString().replace('px', '').split(' ');
@@ -29,5 +56,6 @@ module.exports = {
return outputRems;
},
calc: (str) => calc(`calc(${str})`),
- rndId
+ rndId,
+ generateFonts
};
diff --git a/ui/stories/index.js b/ui/stories/index.js
index 23d73418..61e1882b 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -66,7 +66,7 @@ const styles = {
storiesOf('Grid', module)
.add('Row and Column', () => (
-
+