Adding personalized font on a Rails application (version 7)

While developing my application, I noticed that the custom fonts (Raleway) are visible, but they are not showing up in the staging environment after deploying to Heroku.

To address this issue, I included the following command in the application.rb file:

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

I also added the font-family declarations in the application.bootstrap.scss file as follows:

@font-face {
  font-family: 'raleway-regular';
  font-style: normal;
  font-weight: 400;
  src: font-url('raleway-regular.ttf') format('truetype');
}

@font-face {
  font-family: 'raleway-semibold';
  src: font-url('raleway-semibold.ttf') format('truetype');
}

@font-face {
  font-family: 'raleway-medium';
  src: font-url('raleway-Medium.ttf') format('truetype');
}

The font files can be found in the my_app/app/assets/fonts directory of my project.

For creating my Rails app, I used the command

rails new my_app --javascript esbuild --css bootstrap  --database postgresql
.

This project was built using Rails version 7.

Answer №1

Instead of using font-url, try using url. This method has worked for me when working with scss and maintaining the same folder structure.

@font-face {
  font-family: 'font-name';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font-name.ttf") format('truetype');
}

When utilizing Rails, it automatically generates its own font path.

/assets/font-name-afb238caf5f2396b697d84a32556090b0851e382692f617c6aeaac79e02971a0.ttf

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

Display an image overlaying a div

I am attempting to position an image outside of its parent div in such a way that it appears to be sitting on top of the div without affecting the height of the parent. However, no matter what I attempt, the image consistently gets clipped by the parent di ...

Variation in typefaces within indistinguishable settings

I am facing an issue with two different installations of Laravel that include Bootstrap. Both installations seem to have Montserrat on the body tag. In one installation, Montserrat is included with Bootstrap directly and does not need a declaration in th ...

What is the best approach for determining which CSS file to import in next.js?

I'm currently facing the task of selecting which CSS file to apply in my next.js project. I have two separate CSS files, one for desktop and one for mobile devices. My current method of importing CSS files is as follows: // _app.tsx import ".. ...

Transparent PNG slider images with fixed background

I am encountering a strange issue with one of our projects Here on We have an images-menu created using the Kwicks script. The problem arises when we use .png format images that are partially transparent. When these images slide over each other, the bott ...

Is there a way to establish the maximum width for a responsive design using Twitter Bootstrap?

After upgrading from twitter-bootstrap 2.0.4 to 2.2.1, I encountered a issue where my website now extends to the new responsive layout of 1170px, while I had designed it around a maximum width of 940 pixels. Is there a way to adjust the responsive layout t ...

Can we expect every bullet point to be consistently indented at precisely 1.8em?

Recently, I created a dropdown menu using only CSS. The challenge was to have a horizontal bar of items that can each expand into a vertical menu. However, I wanted the expanded menus to display bulleted lists instead of tertiary menus. By nesting three ul ...

Tips for Isolating a Single Element Within a Parent Container

I'm currently working on a basic to-do list feature where, upon checking the checkbox next to an item, both the text and delete button get a strikethrough style. Is there a way for me to apply the strikethrough effect only to the text element, leaving ...

The MuiPrivateTabScrollButton alters the dimensions and flexibility properties using CSS

I have been facing a challenge with overwriting the css of MuiPrivateTabScrollButton. Since this class is generated from material ui, I am unable to successfully overwrite it. Despite debugging and trying various fixes such as adding border colors, I still ...

Challenges with Internet Explorer 8 regarding a customized appearance for drop-down

I am facing an issue with my custom styled drop downs that are being controlled by jQuery. The problem is that in IE8, the drop down always defaults to open and does not close when an item is selected. URL removed <section class="main"> ...

Challenges with Customizing WooCommerce Design

Looking for some assistance with this issue that's been driving me crazy. I have successfully set up WooCommerce on a test site using the default TwentyThirteen theme and everything is working perfectly. However, when I try to implement it on a custo ...

Entering data into a webpage and retrieving the result from a designated cell in a Google Sheets document

Currently, I am in the process of developing a school platform and I am looking to incorporate a functionality that allows students to easily check the number of "passport" points they have earned. I envision having an input field along with a button that ...

Tips for changing the anchor tag color without the cursor hovering over it

Hello, I am learning CSS and I've been practicing some coding. #IconHover:hover { background-color: #F18B13; color: #fff; height: 50px; width: 180px; } a:hover { color: #fff; text-decoration: none; } <table id="IconHo ...

Tips for positioning buttons using HTML and CSS

Looking for some help with my HTML page design. I have a few buttons that I want to style like this: https://i.stack.imgur.com/3UArn.png I'm struggling with CSS and can't seem to get them positioned correctly. Currently, they are displaying "bel ...

The background image fails to appear on the webpage's body

Having an issue with my CSS not displaying correctly. I am new to coding in HTML and CSS and need help getting the image to display full screen. Despite trying everything, it is still not working. body { background-image: "/folder/photo.gif"; } I hope ...

Creating a full-screen background with an rgba overlay using CSS

I recently encountered an issue with a fixed, fullscreen background image on my website. I initially applied the background image to the HTML's CSS instead of the body's CSS. To add a black overlay with lowered opacity, I included the following c ...

When attempting to access the essential assets and dependencies, I encounter errors while executing the command $ rake bower:install

Here are the specifications of my environment: - Operating System: Mac - Rails Version: 5.0.5 - RVM Ruby Version: ruby-2.4.0 - Node Version: v6.11.2 - NPM Version: 5.3.0 To download the required assets, I execute the following comman ...

Looking for a media query fix for specific mobile browsers

Managing a simple single-page web application is proving challenging, as I strive to optimize its appearance across various devices. The layout is stable on: Acer Laptop(1366 x 768) on Chrome, Firefox, and Opera HTC One X(720 x 1280) on Chrome, Opera, F ...

Tips for concealing a div element with CSS when it contains only one character

I am seeking a way to display a block of text only when it is not an empty space ("&nbsp;"), and hide it otherwise. My preference is to achieve this using solely CSS. Here is the code snippet: <div>Some text here</div> <div>&nbsp; ...

Placing a div with 100% height inside a table-cell div in Firefox and IE

Seeking guidance on placing a div with 100% height inside a table-cell div. Attempted giving display:inline-block; width:100%;height:100%; to the div, successful in Chrome but facing issues in Mozilla and IE. Fiddle link: http://jsfiddle.net/kQM74/2/ HTM ...

Why won't the display: block CSS style apply to my div element?

Take a look at my code: https://jsfiddle.net/r62p4209/ I created a search bar with company brand name and some buttons on the right, positioned in the center. My aim is for the search bar (from "search by:" to the "Go!" button) to move onto the next lin ...