What is the correct way to include '?i#efix' in a font directory path in a Rails application?

It is suggested to include ?#iefix at the end of .eot font paths in order to resolve another erratic behaviour issue in IE:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

Is there a way to achieve this using asset_path, without resorting to an unattractive + "?#iefix" workaround?

Answer №1

In my various projects, I have found a successful method that works seamlessly across all browsers. The key is to split the @font-face declarations into two separate blocks.

Within my fonts.scss file:

@font-face {
  font-family: 'Webfont';
  src: font_url('webfont.eot?') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Webfont';
  src: font_url('webfont.woff') format('woff'),
       font_url('webfont.ttf') format('truetype'),
       font_url('webfont.svg#Webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

A crucial point to remember is that if you wish to utilize the SASS helper font_url, your fonts must be stored under the assets/fonts directory.

Based on my own experience, adding just ? to the font path for versions equal or greater than IE8 instead of starting with ?# typically functions properly. However, it is advisable to keep the @font-face declaration separate for IE compatibility as mentioned earlier. When using the SASS helper, simply append it at the end of the asset name without interfering with the processing of the helper.

Answer №2

It seems that the function asset_path includes this consideration already. Therefore:

asset_path 'webfont.eot?#iefix'

functions as intended without any additional steps! Apologies for the confusion...

Answer №3

Kindly consider the following steps:

Note: Ensure that your font name is correctly specified throughout and double-check the availability of all font face files.

Include in Production.rb:

config.host_path = "http://---site url--"

Add the following in CSS:

@font-face {
    font-family: 'Webfont';
    src: url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.eot');
    src: url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.eot?#iefix') format('embedded-opentype'),
         url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.woff') format('woff'),
         url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.ttf') format('truetype'),
         url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.svg#Webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

If you prefer not to hard code the font file paths, simply use the following in css.

@font-face {
    font-family: 'Webfont';
    src: url('Webfont.eot');
    src: url('Webfont.eot?#iefix') format('embedded-opentype'),
         url('Webfont.woff') format('woff'),
         url('Webfont.ttf') format('truetype'),
         url('Webfont.svg#Webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

It's essential to specify the complete URL path for accessing font files. Hopefully, this information proves helpful.

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

Is there a way to get rid of the tiny black line beside the Instagram icon?

Here is the display on my website This is the code that was used I am struggling to identify the source of the small black "-" line next to the Instagram icon logo. ...

What is the best way to prevent a sticky element from scrolling along with the

I am looking to prevent a sticky div from taking up space on the website. It currently sticks to the desired position as expected. HTML <div v-if="isToastActive" class="toast"> <span class="message">{{ messa ...

Unused DIV elements in jQueryUI are identified using XSLT

Just a heads-up, I'm new to xslt so please bear with me if this seems like a silly question. In my xsl:template I have created a div element like this: <div id="objectLocked"> This object is locked by another user. Do you want to remove the lo ...

Using Bootstrap CSS and JavaScript specifically for carousel functionality

Custom Styles and Scripts for Bootstrap Carousel Using Carousel with Controls https://getbootstrap.com/docs/4.0/components/carousel/ <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner ...

Applying styled text to a Node.js chat application

I developed a chat application using node.js which allows users to enter a username and send messages. The messages are displayed in a <ul> format showing "username: message". I was looking for a way to make the username appear bold and in blue color ...

Adjust the transparency of CSS elements using a jQuery selector

I am developing a grid of brand thumbnails with interactive icons. When one of the icons is hovered, I want all the icons to change opacity and become visible. Here is the current HTML structure: <div id="brands-wrapper"> <img class="brands" ...

The functionality of Bootstrap styles is not compatible with Code Igniter

I tried placing the bootstrap folder in the root folder and loading the styles in the header section of view files like this. Unfortunately, it didn't work as expected. Can someone please assist me in solving this issue? <link href="<?php e ...

Does this extensive combination of pseudo classes hold true?

Here's the code snippet I am working with: .fontmenu .fontlist{ position: absolute; bottom:30px; display:none; } .fontbutton button:hover .fontmenu .fontlist{ display:block; } <div class="fontmenu"> ...

Discover the Color's Value in Relation to a Different Color

When it comes to my CSS, I like to use .scss to make as many variables as possible. It's easy to create a variable for one color, like $primary-color. From there, I want to work with different shades of that color, which I can easily pinpoint using Ph ...

Tips for saving input data from an HTML page to a text file

How can I save the inputs from a simple form as a text file using HTML code? Here is an example of the HTML code: <div id="wrapper"> <div class="main-content"> <div class="header"> </div> ...

Cover the entire section with an image

I'm aiming to achieve a similar layout like this (using tailwind) : https://i.stack.imgur.com/G0oti.png Here's the current setup: <section class="bg-juli-white pt-24"> <div class="max-w-6xl mx-auto flex flex-col" ...

buttons are arranged horizontally, stacked neatly on top of one another

I'm currently working on a setup for toggle buttons using absolute positioning for labels on top of checkboxes. My goal is to have them aligned horizontally, but instead, they are stacking on top of each other. <ul style="display: block; float: le ...

If the div is visible in the viewport, then automatically scroll to the top

Struggling to locate online resources for this particular technique. In my JSFiddle, users can navigate through fullscreen divs using 'next' or 'prev', as well as scrolling to access the next or previous divs. The issue arises when us ...

Does the icon vanish once you alter the button's color?

Warning: Adult content Check out this website: link When you visit this page, you'll notice that the Add to Cart button is orange. The button also has an icon of a shopping cart. This icon only appears if you remove the following code. To make th ...

Generating symbols that combine both images and text seamlessly

I am working with a circle image that I need to resize based on its placement. This image is intended to be a background for a character or two of text. Specifically, whenever the number 1 or 2 appears in a certain element, I want the circle to appear beh ...

Ensure that the width of the table rows (tr) matches the width of the table header

I'm currently working on implementing a sticky table header. The issue I'm facing is that the width of tableHeaderRow does not match the width of tableHeader. Steps taken for creating sticky header: Make an Ajax call to populate the table with ...

css background is repeating after the height of the div is reset

I'm working on a project where I want to resize an image while maintaining its aspect ratio to fit the height/width of the browser window. However, every time the code for resizing is implemented, the div height continues to increase with each resize ...

Using an onClick event along with jQuery to change the CSS class style of another div

After searching extensively without success, I decided to register and ask my first question here. Hopefully, someone can provide a solution: My goal is to create a set of five buttons (divs) with onClick events that will show five different divs. I' ...

Exploring Angular 4.0: How to Loop through Numerous Input Fields

I am looking to loop through several input fields that are defined in two different ways: <input placeholder="Name" name="name" value="x.y"> <input placeholder="Description" name="description" value"x.z"> <!-- And more fields --> or lik ...

Animate with ease upon mouse entry into the div

I have a question about hovering. $(".hover li img").mouseenter(function() { $(".overlay").animate({ left: pixels+"px" }); }); The overlay class is a transparent box around the image, with a red border. I want the border to move when hov ...