I am using 1st-time @font-face and facing some issue that my form label need two languages (1) English and (2) Hindi
I want the content of the text box in Hindi instead of the English alphabet.
For Hindi ,Marathi font I made below CSS added external CSS font but it’s not coming on my form, then I called my class into my HTML but HTML is taking junk values, I don’t know where I doing some mistakes please suggest me a solution.
code: @font-face {
font-family: hindi !important;
font-style: normal;
font-weight: 400;
src: url('file:///C:/Users/Tapas/Desktop/java%20script/es6/Kruti_Dev_010.ttf');
}
.lang-hindi {
font-family: hindi !important;
}
<p class="lang-hindi"> kaise ho</p>
I am expecting the Hindi alphabet as an output but it’s showing only the English alphabet, can anyone please help me with the solution.
hindi font genrator,marathui -||_ ,stylish hindi fonts generator,hindi stylish font generator copy and paste,hindi calligraphy fonts online generator,
How to Add Marathi, Sanskrit, and Hindi Fonts in HTML/CSS
If you’re looking to display Marathi, Sanskrit, and Hindi fonts in your HTML/CSS project, you’ve come to the right place. In this comprehensive guide, we’ll walk you through the process of adding these fonts and ensuring they render correctly on your web pages. Let’s dive in!
1. Understanding the Issue
You mentioned that you want to use both English and Hindi languages in your web form, but the content in the text box is only displaying English characters instead of the desired Hindi alphabet. This can be addressed by correctly implementing the necessary CSS and font settings.
2. Utilizing @font-face Rule
The @font-face rule is essential for embedding custom fonts in your web project. You’ve already provided a code snippet where you attempted to use the @font-face rule to define the Hindi font. Let’s review and enhance the code:
@font-face {
font-family: hindiFont;
font-style: normal;
font-weight: 400;
src: url('path-to-your-font-file.ttf') format('truetype');
}
In the above code:
- Replace
'path-to-your-font-file.ttf'with the actual file path of the Hindi font you want to use. Make sure the font file is accessible and hosted on your server. - We’ve named the font-family as
hindiFont, which we will use later to apply the font to specific elements.
3. Applying the Font
Now that we’ve defined the @font-face, let’s apply it to the desired elements in your HTML:
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: hindiFont;
font-style: normal;
font-weight: 400;
src: url(‘path-to-your-font-file.ttf’) format(‘truetype’);
}.lang-hindi {
font-family: hindiFont, Arial, sans-serif;
/* Fallback font-family (Arial) will be used in case the custom font doesn’t load. */
}
</style>
</head>
<body>
<p class=”lang-hindi”>कैसे हो</p>
</body>
</html>
To support multiple languages (e.g., Hindi, Marathi, and English), you can define multiple @font-face rules for each language-specific font and use them accordingly.
Conclusion
By following the steps outlined in this guide, you should be able to add Marathi, Sanskrit, and Hindi fonts to your HTML/CSS project successfully. Remember to ensure that the font files are hosted correctly and that you apply the font-family to the appropriate elements in your HTML. This will ensure that the desired Hindi characters are displayed instead of the default English characters.