Unable to get font-face to function properly on IE versions 7 and 8

I'm having trouble getting the font-face to work properly on both IE7 and IE8.

This is the code snippet I have used:

@font-face {
    font-family: 'DroidSans';
    src: url('fonts/DroidSans.eot');
    src: url('fonts/DroidSans.eot?iefix') format('eot'),
         url('fonts/DroidSans.woff') format('woff'),
         url('fonts/DroidSans.ttf') format('truetype'),
         url('fonts/DroidSans.svg#webfont1BSMunJa') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSans';
    src: url('fonts/DroidSans-Bold.eot');
    src: url('fonts/DroidSans-Bold.eot?iefix') format('eot'),
         url('fonts/DroidSans-Bold.woff') format('woff'),
         url('fonts/DroidSans-Bold.ttf') format('truetype'),
         url('fonts/DroidSans-Bold.svg#webfont1BSMunJa') format('svg');
    font-weight: bold;
}
@font-face {
    font-family: 'Lobster';
    src: url('fonts/Lobster.eot');
    src: url('fonts/Lobster.eot?iefix') format('eot'),
         url('fonts/Lobster.woff') format('woff'),
         url('fonts/Lobster.ttf') format('truetype'),
         url('fonts/Lobster.svg#webfont1BSMunJa') format('svg');
    font-weight: normal;
    font-style: normal;
}

I have gone through these articles as reference points:

All of them mention that this solution should be compatible across browsers:

Browser compatibility: Safari, IE 6-9, IE 9 Compatibility Modes, Firefox, Chrome, iOS, Android, Opera

What could be the issue here? Any experts with troubleshooting experience in this area?

You can test it out here: dev.holiday.ge/xhtml/

cssinternet-explorer-8cross-browserinternet-explorer-7

Answer №1

The .eot files that I created using the following website were causing issues: . Unfortunately, Internet Explorer versions 7 and 8 were not recognizing them. I decided to switch to and now the fonts are loading correctly with my original code!

Answer №2

I encountered a similar issue in the past and found a simple solution. I utilized 2 separate CSS files, one designed for Internet Explorer and the other for other browsers. Here is how my <head> section looks:

<link href="styles/css.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
  <link href="styles/css.ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Below are the contents of these CSS files:

/* css.css */
@font-face {
    font-family: 'font';
    src: local("☺"),
    url("fonts/f1.woff") format("woff"),
    url("fonts/f1.ttf") format("truetype");
}

Specific to Internet Explorer (eot):

/* css.ie.css */
@font-face {
    font-family: 'font';
    src: url('fonts/f1.eot');
}

This method has proven effective for me on multiple occasions.

Answer №3

Is there a specific reason why the Google Web Fonts are not being used? These fonts are readily available and using them can greatly simplify things, even if it may require a bit more bandwidth. Personally, I use them frequently without any issues in IE 7, 8, or 9.

UPDATE: Regarding the issue at hand, I vaguely recall something about Internet Explorer not supporting multiple src attributes or multiple values within an src attribute. It could be worth investigating further if you choose to continue using your own CSS.

Answer №4

Due to the lack of support for the @font-face rule in Internet Explorer 8 and earlier versions.

To learn more, visit http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

The @font-face feature is part of CSS3, check it out at http://www.w3.org/TR/css3-fonts/

If certain features are not fully supported according to the css3 spec, they may still function with some workarounds.

It's evident that those writing articles on this topic are well aware of these limitations.

Confused? Let me explain.

The 'hack' responsible for making this function is simply adding a '?' after the EOT filename. Surprisingly effective!

Consider whether the URL containing a question mark within the file name is part of any standard, especially since it is specifically intended for browser use: fonts/DroidSans-Bold.eot?iefix
Some reports suggest that this technique was initially a hack to bypass IE bugs. But what if these bugs have been resolved now? Will the workaround still be effective?

For further information, here is the Trident version link http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx, and a reference to what many consider the standard http://www.w3.org/TR/css3-fonts/#font-resources. See also http://en.wikipedia.org/wiki/Trident_(layout_engine)

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 are some ways to prompt electron to refresh its rendering with updated CSS?

I am currently in the process of developing my first Electron app on Windows 10, using Visual Studio Code and Git Bash as my primary tools. However, I have encountered a frustrating issue where my app has suddenly stopped updating based on css changes. Spe ...

cssnode.jselectronbrowser-cache

"Utilizing React's useState feature to dynamically update numerous dropdown components

Here is a React component snippet: const [show, setshow] = useState(false); const handleShow = () => { setshow(!show); }; Accompanied by the following CSS styles: .show { display: block; } .dropdown_content { padding: 3px; display: none; po ...

cssreactjs

Table pagination in Mat is experiencing overflow, and the button styles have also been customized for a unique look

I implemented a mat paginator feature, however, I am facing an issue where the alignment of items per page options is not correct. Below is the snippet from component.html file: <div class="table-responsive" *ngIf="resultssummaries"> &l ...

cssangularcss-selectorsangular-material

Retrieve the element that is currently being hovered over within the same nested selector

I am facing a challenge in selecting the currently hovered element with a nested selector. The ".frmElement" class is used as the selector. When I hover over the ".frmElement" element at a certain level, all the previous selector elements display the hover ...

javascriptjqueryhtmlcss

Whenever I select the checkbox, it causes my Bootstrap modal pop-up to close unexpectedly

I have created a form in a modal popup with 5 checkboxes where autopostback is set to true. Whenever I click on one of the checkboxes, the modal popup automatically closes. I have also used an update panel and included ScriptManager.RegisterStartupScrip ...

jqueryasp.netsql-servertwitter-bootstrapcss

Guide to Indicating an Icon in Front of an HTML Link and Emphasizing Both with Tap

When using an iOS UIWebview, I am facing the issue of needing to add an icon before standalone links that are within a locally loaded HTML file. In addition to adding the icon, I also need both the icon and link to be highlighted when tapped. The desired ...

htmlioscssobjective-cuiwebview

Set a variable to a specific cell within a table

I've been attempting to insert images into a table and have had success so far - clicking cycles through the available options. However, I've encountered an issue where the counter is not cell-specific but rather global. Is there a way to create ...

javascripthtmlcss

Tips for Incorporating HTML Code into an ASP Button's Text Attribute

How can I add a symbol to a button's text without it showing as blank? The symbol in question is an arrow, which you can find here. <asp:button id="btnAdd" runat="server" class="next"/> CSS: .next { content = &#10095; width:50px; } ...

htmlcss

Using a SASS watcher to keep an eye on every folder and compile them into a single CSS

I'm interested in setting up a folder structure like this: assets - scss - folder file.scss anotherfile.scss anotherfile.scss anotherfile.scss - anotherfolder file.scss anotherfile.scss anotherfile.scss ...

cssnpmsasswatch

When adjusting the top margin of the main content in CSS, the fixed top navigation section's margin also decreases simultaneously with the main content

I am in the process of creating a basic static blog page using HTML5, SASS, and CSS. While working on the design, I utilized the 'nav' semantic element for a fixed top bar on the page that remains visible even when scrolling down. Additionally, ...

csshtml

The animation of react-circular-progressbar is experiencing a slight delay of one second

I managed to create a circular progress bar with a timer and a button that adds +10 seconds to the timer. However, I'm facing a 1-second delay in the animation of the progress bar when clicking on the button. If anyone could assist me in resolving t ...

javascripthtmlcssreactjscountdowntimer

How come characteristics of one particular div element are transferring to unrelated div elements?

Recently, I created a small practice website and encountered an issue that is quite frustrating. Here's the div structure I used: <div class="work-process"> <div class="container" align="center"> <div class="col- ...

htmlcss

Refresh the CSS inheritance and hover effects

Facing an issue with my web project where I am using CSS. At times, I need to reset the inheritance from the parent class for certain elements. Although I have defined some classes to style my elements, I want to completely reset all styles except for hove ...

htmlcsshover

The input element extends beyond the boundaries of the container

When the text is too long, the input exceeds the boundaries of its parent container. I have been exploring ways to wrap the text within the element. I attempted using CSS properties like word-break and text-wrap, but unfortunately, none of them produced t ...

htmlcsslist

Disable body scrolling on mobile devices in native browsers

When using the native browser on Samsung Galaxy S5 / S6, the following CSS code: body { overflow: hidden; } does not successfully prevent the body from scrolling. Is there a way to work around this issue? Edit: As mentioned below, one workaround is t ...

javascriptandroidjqueryhtmlcss

Exploring Font-Awesome 5: Using CSS Pseudo-elements to Mirror or Rotate Icons

I am utilizing CSS pseudo elements to display icons (jsfiddle) body { font-family: Arial; font-size: 13px; } a { text-decoration: none; color: #515151; } a:before { font-family: "Font Awesome 5 Free"; content: "\f07a"; di ...

cssfont-awesomefont-awesome-5

Conceal table rows with JQuery in html

I need assistance in hiding a row in an HTML Table that contains a value of 0.00 in the third column. I've attempted using JQuery and CSS, but so far no success. Below is the code snippet: <%@ page language="java" contentType="text/html; charset= ...

jqueryhtmlcss

Trouble with placing an absolutely positioned element using Tailwindcss

I am currently working on a project using TailwindCSS in which I have a logo positioned to the left and navigation to the right. Both elements are centered, but because the logo has a position of absolute, it appears in front of the navigation. I would lik ...

csstailwind-css

Having trouble getting the product PHP script to upload properly

I have been struggling with a Php script that I created to upload products to my website for over 5 days. Unfortunately, it's not functioning properly and no errors are being displayed. Despite my best efforts, I am unable to identify the error in the ...

phpjqueryhtmlcss

Ways to eliminate the leading bullet point from an unordered list

I am currently working on creating a gallery of images using php and css. The images are placed in an unordered list as shown below: <ul style="list-style-type:none;"> <? while($data=mysql_fetch_row($result)) { $pic=$data[2]; if ($pic) { $ ...

phphtmlcss