What: A fun little component to showcase the Bank Nue Font, which has been designed as a multi-colour display font, especially for bigger sizes. The component displays a given text as in the picture above, by superposing two styles.
The Bank Nue Font page says: This font comes in two styles, which can be combined and layered to create a dynamic and striking appearance.
Using: React, typescript, and styled-components.
In your React app, create (or add to) the files as follows:
STEP 1. From the Bank Nue Font page given above, download the following files into "src/fonts" folder:
- banknue-lined-webfont.woff
- banknue-lined-webfont.woff2
- banknue-sectioned-webfont.woff
- banknue-sectioned-webfont.woff2
STEP 2. Add to "src/index.css":
@font-face { font-family: 'banknuelined'; src: url('./fonts/banknue-lined-webfont.woff2') format('woff2'), url('./fonts/banknue-lined-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'banknuesectioned'; src: url('./fonts/banknue-sectioned-webfont.woff2') format('woff2'), url('./fonts/banknue-sectioned-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } STEP 3. Our new component "src/components/BankNueFontText.tsx":
import styled from "styled-components"; type StyleProps = { size: 1 | 2 | 3 | 4 | 5 | 6; }; const Container = styled.div<StyleProps>` position: relative; font-size: ${({ size }) => size * 30}px; `; const Stripes = styled.div` font-family: banknuelined; `; const Shadow = styled.div` position: absolute; font-family: banknuesectioned; mix-blend-mode: multiply; /* mix-blend-mode: luminosity; */ `; const ShadowBlue = styled(Shadow)<StyleProps>` color: #00cef1; top: ${({ size }) => size}px; `; const ShadowRed = styled(Shadow)<StyleProps>` color: #fa0007; top: ${({ size }) => size * 2}px; left: -${({ size }) => size}px; `; type Props = { size?: 1 | 2 | 3 | 4 | 5 | 6; text: string; }; // See: https://dafontfile.com/bank-nue-font/ const BankNueFontText = ({ size = 3, text }: Props) => { return ( <Container size={size}> <Stripes>{text}</Stripes> <ShadowBlue size={size}>{text}</ShadowBlue> <ShadowRed size={size}>{text}</ShadowRed> </Container> ); }; export default BankNueFontText; STEP 4. In any of your components or pages, add:
const text = "bank"; ... return ( ... <BankNueFontText size={4} text={text} /> ...); Suggestions/questions are welcome.
Top comments (0)