I am currently building a website that utilizes custom Google fonts. However, I have noticed that in IE8, the fonts are not displaying properly or only partially rendering (the left content is fine, but the right content—specifically AJAX—is not looking as expected). Does anyone have any suggestions or ideas on why this might be happening?
Thank you.
While browsing your website, I happened to notice that it displayed perfectly on IE8 in compatibility mode on my IE9. There were no font issues at all. I am using Windows 7. Would you mind sharing a screenshot of the problems you are experiencing?
UPDATE: It slipped my mind to mention an important detail... checking for compatibility. Font-face has only "partial" support in IE7 and IE8.
To resolve this problem, you will need to use a code snippet similar to the one below and convert fonts accordingly
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
Google utilizes woff exclusively, whereas you should include eot, truetype, and svg formats for complete cross-browser compatibility.
You can easily convert fonts using Font Squirrel. Download the font from
For further information on this topic:
When viewing in IE9 and IE7 compatibility mode on IE9, the display appears fine; however, switching to IE8 or IE7 compatibility mode on IE8 shows a very distorted view, indicating there may be an obscure bug specific to IE8 itself.
There might not be much that can be done about this issue other than using conditional comments to target IE8 and IE7 specifically, utilizing the font verdana for those sections. Let's hope these problems are resolved soon...
For Internet Explorer 10 and earlier versions, as well as for any other browsers, you should use the following:
@font-face {
font-family: 'CustomFontFamily';
src: url('customfont-webfont.eot?');
src: url('customfont-webfont.eot?#iefix') format('embedded-opentype'),
url('customfont-webfont.woff') format('woff'),
url('customfont-webfont.ttf') format('truetype'),
url('customfont-webfont.svg#svgFontName') format('svg');
}
.circle_border { width: 125px; height: 125px; position: relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .Text{ font-size: 18px; padding: 10 ...
Currently utilizing React and Material UI, I am attempting to use the nth-child selector with the MUI makeStyle function. However, it is not working as expected. Here are some screenshots for reference: https://i.sstatic.net/5dVhV.png https://i.sstatic.ne ...
Can someone provide an example of how to create a div rotating around a circle in CSS3 while the circle itself is already rotating? I attempted to use webkit frame, but it did not work correctly. If anyone has any examples or tips on achieving this effec ...
I have been working on developing a Javascript Widget (almost complete), and when integrating it into the first site I encountered some issues. My Widget requires loading multiple libraries (jquery, jquery ui, mustache, ...); this is achieved by injecting ...
Looking to showcase multiple images within cards with text overlay. These images are user-uploaded and can vary in color, so the white text must be solid without any transparency issues like in the sample fiddle provided. Check out this example fiddle - h ...
My website, www.sauleezy.altervista.org, is experiencing an issue that I have been unable to resolve. I have set up two different .css files for desktop (style.css) and mobile (handheld.css). In my index file, I included the following code: <meta name= ...
Recently, I started working with Laravel on a project that utilizes the argon dashboard as its base in Laravel 10.8.0. However, I encountered an issue where routes with multiple parameters are causing the HTML to break in the view. For instance: Route::get ...
I have a web service link at www.xyz.com/abcdefg. When I visit this link, it automatically downloads a CSV file. The CSV file contains columns of data organized like this: Column A Column B Column C Column D test1 1 5 ...
Exploring the world of Angular is exciting, and I am a newcomer to it. Currently, I am tackling an innovative Angular 15 project that makes use of the Material library. My current predicament lies in the fact that none of the CSS overrides appear to be tak ...
We currently have an intranet with numerous html pages and various attachments such as .doc and .xls files. We are contemplating migrating all of this to Confluence WIKI. Is there any script or automated tool available that can assist us in this migratio ...
As I create a static website without server-side functionality, my options are limited to HTML, CSS, and a few scripts. Incorporated into each page is a popup script that I designed using JavaScript: b = false; if (!b) { window.accept(); } function ...
JSFiddle: Click Here In my design, I have a table within a card element. However, when the window size is reduced to mimic a mobile device, the left padding remains intact while the right padding disappears. How can I ensure that the right side padding is ...
I need to display N child divs with varying widths inside a parent div of unknown width. I want the child divs to fill and align side by side in the parent div, similar to a td - tr relationship. Can you help me achieve this layout? ...
I am facing an issue with an absolutely positioned div that I want to stretch the full width of the screen using 100vw. However, the problem is that it aligns with its parent's starting point rather than the left side of the viewport. How can I make s ...
I'm looking to create reusable sections for my bookdown project. Successes: I've created a style.css including: .titeldefbox{ display: flex; width: 100%; left: 0; top: 0; position: absolute; background-color: darkslategray; height: ...
Help! I'm encountering a perplexing z-index issue on my website. Check out the problem here: Upon closer inspection of each step's header, you'll see that only step 3 features a ribbon while steps 1 and 2 do not (if this isn't visible, ...
My cookie contains the following data: emailID=a1%40a.comSEPmaths=0SEPphysics=0SEPchemistry=0SEPbotany=0SEPzoology=0SEPta mil=0SEPenglish=0SEPpolity=0SEPgk=0SEPhistory=0 However, when I use document.cookie.split('; '), it returns the encoded ve ...
Padding needs to be added to the cells of a table, but this is causing overflow issues with text and inputs inside the table. Despite attempting to set box-sizing: border-box, the problem persists. An example below demonstrates the issue: * { box-siz ...
Hey there, I'm a newbie trying my hand at DOM creation. I've encountered a strange issue with appendChild - the first and second tries work fine, but I'm completely stuck on the third attempt. Here's my HTML: <html> <head> ...
I'm having trouble with my PHP form submission. Every time I try to submit, I receive a custom error message that says "Oops there was a problem. Please try again." Any assistance would be greatly appreciated. As a newcomer to PHP, I suspect that som ...