Getting font-face to work on IE 11 can be a bit tricky, as it may require multiple attempts to properly

Can anyone assist with an issue I am encountering on my website? When viewed in IE 11, the text on some headings and paragraphs flashes between Times New Roman and the specified font-face type before settling on the correct font. This all happens in less than a second.

EDIT: A demo showcasing this problem can be accessed here. The code used is as follows:

<html>
<head>
<style type="text/css">
  @font-face {
    font-family: MontserratBold;
    src: url(MontserratBold.ttf);
  }
</style>
</head>
<body style="background: red">
  <p style="font-family: 'MontserratBold'">jkflasdfas faks faksfj </p>
</body>
</html>

Answer №1

To customize your font file, ensure to set the same names for Fontname, Family name, and Name before exporting it as TTF. For this task, utilize the FontForge application.

Subsequently, convert the font for web usage (EOT, WOFF).

Explore further

To successfully implement it, acquire the TTF font version and transform it for web applications.

CSS

@font-face {
    font-family: 'mregular';
    src: url('fonts/mregular.eot');
    src: url('fonts/mregular.eot?iefix') format('opentype'),
         url('fonts/mregular.woff') format('woff'),
         url('fonts/mregular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

Formatting HTML Output Using PHP

Looking to format html output sourced from a database using php and facing an issue: Desired Format: ... <li> <div class="row-wrapper"> <div class="some-class-1">ARRAY-ELEMENT-1</div> <div class="some-class-1" ...

Converting line breaks into a visible string format within Angular

After thorough research, all I've come across are solutions that demonstrate how to display the newline character as a new line. I specifically aim to exhibit the "\n" as a string within an Angular view. It appears that Angular disrega ...

Center-align the text in the navigation bar

Is there a way to center the text within my navigation and ensure it remains centered across all resolutions (left at 1920x1080, centered at 1420)? I understand that much of this code is inefficient and not working correctly, but for now I just want to fi ...

Is it possible to make an HTML page permanent and uneditable?

Is it possible to secure my HTML file from being edited or modified, especially in a web browser? Discover innovative techniques and gain deeper insights into web development and website design. Interested in learning more about HTML, CSS, JavaScript, PH ...

There are two design issues that need to be addressed: a white background glitch and a layout problem specifically in

I'm facing two issues with my website located at Issue 1 : In Internet Explorer 9, the header displays correctly but the text area is not in the right position. Issue 2: There is a white area around the header that should show the background instead ...

Angular error message: Trying to access the property 'name' of an undefined object leads to a TypeError

I'm having trouble phrasing this question differently, but I am seeking assistance in comprehending how to address this issue. The error message I am encountering is as follows: TypeError: _co.create is not a function TypeError: Cannot read property ...

Increasing the size of a background image as you scroll

Is there a way to adjust the background image of a div so that it scales according to the amount the page is scrolled? The current implementation works fine on desktop screens, but on mobile screens, the height of the background image reduces and the image ...

Host your own website online using your personal computer

So I have created a simple HTML page that I want to publish on the Internet using my PC. This is just for testing purposes, so I don't require a static IP address or high uptimes. First, I installed Tomcat Apache and placed my WAR file in the webapps ...

Struggling with the alignment of pictures inside a container

I utilized the Instafeed.js library to fetch the three most recent images from an Instagram account. These images are loaded into a specific div and I successfully customized their styling according to my requirements. However, the current setup is quite s ...

A layout featuring two columns that have heights which are fixed to the bottom of the footer

I've designed a simple layout featuring 2 columns and a footer that adjusts based on the height of the longer column. <div id="holder"> <nav class="navbar navbar-default navbar-fixed-top"></nav> <div class="container"> ...

Adding multiple text as label and sublabel in a React MUI Tooltip can be achieved by utilizing the appropriate

I'm struggling to incorporate a MaterialUI Tooltip into my React application with two separate text lines. The first line should serve as the main title, while the second line functions as a sublabel. In this screenshot provided, you can see where I ...

Tips for navigating a user to a different HTML page using JSP code?

In my html page Login.html, I have set up a simple login form with username and password fields, along with a submit button. When the user clicks on the submit button, it triggers a JSP page named Login.jsp to validate the entered credentials against an ...

Background of jQuery-UI Slider

Can the background color of a jQuery-UI Slider widget be set using JavaScript? This is the default setting: What I am trying to accomplish is the following: The green range should be determined based on historical data. I want to visually show the user ...

displaying and activating element using jQuery

I'm currently working on setting up a notification system for my website but seem to be encountering some issues that I can't quite pinpoint. Essentially, I have a link that triggers a JavaScript function upon being clicked. This function is mean ...

Bootstrap's Vertical Margin Concept

Is there a way to include margin or a line similar to the image below? [![Please refer to the accompanying image][1]][1] ...

Leverage data retrieved from a JSON response to dynamically populate variables on a webpage through an AJAX API

After making an AJAX call to my API and receiving JSON data, I am looking to dynamically update my webpage using specific values from the JSON response. <div class="Name"></div> <div class="Role"></div> <div class="Location"> ...

Invoke JavaScript when the close button 'X' on the JQuery popup is clicked

I am implementing a Jquery pop up in my code: <script type="text/javascript"> function showAccessDialog() { var modal_dialog = $("#modal_dialog"); modal_dialog.dialog ( { title: "Access Lev ...

Transferring the values of JavaScript objects to HTML as strings

My goal is to generate HTML elements based on the values of specific JavaScript objects that are not global variables. However, when attempting to execute the code below, I encounter an error stating "params is not defined." What I actually aim to achieve ...

Steps to resolve transition zoom issues with images

I'm having trouble showcasing blog posts with an image. Currently, I am utilizing card-columns from Bootstrap 4, and when the user hovers over the image, it scales up. The issue arises when the transition occurs, as my border radius resets to defaul ...

Deck.gl's StaticMap component from Mapbox fails to resize properly, causing it to overwrite other elements on the screen

I am encountering an issue while trying to integrate a basic deck.gl (mapbox static map) into a react project. Although I can successfully add the map, it ends up taking over the entire page and hides any other content that should be visible above it. Spec ...