Internet Explorer experiencing issues with rendering WOFF fonts

My webpage utilizes the Avenir font, which displays correctly in Firefox, Opera, and Chrome. However, Internet Explorer 11 does not seem to render this font properly. I have included the following code to ensure compatibility with Internet Explorer:

<style type="text/css>
@font-face { font-family:"Avenir LT Std 35 Light"; src:url("./Fonts/Avenir LT Std 35 Light.eot"); } /* for IE */
@font-face { font-family:"Avenir LT Std 35 Light"; src:url("./Fonts/Avenir LT Std 35 Light.woff") format("woff"); } /* Works only in WOFF-enabled browsers */
.ft0{font-family:"Avenir LT Std 35 Light";font-size:16.67px;color:#BFBFBF}
.ft1{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#BFBFBF}
.ft2{font-family:"Avenir LT Std 35 Light";font-size:12.50px;color:#BFBFBF}
.ft3{font-family:"Avenir LT Std 35 Light";font-size:12.50px;color:#292C31}
.ft4{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#FE4A5E}
.ft5{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#000000}
.ft6{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#00B0F0}
.ft7{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#262626}
.ft8{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#0D0D0D}

</style>

I'm unsure why it's not functioning as intended. Could you please assist me in troubleshooting this issue?

Sincerely, Dave

htmlcssfontswebfontswoff

Answer №1

Here's a different way to approach it:

@font-face { 
  font-family:"Avenir LT Std 35 Light"; 
  src: url("./Fonts/Avenir LT Std 35 Light.eot");
  src: url("./Fonts/Avenir LT Std 35 Light.eot?#iefix") format("embedded-opentype"),  
       url("./Fonts/Avenir LT Std 35 Light.woff") format("woff"); 
}

By the way, remember that all those comma sizes will be rounded to the next full pixel - there might be issues with IE being able to render them properly (? - not certain)

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

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

How can I create a navigation bar that disappears when scrolling, with a smooth animation? This is the progress I have made so far. HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="tex ...

javascriptjqueryhtmlcssnavigation

Guide on deploying Google App Script add-ons on Google Workspace Marketplace

Recently delving into Google App Script, I've taken my first steps in coding within the platform. Utilizing the deploy option provided by Google App Script, I successfully launched my app. However, upon deployment, I encountered difficulty locating my ...

javascriptcssgoogle-apps-scriptgoogle-sheetsgoogle-apps-marketplace

Displaying image issues persist on Safari browsers for Mac and iPhone

I am currently working on a website and facing an issue with the responsive image display on Safari for Mac/iPhone. Here is the code snippet I have been using: <head> <meta charset="utf-8"> <meta http-equiv="Content-Language" co ...

htmlioscssiphonesafari

Dash reveals the empty space between the border of the card and the header

I am currently facing an issue with the bootstrap cards in my Dash app. Specifically, my app is using the Flatly stylesheet and includes only one card as shown below. import dash import dash_bootstrap_components as dbc app = dash.Dash(__name__,external_st ...

pythoncssbootstrap-4plotly-dash

What are the features of the vertical line with annotation plugin and category axis in Chart.js?

I am currently facing an issue with the vertical line in my chart created using chart.js. Specifically, the problem lies with the category axis where the years are labeled as [year 0, year 1, year 2, year 3..]. Here is an example of a functioning chart ...

javascriptjqueryhtmlcsscharts

Enhance your PrimeVue experience with the power of Tailwind CSS

After installing PrimeVue, I encountered an issue where the component style was not working, but Tailwind CSS was functioning correctly. It seems that when I install Tailwind first, it works fine until I add Primevue's button component, which then cau ...

htmlcssvue.jstailwind-cssprimevue

Using AngularJS to apply conditional ngClass styling

Is there a method to create a conditional expression similar to ng-class? For instance, I attempted the following: <span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span> The problem with this co ...

htmlcssangularjs

Creating an error icon using only CSS, identical to the one shown in the picture

I'm attempting to create a similar X icon, resembling the one shown here: Here is the HTML code I am using: <div class='error-circle'> <div>X</div> </div> And this is the corresponding CSS: .error-circle{ ...

htmlcsscss-shapes

What is the best method for integrating custom CSS into Extjs 6?

Transitioning from Extjs 4.2 to Extjs 6.2 has presented a challenge for me. In the past, I would include a custom css file in the head using a simple link placed after the Extjs inclusion. <link rel="stylesheet" href="/custom.css" type="text/css" chars ...

cssextjsextjs6

Modifying the default text within a select box using jQuery

Within a select box identified as 'edit-field-service-line-tid', there is default text displayed as '-Any-'. This particular select field has been generated by Drupal. I am looking to use jQuery to change the text '-Any-' to ...

javascriptphpjqueryhtml

Save a FlexTable as an HTML file using R script

Is there a way to export a FlexTable created using the ReporteRs package as an .html file in RStudio without losing the formatting? Currently, I can manually save the table as a webpage by clicking on 'Export' and choosing 'Save as webpage& ...

htmlrexportflextablereporters

The default padding and margin in Bootstrap are making the images protrude beyond the edges of the container

I have an issue where my images are stretching into the padding or margin that bootstrap uses to separate columns. I want to maintain the column division but avoid having the images stretch. While I have managed to shrink the image using padding, the white ...

htmlcsstwitter-bootstrap

How can we use withStyles to customize the styling of a selected ListItem in ReactJS and Material UI?

I am seeking assistance in changing the style of a specific ListItem, similar to what is demonstrated in this Codesandbox. In the Codesandbox example, a global CSS stylesheet is utilized, but I prefer to implement the changes using the withStyle techniqu ...

cssreactjsmaterial-uijsshigher-order-components

The column is not properly aligned

I am facing a challenge in aligning 3 elements using bootstrap while working with Angular 8. To include only the necessary CSS from Bootstrap (such as col-md and col classes), I have added the following to my styles array: "styles": [ "src/ ...

cssangularsassbootstrap-4

Tips for ensuring consistent sizing of card items using flexbox CSS

I'm attempting to create a list with consistent item sizes, regardless of the content inside each card. I have experimented with the following CSS: .GridContainer { display: flex; flex-wrap: wrap; justify-content: space-around; align-item ...

htmlcssreactjs

The absence of image input was evident in the POST request

Within my Django template, I have an input field linked to a Django ImageField. Once rendered, the HTML code appears as follows: <form action="/accounts/username/" method="post" id="profile_form" enctype="multipart/form-data"> &l ...

htmldjangopostdjango-templates

Generate an additional CSS animation to display before the next page is loaded

When loading a page, I am implementing CSS transitions to display animated lines. To activate these lines, I am utilizing a jQuery script to change the class on the line elements. I am looking to reverse the CSS transitions when transitioning to the next ...

javascriptjqueryhtmlcss

Python Web Scraping Automation Tool - Inconsistent Encountering of 511 Error Code

My latest project involves opening Firefox with Selenium, extracting HAR files using BrowserMobProxy, and accessing JSON data from those files at timed intervals. Occasionally, however, I encounter a 511 Error: <!DOCTYPE html><html><head> ...

pythonhtmlseleniumwebnetworking

Choose a div element based on its title attribute using jQuery

My webpage includes a div that holds multiple other divs without unique IDs assigned to them: <div id="container"> <div title ="jhon" style=" position:absolute; left: 821px; top: 778.44px; width:8px; height:9px; z-index:3;"> </div> < ...

jqueryselecthtmltitle

Using PHP regular expressions to find the final occurrence trailing after the last match in HTML

Looking to analyze a webpage (where the same product price is compared on different stores - each store has a block with its logo, price...) I want to separate each store into a different array element using preg_match_all I am trying to skip the advert ...

phphtmlstring