Webfont issues can lead to incorrect display on your website

Hello fellow Stackers! I could really use some help with a few IE-specific bugs I've encountered while working on a website for a friend.

Check out the Website Here | View the Full CSS File

The issue I'm facing is with the Google Webfont Raleway, specifically the font weights 300, 400, 700, and 900. It seems like IE is only recognizing the 300 font weight and not the others.

I would really appreciate any tips or feedback you have on this matter!

Below are the font styles I'm using for the main navigation:

.nav_li { 
    float:left;
    margin: 0;
    list-style-type:none; 
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    line-height: 100px;
    color: #fff;
    cursor: pointer;
    -webkit-transition: background .5s; -moz-transition: background .5s; -ms-transition: background .5s; transition: background .5s;
}

Attached are some screenshots:

htmlcssinternet-explorercross-browserwebfonts

Answer №1

Encountering issues like this is a common occurrence in IE: certain Google fonts may not work as intended when implemented following Google's recommendations (which involve referencing code on the Google server) due to access restrictions. To avoid this problem, the fonts should be downloaded (via the “Download your Collection” link), processed using FontSquirrel, uploaded to the same server hosting your HTML documents, and then utilized in your CSS using the @font-face code provided by FontSquirrel.

Answer №2

I believe the issue at hand is related to Internet Explorer.

While you can use up to 4 font weights per font (which is fine), Internet Explorer has some additional bugs regarding font-weight as mentioned in the article.

I hope this information proves useful :-).

Answer №3

As per the recommendations outlined in Google's document on Technical Considerations

It's worth noting that Internet Explorer's behavior can be inconsistent based on the arrangement and presence of different elements. To ensure uniform behavior across all browsers, the suggestion is to utilize the WebFont Loader. This allows you to create a consistent experience, similar to how Firefox behaves.

https://developers.google.com/webfonts/docs/webfont_loader

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

Alpha 4.0.3 Bootstrap Carousel with Shadow

Hello there, I've been tinkering with the bootstrap website and I'm looking to add an inset shadow effect to the carousel. Here's a snippet of the HTML: <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"& ...

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

How can I pass an array from HTML to Node.js and subsequently store it in MongoDB?

Looking to combine the values of longitude and latitude into one array for input, then store it in the database. While there are plenty of examples on handling arrays, most of them are based on PHP. Check out the following code snippet: HTML <html> ...

javascriptjqueryhtmlnode.jsmongodb

Modify the label contents to reflect the selected file, rather than using the default text

Currently, I am working on customizing my file upload input to enhance its appearance. Everything is going smoothly so far, but I am facing difficulty in finding a suitable jQuery script that can meet my specific requirements. My objective is to have the ...

javascripthtmljquery

Revolutionize iPad user experience with seamless HTML5 video integration

What is the most effective method for dynamically embedding HTML5 video to ensure compatibility with the iPad? (using pure Javascript) I'm having difficulty getting this approach to work: <div id="placeholder"><script type="text/javascript" ...

javascripthtmlipadvideoembed

Change the border color of radio buttons when clicked

When one of the radio buttons is clicked, it should give an outer border with color. When the other radio button is clicked, it should give an inner border that surrounds the image. <!DOCTYPE html> <html> <head> ...

jqueryhtmlcss

Updating the Origin of a Sound Element in HTML5

I am currently working on developing a personalized browser-based music application. I am at the initial stage of this project where my main goal is to create a button that allows users to change the song being played by an HTML5 audio player. I have attem ...

htmlhtml5-audio

AgGrid's magical dropdown feature

Struggling to integrate a bootstrap-4 dropdown menu with AgGrid, I'm facing an issue where the data table overlaps the dropdown when the html is present. Attempts to increase the z-index have not yielded results. Below is the html code snippet: < ...

javascripthtmlcssangular

Why isn't my textarea in jQUERY updating as I type?

On my website, I have a comment script that is not functioning correctly in some parts of the jQuery/JavaScript code. Instead of posting an edited comment to PHP, I created a notification window to test if the value passed through is actually changing. W ...

javascriptphpjqueryhtml

Insert at the beginning of the element only if the class is 'active'

I'm really struggling with this issue. I am attempting to dynamically add a span element to the link inside a list item when it changes to the 'active' class. Here is my HTML: <ul> <li class="active"> <a href="#when"&g ...

jqueryhtmlclassprepend

Employing jQuery, how can one assign attributes to appended HTML and store them

So, I am currently working on a backend page for managing a blog. This page allows users to create, edit, and delete articles. When the user clicks the "edit" button for a specific article named 'foo', the following actions are performed: The ...

javascriptjqueryhtml

Notification fails to display following POST request

Whenever the select menu displays "Please select your country" and I click the checkout button, an alert pops up. But if I select Canada, then go back to selecting "Please select your country" and press checkout, no alert appears. I need the alert to alway ...

javascriptphpjqueryhtml

What is the best way to access elements of a certain class that begin with a specific string?

Here's the scenario: I have a group of elements that each have multiple classes assigned to them. Take a look at this example: <input class="etape btn-info others"> <input class="etape btn-inverse others"> <input class="etape btn-dange ...

jqueryhtmlcsstwitter-bootstrap

Having trouble with submitting the code - need help resolving the issue

I'm facing an issue with my submit cancel code. The JavaScript code I implemented for preventing the submission function on my page isn't working as expected. While it does work to a certain extent, it's not fully functional. I am seeking a ...

javascriptc#jqueryhtmlasp.net

Adding a Material Icon to an input type of 'submit' can be done by including the necessary HTML code and

Can Material Icon classes be used with button inputs? For example, using the <button> tag allows us to do this: <button class="btn btn-secondary btn-block btn-flat" id="submit"><i class="zmdi zmdi-long-arrow-right"></i> Login< ...

htmlmaterial-ui

Changing the .load function based on user input

Can I replace a .load text with one that can be updated by a user using form input or similar method? My goal is to create a code that retrieves data using unique div IDs (specific to each employee) containing information within tables across various HTML ...

javascriptjqueryhtmlforms

Utilizing CSS for a responsive background image

While constructing a website, I encountered an issue where the client is using a mobile device and I want to prevent them from loading a particular background image. For larger screens, my plan is to incorporate approximately 5 images with different resolu ...

htmlcss

Automated Heading Organization with jQuery: Easy Numbering from H1 to H6

After going through various related posts without finding a solution for IE, I am reaching out for help with a jQuery-based approach to address this issue: My content includes nested hierarchical Headings in the following structure: <h1> heading 1& ...

jqueryhtmlautomationhtml-heading

What steps should I follow to create a basic file upload page on my server?

Recently, I've been on a quest to create a straightforward file upload page that allows me to easily send files to my server. The concept is for the site to have a feature where I can simply upload a file and have it stored in a specific folder on the ...

html

What is the best way to trigger a JavaScript function to execute as soon as the innerHtml has been modified via Ajax

Utilizing Ajax to dynamically update the content of a div upon clicking a link is my current project. I am seeking guidance on how to call a JavaScript function once the file has been retrieved from the server and the div's content has been replaced. ...

javascripthtmlajax

Divs aligned horizontally with automatic height

I am facing a dilemma with two child divs placed side by side within a parent div. The height of each div is generated based on the viewport-size, making it unknown. The issue arises in the left div where an image needs to be resized to match the height o ...

htmlcss