The custom font integrated into the website is not showing up properly in Internet Explorer or Google Chrome

I've set up the following font configuration in the CSS for a WordPress-based website I'm creating. The fonts appear correctly in Firefox, but do not show up at all in Internet Explorer (9) or the latest version of Chrome.

  /* =Typography
  -------------------------------------------------------------- */
  @font-face {
      font-family: 'Humanist';
      src: url('fonts/humanist521lightbt-webfont.eot');
      src: url('fonts/humanist521lightbt-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/humanist521lightbt-webfont.woff') format('woff'),
           url('fonts/Humanist521LightBT.ttf') format('truetype'),
           url('fonts/humanist521lightbt-webfont.svg#webfontregular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

  @font-face {
      font-family: 'HumanistIT';
      src: url('fonts/humanist521lightitalicbt-webfont.eot');
      src: url('fonts/humanist521lightitalicbt-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/humanist521lightitalicbt-webfont.woff') format('woff'),
           url('fonts/Humanist521LightItalicBT.ttf') format('truetype'),
           url('fonts/humanist521lightitalicbt-webfont.svg#webfontregular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

  @font-face {
     font-family: 'HumanistBo';
     src: url('fonts/humanist777blackbt-webfont.eot');
     src: url('fonts/humanist777blackbt-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/humanist777blackbt-webfont.woff') format('woff'),
     url('fonts/Humanist777BlackBT.ttf') format('truetype'),
     url('fonts/humanist777blackbt-webfont.svg#webfontregular') format('svg');
     font-weight: normal;
     font-style: normal;
  }

To apply the font to an element, I simply use

font-family: 'Humanist', Arial, sans-serif;

The font files are saved in the theme's "fonts" directory.

Is there something I am doing incorrectly or missing in order for it to display properly on other browsers?

Thank you

Answer №1

When it comes to Internet Explorer 9 and earlier versions, there are issues with displaying `.TTF` files. These browsers do not support embedded fonts using the CSS3 scheme unless they are first converted into supported formats like `.svg`,`.ttf`,`.eot`, and others. However, you can adjust your @Font-Face Syntax to work around this limitation.

If you encounter font display problems in Chrome, keep in mind that each browser has unique requirements. More details on this can be found in the additional information provided below.

On a side note, if your font is from Google Fonts, consider embedding a link on your website instead of hosting it yourself.

In need of a comprehensive list of @font-face types? Look no further!

For more information:

SO Question - IE problems with True Type Font files

SO Question - Font-Face problem in Chrome

Further Hardening of the Bulletproof Syntax - Fontspring.

Bulletproof @font-face syntax - Paul Irish

Answer №2

In order to utilize a specific font for an HTML element, the @font-face rule from CSS3 must be employed, which is supported by most modern browsers. The CSS property font-family within HTML is utilized to specify the desired font name, while the src property specifies the path of the font to be included.

@font-face
{
    font-family: mycustomfont;
    src: url('(customfontfile.eot') format('embedded-opentype'),
            url('(customfontfile.woff') format('woff'),
         url('(customfontfile.ttf') format('truetype'),
         url('(customfontfile.svg#customfont') format('svg');
}

div,h2
{
    font-family:mycustomfont;
}

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 Laravel error message "Attempting to access 'index()' on a null object"

After generating a model in Laravel, I attempted to migrate the table using 'php artisan migrate', but encountered an error message on the terminal: "Call to a member function index() on null" ...

Syncing Facebook Likes with Safari on iPad

Encountering an issue with the Facebook like button alignment specifically in Safari on iPad. It displays correctly in Safari on OSX. Check out this example. Any ideas on what CSS is needed to ensure it's left aligned in one row on the iPad? ...

Tips on changing the background image when hovering over a list item and a link with CSS

I have been attempting to adjust an image that is nested within a link which is nested inside a list. My initial idea was to use the image as a background picture. The issue arises when I try to position the background picture correctly with respect to th ...

Designing a Dynamic Navigation Dropdown Menu Bar using ASP.NET and C# with asp LinkButtons

Here is the primary code snippet <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Website1.Site1" %> <!DOCTYPE html> <html> <head runat="server"> ...

Creating a WordPress Infographic: How to Design a "Wide" Graphic

I have a question for those who are experienced with infographics. I'm in the process of getting an infographic designed for my blog and I've noticed that some websites have a feature that allows the infographic to expand to full width when you c ...

Adjust the width of a div element to a specific size, center the div horizontally, and justify

My issue may be small, but I am struggling to find a solution. I have a content header that is 864px wide with a background image repeated vertically and a footer image. I now have a <div> positioned over the background image and I want it to be 855p ...

Tips for eliminating excess white space in mobile view using css/bootstrap

I have successfully replicated the screenshot below using CSS/Bootstrap to ensure it looks consistent on both mobile and desktop view. https://i.sstatic.net/NS4yE.png For the upper portion of the screen-shot, I have created a fiddle which includes a sear ...

Ways to adjust the anchor and h1 elements using CSS

I'm working on an HTML document with some markup, <a class="home-link" href="index.html" rel="home"> <h1 class="site-title">John Arellano's Personal Website</h1> </a> While styling the site title, I encountered a problem ...

Modify the color of the designated Tab in the PRIMENG TabMenu - customize the style

Currently, I am utilizing the Primeng tab menu component and facing an issue. Unfortunately, I seem to be unable to identify a method to alter the color of the selected tab to a different shade. If anyone has any insights or suggestions on how to achieve ...

Two challenges I encountered with my CSS dropdown menu bar

I've been working on a CSS top dropdown navigation bar, but I'm encountering two issues that I can't seem to resolve. The first problem is that my nav div either extends too far down or my 1px right border tabs aren't reaching the botto ...

Perfectly Aligning Image at the Center of the Screen

I'm having trouble centering a loading image on my screen. It seems to be centered closer to the bottom rather than in the middle. Any suggestions on how I can adjust it to be more centered vertically? Edit: I also want it to look good on mobile devi ...

There seems to be an issue with the functionality of Angular Material on iOS devices

I recently developed a website using Angular and Angular Material. While the site functions properly on Windows and Android across all browsers, I encountered an issue with iOS devices running Safari. Some elements on the page do not display correctly on i ...

New to JavaScript and Bootstrap - eager to learn by using Bootstrap 4 Chart Template, just need help with a small issue in the code

I am eager to dive into Bootstrap 4 and data visualization charts. I want to replicate the visualizations found in the link below. However, after copying and pasting the code into Atom, it's not functioning as expected. I ensured that I copied the HT ...

Alter the color of Material UI Raised Button when it is hovered over

I am trying to change the background color of a raised button on hover in Material UI. I attempted the following, but it did not work. Is there a way to modify the background color in Material UI for a raised button? Example.JS <RaisedButton ...

What's the best way to enable touch scrolling for items within a div container?

I am in the process of creating a code snippet that will allow users to scroll through items within a div, similar to a spinning wheel or slot machine. While I am aware of an existing solution for iPhone and iPod, I want to develop a simpler, more streamli ...

The background image stubbornly refuses to stretch to the full width of the section container

Looking at my code example and the screenshot provided, it's clear that the image is not fitting into the container even when set to 100% width or utilizing other properties. Below you will see the code snippet: .about-us{ background-image: url(i ...

Can CSS be used to generate a grid or error image in Internet Explorer?

Can an image like this be created using CSS in Internet Explorer? I attempted to use filter: progid:DXImageTransform.Microsoft.gradient, but it was unsuccessful. ...

Adjust the height of taller images to match the size of other images within a flexbox grid

On my Wordpress category page, I have a flexbox grid showcasing posts with titles and excerpts. Most images have the same proportions, but a few are significantly taller. I'm looking to responsively set the max-height of the tall images to match the h ...

View box 2 from the opposite side of box 1

I am looking for a way to make box2 appear behind box1. One solution is to use position: relative; in the .box1 class. However, this causes another issue in my project. Is there a way to display .box2 behind .box1 without using position: relative; in .b ...

Tips for updating the content of a div with the click of another div

Is there a way to dynamically change the content of a div upon clicking on a menu item? Here is the current layout for reference: https://i.stack.imgur.com/nOnlQ.png Below is the CSS and HTML code snippet: body { background-color: #555657; ...