<h1 align="center">
   <b>
        <img style="margin-top: 20px; margin-bottom: 20px" width="55%" src="./src/logo/Arabic Fonts.png" /><br>
    </b>
</h1>

<p align="center"><b>Arabic Fonts</b> is an npm package that provides a collection of Arabic fonts.</p>

<div align="center">

[![npm version](https://img.shields.io/npm/v/arabic-fonts.svg)](https://www.npmjs.org/package/arabic-fonts)
[![install size](https://packagephobia.com/badge?p=arabic-fonts)](https://packagephobia.com/result?p=arabic-fonts)
[![npm downloads](https://img.shields.io/badge/Download-1k%2FMonth-brightgreen)](https://npm-stat.com/charts.html?package=arabic-fonts)

</div

<!-- This package can be particularly useful for those working on projects that require Arabic language support, such as websites, applications, or digital content targeting Arabic-speaking audiences. -->

<!-- The package includes a variety of font styles and weights to choose from, allowing developers to customize the typography of their Arabic content.  -->

## Quick Installation

```
npm install arabic-fonts;
```

## Usage

```JSX
import React from "react";
import "arabic-fonts/src/css/arabic-fonts.css";

const ArabicFont = () => {
  return (
    <div>
      <p className="font-indopak">بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ</p>
      <p className="font-muhammadi">بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ</p>
      <p className="font-noorehira">بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ</p>
    </div>
  );
};

export default ArabicFont;
```

## Documentation

<!-- Arabic-Fonts is a package that provides a collection of Arabic fonts that can be used in web development projects. The package includes a wide selection of font styles and weights, allowing developers to customize the typography of their Arabic content. -->

To use the package, simply install it via npm and import the desired font(s) into your project. The package is designed to be easy to integrate with popular web development frameworks and libraries, such as React, Angular, and Vue.

```JSX
import "arabic-fonts/src/css/arabic-fonts.css"; // Import CSS in JSX
```

```jsx
<span className="font-indopak">بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ</span> // Indo-Pak Font
```

```jsx
<span className="font-muhammadi">بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ</span> // Muhammadi Font
```

```jsx
<span className="font-noorehira">بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ</span> // Noorehira Font
```

<!-- In addition to the font collection, Arabic-Fonts also offers customizable options for font properties such as size, line height, and letter spacing. The package is optimized for Arabic text, ensuring that the fonts render correctly and are visually pleasing to Arabic-speaking users. -->

<!-- Arabic-Fonts is regularly updated with new fonts and features to ensure that developers have access to the latest and greatest Arabic fonts for their projects. The package also offers comprehensive documentation and support resources, including tutorials, examples, and a dedicated support team to assist with any issues or questions. -->

Overall, Arabic-Fonts is a powerful tool for developers working on projects that require Arabic language support. With its wide selection of fonts, customizable options, and regular updates, Arabic-Fonts can help developers create visually stunning and effective Arabic content for their users.

## Features Of Arabic-Fonts

1. Wide selection of fonts: Arabic-Fonts could offer a wide variety of Arabic fonts to choose from, including different styles, weights, and variations.

<!-- Customizable options: The package could allow developers to customize various font properties, such as font size, line height, and letter spacing, to fit their specific design needs. -->

2. Easy integration: The package could be easy to integrate with popular web development frameworks and libraries, such as React, Angular, and Vue.

<!-- Responsive design: Arabic-Fonts could be designed to be responsive and adapt to different screen sizes and resolutions, ensuring that Arabic text remains legible and visually appealing across different devices and platforms. -->

3. Regular updates: Regular updates add new Arabic fonts and features.

<!-- 3. Regular updates: Arabic-Fonts could be regularly updated with new fonts and features, ensuring that developers have access to the latest and greatest Arabic fonts for their projects. -->

4. High-quality typography: Arabic-Fonts optimized for high-quality typography and visual appeal.

<!-- 4. High-quality typography: The package could offer high-quality typography that is optimized for Arabic text, ensuring that the font renders correctly and is visually pleasing to Arabic-speaking users. -->

5. Documentation and support: Provide tutorials, examples, and support team for Arabic-Fonts to assist developers in using the package quickly and easily.

## Contact

Created by [@emon-ahmed](https://www.emonahmed.com/) - feel free to contact me!
