I'm attempting to create an HTML document using the Shruti font (Gujarati Unicode), but instead of displaying correctly, it is showing strange, random symbols

Attempting to create an HTML file utilizing the Shruti font (Gujarati Unicode), but encountering random symbols instead. I have experimented with various methods, including the mpdf library, without success in importing the Shruti font.

Answer №1

It is essential to specify the encoding.

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<style>
    body { font-family: Shruti; }
</style>
</html>
<body>
<h1>ગુજરાતી લિપિ</h1>
<p><b>ગુજરાતી લિપિ</b> એ
<a href="https://gu.wikipedia.org/wiki/ગુજરાત">ગુજરાત</a>
રાજ્યમાં વસતા લોકો દ્વારા લેખનકાર્યમાં વપરાતી લિપિ છે, જે લિપિમાં
<a href="https://gu.wikipedia.org/wiki/ગુજરાતી_ભાષા">ગુજરાતી</a>,
<a href="https://gu.wikipedia.org/wiki/કચ્છી_ભાષા">કચ્છી</a>
તેમજ કેટલીક અન્ય ભાષાઓ લખવામાં વાપરવામાં આવે છે.</p>
</body>
</html>

Answer №2

The reason for this is possibly due to certain symbols not being compatible with the Shruti font

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to make the `<body>` element respect the offset (i.e. the user's current scroll position) when the 'custombox' modal is triggered?

I'm currently facing an issue with the scroll bars in the browser while using custombox.js in combination with BS4. Let me provide some context: I am working with a Custombox modal, which is similar to a BS4 modal. When a modal is opened in BS4, a c ...

Captivating captions for captivating visuals. Pictures don't conform to a linear arrangement

As someone who is new to website creation, I am currently working on adding a CSS effect where a popup-text appears when an image is hovered over. I want to create a row of images for the popups by using an unordered list. However, I'm facing a proble ...

Tips for retrieving the values from several text areas and saving them to a database when the submit button is clicked

I need help with capturing and storing the values of multiple text-area boxes into a database upon clicking the submit button. These text-areas are dynamically generated when the add button is clicked. My tech stack involves Node.js, Express, and MongoDB. ...

What is the best way to add a custom class alongside cdk-overlay-pane for a material menu in Angular 7?

I have a specific requirement to create a mega menu using Angular Material Menu. I attempted to apply some custom styling to the cdk-overlay-pane using my own class, but it did not work as expected. I tried to add a custom class to the mat-menu element us ...

Adjust the size of the DIV container to match the width of its floating contents

I have been experimenting with creating a container div that adjusts its width based on the size of its contents. To achieve this, I have successfully used float: left on the container. Here's what my current setup looks like: HTML <div class=&ap ...

Is there something I'm overlooking in my image navigation? It doesn't seem to be interactive

Looking for assistance regarding the issue below. I can't seem to make my image clickable, and I'm not sure what's causing this problem. <img src= "makeup.html.jpg" alt= "Make up by Lauren Evans logo" title= "Make ...

Using multiple conditions in SetEnvIf

I am trying to implement the SetEnvIf directive in my .htaccess file for handling multiple conditions and redirecting to a specific URL. The code I have written is as follows: SetEnvIf Remote_Host "^" press_flag=0 SetEnvIf Request_URI '/press/$&apos ...

Ways to horizontally line up text boxes

I need help aligning two textboxes next to their display names in a single line. I'm currently using dl, dt, and dd, but I'm having trouble getting them to align horizontally. Any suggestions on how to achieve this alignment would be greatly appr ...

Tips for triggering a click event on a Vimeo play button?

My website features a point system which determines whether users have access to certain Vimeo videos. When the play event is triggered in the Vimeo player, I need to verify if the user has enough points to watch the video. ...

Establish a buffering system for the <video> element

Currently, I am facing an issue with playing videos from a remote server as they take an extended amount of time to start. It appears that the entire video must be downloaded before playback begins. Is there a way to configure the videos so they can begi ...

"Learn the process of connecting an HTML5 element to Angular 2 source code while in a saving mode

In this Angular2 implementation, I have created some HTML code for user access. However, I am facing an issue where the data is not binding at the Angular2 source code side. HTML Code <form class="form-horizontal" novalidate [formGroup]="EmployeeForm" ...

Ways to get rid of the white horizontal line generated by bootstrap framework?

I'm currently working on a responsive navbar design and I want it to appear transparent over a background image. However, my front-end knowledge is limited as I've only been learning for a week. Can anyone advise me on how to remove the white bar ...

Automatic table width expansion with CSS

I'm in the process of creating a new website, and I want the layout to resemble the following: +---+--------------+ |# | | |n | #page | |a | table.basic | |i | | |g | | |a | | |t | ...

The md-autocomplete feature showcases search results in a list format rather than a dropdown menu

Currently, I am working on implementing the Angular Material md-autocomplete tag to provide suggestions for zip codes in a form. To achieve this, I have set up an asynchronous service that fetches the suggestions and populates the results. My reference poi ...

Encountered an issue while attempting to send a POST request using AngularJS $

I am facing an issue with accessing the POST method from my server. Whenever I log the response, it always returns status=0. Can anyone help me out or provide some advice? Note: I have tested the method in Postman and it works fine. Below is the code snip ...

What is the best way to assign an image to a div using JavaScript or jQuery?

I'm attempting to create a notification box similar to this one: https://i.sstatic.net/HIJPJ.png As shown, there is a .gif image positioned at the top that will be hidden once the content loads. Now, I want to insert the following image into a <d ...

The function does not get activated when mouseover event is triggered with AddEventListener

I am attempting to create a series of radio buttons, each with its own AddEventListener function. However, I am encountering issues while using the code below within a while loop that retrieves data from a MySQLI table: echo ' <script> do ...

What is the best way to adjust a <textarea> to fit a multi-column layout?

Here's a cool way to display text in columns: <div class="content-box" style="column-width: 8em"> <p>blah blah...</p> <p>blah blah...</p> <p>blah blah...</p> </div> However, when it comes to the ...

Unable to modify the hover color on the image or icon

After creating a circle icon with an image in the center, I wanted to make the image change colors on hover. The main focus of the icon is the circle itself. In my attempt to achieve this effect, I included the following code for the circle icon: .circle- ...

Responsive menu not functioning properly with jQuery

I am currently working on a website located at . My goal is to incorporate the navigation plugin called MeanMenu into the site. I have followed all the instructions provided in the tutorial: adding the jQuery script to my HTML, including the CSS in the hea ...