Is it possible to incorporate @font-face with Ruby on Rails?

I've been struggling to implement my custom font in a Rails project.

The font files are located in app/assets/fonts/.

I made changes to the CSS:

# in app/assets/stylesheets/application.css

@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello.eot');
  src: url('fonts/fontello.eot#iefix')format('embedded-opentype'),
       url('fonts/fontello.woff') format('woff'),
       url('fonts/fontello.ttf') format('truetype');
}

I attempted to modify the path to 

url('assets/fonts/fontello.eot');
and url('fontello.eot'); as well.

I also adjusted the configuration:

# in config/application.rb

require File.expand_path('../boot', __FILE__)
require 'rails/all'

Bundler.require(:default, Rails.env)

module Gui
  class Application < Rails::Application
    config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
  end
end

Despite these efforts, I still cannot get it to work properly.

This is all being done on a Rails 4.0.2 platform.

cssruby-on-railsrubyfonts

Answer №1

To include an asset in a CSS file, you should make use of the asset_path method. Simply add the .erb extension to your application.css file and then asset_path will be accessible within your CSS rules.

@font-face {
  font-family: 'fontello';
  src: url('<%= asset_path("fontello.eot") %>');
  src: url('<%= asset_path("fontello.eot#iefix") %>') format('embedded-opentype'),
       url('<%= asset_path("fontello.woff") %>') format('woff'),
       url('<%= asset_path("fontello.ttf") %>') format('truetype');
}

Answer №2

If you're looking for guidance on integrating font files into the Rails asset pipeline, I recommend checking out this answer from a similar post:

One way to start is by placing your fonts in app/assets/fonts directory. Then, you can include the fonts in a Sass/SCSS file using the font-url('font.eot') helper.

Alternatively, if you prefer using asset_path, it should still be able to locate the fonts there.

Integrating @font-face files into Rails asset pipeline

Credit goes to:

and

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

Tips for positioning an element in the center of a page using Bootstrap both horizontally and vertically

[Pardon my English] I recently managed to center my "logo" both horizontally and vertically. However, I am looking to have my logo shrink a bit when resizing the browser. Any suggestions on how to achieve this using bootstrap? Index.html <section> ...

htmlcsstwitter-bootstrap

What is the best way to implement a sliding animation for a toggle button?

Currently, I am working on a toggle bar element that is functioning correctly in terms of styling the toggled button. However, I would like to add more animation to enhance the user experience. The concept is to have the active button slide to the newly s ...

cssvue.jssasscss-animations

Problems with CSS animations on mobile devices in WordPress

On my website powered by Elementor Pro, I have implemented custom CSS to animate the Shape Divider with a "Brush Wave" style. Below is the code snippet: .elementor-shape-bottom .elementor-shape-top .elementor-shape body { overflow-x:hidden; } @keyframes ...

htmlcsswordpresscss-animationselementor

Dynamic Divider for Side-by-Side Menu - with a unique spin

I recently came across a question about creating responsive separators for horizontal lists on Stack Overflow While attempting to implement this, I encountered some challenges. document.onkeydown = function(event) { var actionBox = document.getElementB ...

javascripthtmlcss

Having trouble getting your Raspberry Pi web server to display the background image?

Recently, I successfully set up a LAMP server on my raspberrypi which was quite exciting. One of the first things I did was configure an FTP server to transfer webpage files to the Pi. I managed to create a basic form of the final webpage and transferred i ...

htmlcsswebwebserver

Toggle between bold and original font styles with Javascript buttons

I am looking to create a button that toggles the text in a text area between bold and its previous state. This button should be able to switch back and forth with one click. function toggleTextBold() { var isBold = false; if (isBold) { // Code t ...

javascripthtmlcss

Images are obstructing the drop-down menu from being fully visible

I'm having trouble understanding why the drop-down menu when hovering over the "about" section is showing up behind the images on this website: (I hope it's okay to share the link). After looking at search results, I see that z-index might be t ...

phphtmlcss

`Issues encountered with resizing the menu``

Looking to create a unique restaurant horizontal list bar for my application. The goal is to have a horizontal menu that displays 3 options on the screen at a time, with the middle one being the largest and the two flanking it smaller in size. As I scroll ...

javascripthtmlcss

Generate a proportionally resized preview of the picture and display the outcomes neatly in a structured layout with 3 columns, limitless rows, and a single tile in every column for every

This script is functioning well so far, but it's not exactly what I need. It currently displays all images in a single long column with warped proportions. I want to change this so that there are three or four <div class=\"imageTile\"> ...

phpjqueryhtmlcssimage

Having a fixed footer in JQuery mobile does not adjust its position downwards as intended

I attempted to move the footer down using the provided code below, but it doesn't seem to be working. I even went ahead and removed all standard text from the CSS file to eliminate any potential issues. It should normally shift downward with <div ...

jqueryhtmlcssmobile

Achieve a floating right alignment of an unordered list navigation using CSS without changing

I am currently implementing a jquery navigation system which can be found at this link: http://css-tricks.com/5582-jquery-magicline-navigation/ My goal is to have the navigation bar float to the right without changing the order of items (e.g. home, contac ...

jquerycssnavigationcss-float

Is there a way to create a dropdown menu that appears to emerge from behind a button?

I am struggling with the stack order of my dropdown menu. Despite using z-index, it appears in front of the button instead of behind it. I want it to look like it is coming out from behind the button. Here is my code: .subnav-wrapper { position: relat ...

htmlcss

Troubleshooting a problem with conditional statements using AJAX and jQuery in Rails

By leveraging the power of jquery and ajax, I am able to dynamically display new tweets without having to refresh the page. However, a challenge arises when it comes to including a delete button based on whether the current user is viewing their own profil ...

ruby-on-railsajaxruby-on-rails-3jquery

What is the best way to dynamically adjust the size of a Google map on my website automatically

I need assistance with placing a Google map on a webpage along with textboxes in the div below it: <div id="map_area"> <div id="map_canvas"></div> </div> <div id="date_range"> <input type="text" id= ...

csshtmlheight

What is the best way to convert a DateTime in MySQL to a Julian day number?

I am currently utilizing the MySQL gem for Ruby, but I am facing an issue with date comparison. The Mysql::Time class offers limited support with only accessor methods like year, month, second, etc. It would be more beneficial for me to convert this into ...

mysqlruby

Is it possible to modify the size of a bullet image in Javascript?

Can an image bullet style loaded via a URL be resized using JavaScript code like this: var listItem = document.createElement('li'); listItem.style.listStyleImage = "url(some url)"; listItem.style.listStylePosition = "inside"; I aim to increase ...

javascriptcss

What is the best way to trigger a method once an image has completed loading and rendering?

Is there a way to trigger a method once an image has finished loading and displaying on the web browser? Here's a quick example using a large image: http://jsfiddle.net/2cLm4epv/ <img width="500px" src="http://www.digivill.net/~binary/wall-cover ...

javascriptjqueryhtmlcss

Animation for maximum height with transition from a set value to no maximum height

While experimenting with CSS-transitions, I encountered an unusual issue when adding a transition for max-height from a specific value (e.g. 14px) to none. Surprisingly, there is no animation at all; the hidden elements simply appear and disappear instant ...

javascriptjqueryhtmlcss

Tips on incorporating a high-quality animated gif for optimal user engagement

I'm looking for advice on how to optimize the loading of a large animated gif (1900px wide) on my website. Currently, the initial load time is quite lengthy and the animation appears choppy. Is there a more efficient method to load the gif without slo ...

javascripthtmlcssloadinganimated-gif

Utilize duplicate named CSS grid rows as a reference

Summary; This method currently works, but it requires adding multiple nth-child selectors for each new person and their answer. I am seeking a solution that can dynamically handle any number of rows using an even and odd selector to simplify the process. ...

htmlcsscss-grid