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', () => ( - +