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)