Fontcetera is a Chrome extension that allows you to easily format your text with various Unicode fonts and styles.

• Multiple font styles including Serif, Sans-serif, Gothic, Script, Double-struck, Monospace, and Full width.
• Text decorations: Bold, Italic, Underline, Strikethrough, and Overline (availability depends on the selected font).
• Real-time text formatting preview.
• Easy copy-to-clipboard functionality.
• Simple and intuitive user interface.

1. Enter your text in the input field.
2. Select the desired font from the dropdown menu.
3. Apply text decorations using the buttons (B, I, U, S, O).
4. The formatted text will be displayed in the output field.
5. Click "Copy" to copy the formatted text to your clipboard.

• Serif (default)
• Sans-serif
• Gothic
• Script
• Double-struck
• Monospace
• Full width

Note: Not all decorations are available for every font. The UI will disable options that are not applicable to the selected font.

• Node.js
• npm or yarn

1. Clone the repository:

   git clone https://github.com/youssefrbahi/fontcetera.git
   cd fontcetera

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm run dev
   # or
   yarn dev

4. Open Chrome and navigate to chrome://extensions/.

5. Enable "Developer mode" by toggling the switch in the top right corner.

6. Click "Load unpacked" and select the dist directory.

To create a production build, run:

npm run build
# or
yarn build

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License.

Created by Youssef Rbahi

This project uses the following libraries and resources:

• React: A JavaScript library for building user interfaces
• Vite: Next Generation Frontend Tooling
• CRXJS A Vite plugin to help develop Chrome extensions
• toUnicodeVariant: A JavaScript library to convert strings to unicode variants
• Tailwind CSS: A utility-first CSS framework
• SVGR: Transform SVGs into React components
• Font Awesome: For the house and info circle icons
• TypeScript: A typed superset of JavaScript
• ESLint: A tool for identifying and reporting on patterns in JavaScript
• Prettier: An opinionated code formatter

Feel free to reach out if you have any questions or suggestions!