import React from 'react'; import TextField from '../../../shared/TextField'; const fontOptions = [ 'Lato', 'Montserrat', 'Nunito', 'Open Sans', 'Raleway', 'Rubik', 'Source Sans Pro', 'Titillium Web', 'Ubuntu', ]; const FontsTab = ({ theme, onChange }) => { return (
{fontOptions.map(x => (
onChange('theme.font.family', x)} className={`w-full rounded border py-4 shadow text-xl text-center ${ theme.font.family === x ? 'border-gray-500' : 'border-transparent' } hover:border-gray-400 cursor-pointer`} > {x}
))} onChange('theme.font.family', v)} />

You can use any font that is installed on your system as well. Just enter the name of the font family here and the browser would load it up for you.

); }; export default FontsTab;