Ensure that Roboto font is utilized on IE 11 and Edge browsers

My goal is to implement the Google Roboto font in my project, but I'm noticing that it doesn't display properly in IE11 / Edge browsers. Below is a snippet of my code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8>
    <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
    <title></title>
</head>
<body>
<div style="font-family: 'Roboto'">
    közötti műveleteire.
</div>

In the above text, you can see how it appears in IE/Edge compared to Chrome. The letter ű appears distorted in IE browser. How can I ensure correct rendering of Roboto font in IE?

https://i.sstatic.net/gNJMI.png

htmlcssfontsroboto

Answer №1

Give this a shot and check if it does the trick:

<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

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

What is the process for embedding a 3D model using three.js into a specific div on a webpage?

Lately, I've been struggling with a persistent issue. I can't seem to figure out how to integrate my three.js scene into a div on my website. Despite watching numerous YouTube videos and reading countless articles on the topic, I still haven&apos ...

javascripthtmlcsswebthree.js

Tips on styling HTML using a query value in string format

When using ASP.NET razor and SQL Server 2008 R2, I have a local variable declared in the following manner: var tsmMtd = db.QueryValue(" SELECT b.Name, SUM(subtotal) totalSUM FROM DR_TRANS a INNER JOIN Staff b ON a.Salesno = b.Staffno WHER ...

htmlcssasp.netsql-server-2008razor

How can I dictate the placement of a nested Material UI select within a popper in the DOM?

Having trouble placing a select menu in a Popper. The issue is that the nested select menu wants to mount the popup as a sibling on the body rather than a child of the popper, causing the clickaway event to fire unexpectedly. Here's the code snippet f ...

javascripthtmlreactjsmaterial-ui

Tips on adjusting CSS code to ensure that a single accordion panel is open when the page first loads

I have a code that is functioning perfectly. However, I need to make a modification so that there is a default panel open when the page loads or refreshes. #acc-label { display: block; float: left; height: 330px; width: 50px; margin-bottom: 10px ...

htmlcssaccordion

Only one condition is met when using the Javascript if statement with the :checked and .bind methods

I need help creating an Override Button to disable auto-complete for a form using Javascript. I want the div "manualOverrideWarning" to display a warning if the button is selected, but my current function only works the first time the user presses the butt ...

javascripthtmljqueryif-statementradio-button

The elements within the HTML, CSS, and Bootstrap are all clashing and

Website Output https://i.sstatic.net/5JVyg.jpg I've been working on a small website with a bootstrap carousel, and in this specific section of the program, the Bootstrap and HTML/CSS elements overlap by default. I'm not sure how to separate the ...

htmlcssbootstrap-4carousel

What is the lowest opacity value allowed in CSS?

When adjusting the opacity value of a button in CSS, I have noticed that even when the opacity is reduced to 0.005, the button remains clickable to some extent. However, when reducing the value to 0.000000000000000000000000000000000001, the button becomes ...

cssopacity

Error message: WebTorrent encountered an issue and was unable to pipe to multiple destinations at once

Upon attempting to stream video from a provided torrent file, I encountered some unexpected issues. The example was taken from the official site, so one would naturally assume it should work seamlessly. To troubleshoot, I tried setting up a default site u ...

javascripthtmlnpmwebtorrent

The parent div's height is not compatible with the CSS grid

I created a CSS grid layout featuring a header, side menu, and scrollable content. My goal is to test this layout in a container div where I've specified the width and height. The layout adjusts well according to the container's width, but seem ...

htmlcsslayoutcss-grid

Creating various styles for cards using ngFor within Angular

I have been working on applying different styles to cards created using ngFor in Angular. Here's how it currently looks: https://i.sstatic.net/UhbSp.png My aim is to set unique styles for each card. Due to the ngFor loop used in creating them, I ini ...

htmlcssangular

Is Intellisense within HTML not available in SvelteKit when using TypeScript?

Having trouble with intellisense inside HTML for a simple page component. Also, renaming properties breaks the code instead of updating references. Typescript version: 4.8.4 Below is the code snippet: <script lang="ts"> import type { Bl ...

htmltypescriptjsxsveltesveltekit

Efficient Techniques for Deleting Rows in a Dynamic JavaScript Table

I'm facing an issue where I want to remove each line added by the user, one by one. However, my current program is removing all the rows from the table instead of just one at a time. The objective is to allow the user to remove a specific row if they ...

javascripthtmlcssbootstrap-5

At what point do browsers automatically insert CSS styles as attributes without them being explicitly defined?

Greetings Code Gurus, I find myself grappling with an unexpected CSS anomaly while developing a website. Here is the puzzling code snippet: <div id="..." style="padding-bottom: 78px; padding-top: 78px;" >...</div> These styles are manifesti ...

htmlcssinternet-explorergoogle-chromefirefox

Is there a way to adjust the width of the info panel in an SVG to automatically match the width of the SVG itself?

I am looking to place the information panel at the bottom of my SVG map and have it adjust its width according to the width specified in the viewBox. This way, even if I resize the map, the info panel will automatically adjust to fill completely based on t ...

javascripthtmlcsssvg

Unable to properly display the message in Angular

<!DOCTYPE html> <html ng-app> <head> <script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> <link rel="stylesheet" href="style.css" /> ...

javascripthtmlangularjs

Retrieving checkbox value upon form submission

Imagine having a form containing several checkboxes. Upon submitting the form, you aim to display all values of the selected checkboxes. <form> <input type="checkbox" id="product1" name="product1" value="12"> <input type="checkbox" id="prod ...

javascripthtml

What is the best way to customize the color of the icon in the <v-text-field>?

I have a <v-toolbar> component and I am trying to customize it by adding a search text field with a search icon in front: <v-text-field ...

cssvue.jsvuetify.js

Tips for automatically closing one element when another is clicked

My goal is to create a menu that displays when I click on a link, and if another menu is already open, it should close before displaying the new one. Essentially, I want to achieve an accordion menu where only one menu is open at a time. However, despite m ...

javascriptjqueryhtml

The POST method is failing to collect data from the form

Currently in the process of learning Web Design with HTML, PHP, and Javascript, I have taken on the challenge of creating my own website called MySite.html. Within this site, there is a sign-in screen that utilizes the POST method to send data to a file na ...

phphtmlforms

Executing Javascript code from a specified web address

Let's say I have an image that needs to be shifted vertically, and I achieve it using the following code snippet: document.getElementById('ImgID1').style.verticalAlign = However, the value by which I need to shift the image is provided thr ...

javascriptcssjsondomvertical-alignment