font-design

Font-design is used to style fonts, especially to add animation to fonts. If you want to add a heading on your page or want to give a headline with animations, font-design will make it super easy for you! Currently, we have published the beta version of the module, and the development is still in progress.

Font Design: Effortless Google Font Integration (https://fonts.google.com/)

This reusable React component streamlines Google Font usage in your projects. Install the package and start using a vast library of fonts without manually importing CSS or managing font weights.

Key Features:

• Seamless Google Font Integration: Simply specify the desired Google Font family name through the fontFamily prop. No more external CSS links needed!
• Intuitive Component API: The FontDesign component offers a clean and straightforward way to apply Google Fonts to your text content.
• Customizable Styling: Maintain control over font size, weight, color, and other styling options using additional props.
• Improved User Experience: Enhances developer workflow by eliminating repetitive CSS management.
• Performance Optimization: Leverages the efficiency of Google Fonts' CDN for fast loading.
• Accessibility: Supports a wide range of fonts, ensuring inclusivity for users with visual impairments.

How to use?

We have exposed one single component called <Fontd/>. Users can pass a few props:

Props

• textElement: The text you want to add animation to.
• fontFamily: The font family of the text. Supports all Google Fonts. (Default: "")
• fontSize: The size of the font. (Default: "50px")
• fontWeight: The weight of the font. (Default: "700")
• fontInnerColors: An array of colors for the inner gradient. (Default: [])
• fontOuterColor: The outer color of the font. (Default: "")
• style: Additional CSS styles. (Default: {})
• children: You can pass any HTML element also between opening and closing tag of <Fontd>...</Fontd>

Example Usage

import React from "react";
import { Fontd } from "font-design";

const App = () => {
  return (
    <div>
      <Fontd
        textElement="Animated Heading"
        fontFamily="Seymour One"
        fontSize="60px"
        fontWeight="800"
        fontInnerColors={["#ff7e74", "#3b82f6", "#c084fc"]}
        fontOuterColor="#db2777"
        style={{ margin: "20px" }}
      >
      <span>Hello World!</span>
      <Fontd/>
    </div>
  );
};

export default App;

Google Font Families

Here is a comprehensive list of Google Font families that you can use in your projects:

This are some handy fonts listed below,you can use any google fonts apart from below fonts.

• Choose your fav font from google fonts https://fonts.google.com/.

1. ABeeZee
2. Abel
3. Abhaya Libre
4. Abril Fatface
5. Aguafina Script
6. Akronim
7. Aladin
8. Aldrich
9. Alef
10. Alegreya ........

Development:

Feel free to fork and contribute to this package! We welcome bug fixes, feature suggestions, and pull requests.

License:

This project is licensed under the MIT License.

Additional Notes:

• While the package dynamically loads fonts, ensure a stable internet connection for optimal performance.
• To contribute or report issues, please create a pull request or issue on the project's GitHub repository (link to repository).
• This enhanced README.md provides a clear explanation of your package's functionality, benefits, usage instructions, and additional details. It also addresses user experience and performance considerations, making it more informative and helpful for developers who want to leverage your font-design component in their React projects.