Unable to load Webfont Trade Gothics in Internet Explorer 8

The following code is used to ensure proper functionality of webfonts across all browsers:

@font-face {
    font-family: 'TradeGothic-BoldCondensedNo20';
    src: url('../fonts/tradegothic/trade-gothic-lt-std-bold-condensed-no-20.eot?')  format("embedded-opentype"),
         url('../fonts/tradegothic/trade-gothic-lt-std-bold-condensed-no-20.woff')  format('woff'),
         url('../fonts/tradegothic/trade-gothic-lt-std-bold-condensed-no-20.ttf')  format('truetype');
}

Despite this effort, there are issues with compatibility in IE8 and earlier versions.

cssinternet-explorer-8cross-browserfont-face

Answer №1

When it comes to IE8 and the format() specifier, things get a bit tricky. Here's the workaround I usually implement:

src: url('../fonts/tradegothic/trade-gothic-lt-std-bold-condensed-no-20.eot');
src: local('☺'),
     url('../fonts/tradegothic/trade-gothic-lt-std-bold-condensed-no-20.eot?')  format("embedded-opentype"),
     url('../fonts/tradegothic/trade-gothic-lt-std-bold-condensed-no-20.woff')  format('woff'),
     url('../fonts/tradegothic/trade-gothic-lt-std-bold-condensed-no-20.ttf')  format('truetype');

By omitting the second src rule, IE8 and older versions will hopefully render the webfont correctly.

It's also worth considering removing the EOT line from the second src rule to improve compatibility.

Answer №2

If you're experiencing issues with file types in your htaccess file, try including the following code snippet. I encountered a similar problem recently and this solution worked for me:

AddType image/svg+xml .svg
AddType application/json .json
AddType video/mp4 .mp4
AddType text/csv .csv

For more information on Addtype, you can refer to the documentation here

Answer №3

Trade Gothic is a premium font that requires a licensed purchase. You can obtain a web font license for it through reputable websites like MyFonts.com, Linotype.com, and Fonts.com.

If you are currently using an unauthorized version of Trade Gothic, it's important to rectify this by purchasing a legitimate web font license. This will provide you with the proper CSS font stack and ensure that you are using the font legally.

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

The CSS slider is stuck on the fifth slide and won't move past it

I encountered an issue with the CSS slider I am using, as it only had five radio buttons / slides in its demo. After attempting to add more slides, I noticed that the slider was not scrolling to the new slides. I'm unsure where I made a mistake in m ...

htmlcssslideshow

"Alert box displaying error message is not appearing on the screen

In order to display an error message using a tooltip, I have hidden the tooltip by setting the style of a span with an id of demo to display:none. Then I use JavaScript's getElementById method to retrieve the value of the input field with an id of use ...

javascripthtmlcsstooltip

Issue with PrimeFaces radiobutton styles not updating after being clicked programmatically

My setup includes a p:selectOneRadio constructed like this: <p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom" required="true" requiredMessage="Please select ...

javascriptcssjsfprimefaces

Incorporation of a dynamic jQuery animation

I'm a beginner in jquery and I'm attempting to achieve the following: I want each menu to collapse separately when the mouse hovers over it. The issue is that both menus collapse simultaneously! I know it's probably something simple, but I ...

javascriptjqueryhtmlcss

The header menu is not appearing on the gray bar in Internet Explorer

Having some issues with IE8, specifically on the website . The website header is not displaying correctly in IE8, but it works fine in Chrome and Firefox. Another issue is that the white area of the site is not 960px width as intended... ...

htmlcss

When ALIGN-ITEMS: CENTER is removed, the <a> element expands to fill the entire line

Currently, I am delving into the world of CSS and grappling with a particular behavior that has caught my attention. section{ display: flex; flex-direction: column; align-items: center; } .banner-area a.banner-btn{ padding: 15px 35px; backgrou ...

htmlcssflexbox

Efficient utilization of the bootstrap form-group for optimal responsiveness

I've encountered an issue with the form-group class in Bootstrap. You can view the problem on this link. After analyzing the problem, I found that when viewing the code on a small or medium-sized device, the space between "Statut" and "Etat" appears ...

htmlcsstwitter-bootstrap

Switch navigation - always display the menu on the existing page

I have a toggle menu implemented. Please check out the code and functionality on JsFiddle When clicking on a h3 tag like Category 1 (which is an a tag), the menu opens and remains open on the current page. However, if you click on the h3 tag (Category1) ...

javascriptjqueryhtmlcss

The container that utilizes the grid layout is compact and has a near-invisible height

grid-template: display; font-style: "Josefin Sans", sans-serif; size-of-text: 10px; element-height: 0px; spacing-bottom: 0px; spacing-left: 0px; spacing-right: 0px; spacing-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-up: 0 ...

css

Concern with Isotope's masonry feature

I'm at my wit's end! The container div I'm dealing with is 1170px wide. My goal is to fit in 3 divs within this width. The first div is 275px wide, the second is 580px wide, and the third is also 275px wide. Altogether, these divs should ad ...

javascriptjqueryhtmlcssjquery-isotope

How can I eliminate the tiny white square located beneath the scrollbar track?

`::-webkit-scrollbar{ width: 12px; } body::-webkit-scrollbar-track{ background: #f1e9e9; border-radius: 10px; margin-block: 0.1875rem; } ::-webkit-scrollbar-thumb{ background-color: #582965; border-radius: 10px; border: 3px so ...

htmlcssscrollbar

What could be causing the partial transparency in my SVG mask?

I have been working on an interesting SVG code that creates a rectangle with a cutout circle. However, I am facing an issue where the non-cutout part appears to be partially transparent. https://i.sstatic.net/1PLHL.gif Can anyone provide me with guidance ...

htmlcsssvg

Performing PHP MySQL table database insertion utilizing the $_GET approach using Codeigniter-3 and Dropzone-4.1 plugin

Currently working with CodeIgniter 3 and running into an issue with "id_case" showing as undefined index. When I click a link in index.php: <?php echo "<td><a href='/ci_dropzone/?id_case=".$row['id_case']."'>Upload File ...

phpmysqlcsscodeigniter-3

What is the best way to incorporate a style attribute into my EJS page content?

Having trouble with adding custom style. It seems to work, but there's an error displayed. Apologies for my poor english :( <div class="card card_applicant"> <div class="card_title" style="background-c ...

cssnode.jsexpressejs

Tips for creating shaped images using clip-path

Can an image be clipped to match a specific shape using the clip-path CSS property? Original Image https://i.stack.imgur.com/rYeuk.jpg Desired Result with CSS https://i.stack.imgur.com/6FYfn.png ...

htmlcssclip-path

Tips for eliminating the horizontal scroll bar on a responsive background image

I'm having an issue with a full-width div containing a background image on my responsive website. Everything looks fine on desktop, but when I switch to responsive mode using Chrome Dev Tools, a horizontal scroll bar appears that I can't remove w ...

htmlcssbootstrap-4

CSS3PIE is failing to function properly in Internet Explorer

Looking for a solution to achieve rounded corners in Internet Explorer? Consider using . In my CSS file named template.css, I have included the following code which is loaded when the page loads on Joomla 1.5. .form_field {color:#222 !important; border:2p ...

htmlcssjoomlacss3pie

What is the best method for ensuring three inside divs have equal heights?

I am working with a container div#content that holds three inner divs. I want to ensure that all three divs have the same height, but also expand based on their content. Here is an example of what I have tried: <!doctype html public "-//w3c//dtd html 4 ...

csshtmlheight

Error retrieving resource: server returned a 404 status code indicating file not found for javaScript and CSS files

I can't seem to get my css and js files to load on the server. Here is how my file structure looks like: GAME_Folder https://i.sstatic.net/wzfB3.png HTML doctype html head link(href='https://fonts.googleapis.com/css2?family=Press+Start+2P& ...

javascripthtmljquerycssnode.js

How can you add draggable functionality to a Bootstrap dropdown menu?

My custom bootstrap dropdown design <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span cla ...

javascriptjquerycsstwitter-bootstrapjquery-ui