Production environment poses a challenge as Rails 4 struggles to locate fonts

Situation: I am facing an issue with my Rails 4.0.0 application deployed using capistrano, where the asset precompilation does not work properly on my production server.

Challenge: Despite successfully adding a font and using it with @font-face locally, the feature fails to function as expected in the production environment.

Error Notification: Upon inspection, the error message received is: "Failed to load resource: the server responded with a status of 404 (Not Found) "

The fonts are stored within app/assets/fonts/

Pertinent Files:

app/assets/stylesheets/application.css.scss:

/*
 * This is a manifest file yada yada yada...
 *
 *= require bootstrap
 *= require_self
 *= require_tree .
 */

@font-face {
  font-family: 'stone_sansregular';
  src: url(font-path('stone_sans_regular-webfont.eot') + "?#iefix") format('embedded-opentype'),
    url(font-path('stone_sans_regular-webfont.woff')) format('woff'),
    url(font-path('stone_sans_regular-webfont.ttf'))  format('truetype'),
    url(font-path('stone_sans_regular-webfont.svg') + "#stone_sansregular") format('svg');
}

config/application.rb:

config.assets.paths << Rails.root.join("app", "assets", "fonts")

Despite numerous attempts and research on Stack Overflow and other platforms, I have been unable to rectify the issue. It's important to note that I am not deploying on Heroku. Can anyone provide insight into what could be missing? Your assistance is greatly appreciated.

UPDATE: In the production environment, I have located the fonts in the directory: my-rails-app/current/public/@assets/fonts

Answer №1

After encountering a similar issue, I discovered that the root cause was my font-awesome.css file not being loaded in production. To resolve this, I had to:

*= require font-awesome.css

instead of

@import "font-awsome.css";

within my application.css.scss manifest.

In addition, concerning the MD5 hash appended to file names, although uncertain if it posed an issue or not, I decided to use:

font-url('fontawesome-webfont.eot');

as opposed to

url(font-path('fontawesome-webfont.eot')

If there were any concerns regarding this matter, utilizing font-url should manage it effectively.

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 autocomplete feature in Codemirror seems to be failing specifically when writing JavaScript code

I am having trouble implementing the autocomplete feature in my JavaScript code editor using Codemirror. Can someone please help me figure out what I'm doing wrong? Here is the snippet of code : var editor = CodeMirror.fromTextArea(myTextarea, { ...

The Kendo Dropdownlist mysteriously disappears behind the PDFViewer when using Safari

Currently, I am immersed in a project based on the MVC framework and utilizing the Kendo DropDownList. An problem has arisen, which is visualized in the image below. Specifically, the items of the Kendo DropDownList are becoming obscured by the PDFViewer ...

Is it possible to adjust the background image with properties like Scale to Fill, Aspect Fit, or Aspect Fill?

Is it possible to set the background image using the following properties in HTML? (These are properties used for iOS images, but I am unsure if there are similar ones in HTML): Scale to Fill, Aspect Fit, Aspect Fill https://i.stack.imgur.com/5X83I.jpg ...

In Angular 10, the custom CSS URL is loading after the standard styles.css file

Below is the configuration from my angular.json file: "options": { "outputPath": "dist/example", "index": "src/index.html", "main": "src/main.ts", ...

What could be the reason for the lack of responsiveness in my input box?

http://jsfiddle.net/4ws3L6kn/1/ Can anyone help me figure out why this isn't responsive? What mistake did I make? <div id="DIV_1"> <div id="DIV_2"> <div id="DIV_3"> <button id="BUTTON_4"> ...

Utilizing Ajax with form_for in Rails 3

In my controller, I have a method called work_here: def work_here @company = Company.find(params[:id]) current_user.work_apply(current_user, @company) redirect_to company_path end On the view page: <%= render 'companies/work_form' if sig ...

Include brand logo to the Bootstrap navigation bar

Following the method provided in Bootstrap documentation, I included the following code: <div class="container"> <a class="navbar-brand" href="#"> <img src="/img/hangers.jpg" alt= ...

Adjust the dimensions of the bootstrap dropdown to match the dimensions of its textbox

The second textbox features a bootstrap dropdown with extensive content that is overflowing and extending to other textboxes below it. I am looking for a way to resize the dropdown to fit the size of its corresponding textbox. UPDATE: I want the dropdown ...

The transparent sticky navigation bar isn't functioning as intended

I stumbled upon a code for the sticky navbar that I found on this website. Intrigued, I decided to copy the code and test it out on my Laravel blade file. The output turned out like this: Here is how I copied the code: CSS JS HTML Please provide me ...

Bootstrap tab toggle feature

I'm currently facing an issue with Bootstrap's tab component. I need help figuring out how to hide a lorem ipsum section and show a hidden div when a specific tab is clicked, and then revert the changes when a different tab is selected. $(func ...

How to add a new row to a Kendo grid with a unique custom styling

I am looking for a way to insert new data into a Kendo grid, but I want the added row to have a custom class so that I can style it with a different background color. How can I achieve this? I have searched through all the documentation but couldn't f ...

Showing the heading again after a new page starts

Currently, I am using WeasyPrint to generate a document and facing an issue with long sections that may span multiple pages. When a section breaks across pages, the name of the section does not display after the page break as intended. The following examp ...

Creating two interactive animations utilizing a combination of CSS and Javascript, triggered by the click event on

Looking to incorporate two unique CSS animations into my project. Utilizing two buttons and one object, I want the first animation to trigger upon clicking the first button. I understand how to handle one button and one animation, but am unsure how to man ...

Steps for creating an expandable menu in the Magento category list

Looking for a way to create a category menu that expands when clicked on? Check out this example of a left menu (not Magento) at Can this be achieved with CSS alone? Or is there a specific module that can help with this functionality? ...

What is the best way to extract a color box from a Bootstrap container?

After trying multiple solutions found online, I'm still struggling to break out of the bootstrap container as needed. The setup involves a .fluid-container for a full-width background behind a regular .container. The challenge arises when the first co ...

The concept of "HTML paragraph shifting"

I am looking to implement a feature similar to paragraph sliding, but I am struggling to explain it clearly. For demonstration purposes, I have added it to my website for you to view. Please note that it may take some time to load. The paragraphs slide s ...

Is there a way to modify the default color when the header is assigned the "sticky" class?

Currently, I am in the process of building my own website and have implemented an exciting hover effect that randomly selects a color from an array and applies it when hovering over certain elements. However, once the cursor moves away, the color reverts b ...

What could be the reason for the image not displaying properly in a React application?

Why isn't the image appearing as a background in the container with text on top? What am I doing wrong here? <div className="container-fluid"> <div className="col-md-12 col-sm-12 col-xs-12 bgContainer matchingTalent"> ...

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

I successfully created an slds path element with multiple steps. I want to display additional subtext information below each current step, but there might not always be subtext for every step. To achieve this, I created an absolute positioned div containi ...

HTML textarea fails to recognize inline styles

My journey with JHipster began recently when I embarked on my first project. Two entities were created, one of which resembles a blog. This particular blog entity has a content attribute that interacts with a textarea. In my blogs.html file, I allowed the ...