What is the best way to integrate a ttf custom font into my Rails application?

Despite following the instructions in this thread, I am unable to achieve the same results.

main.css

h1 {
  font-family: 'Shadows Into Light', serif;
  src: url('/assets/fonts/shadows.ttf') format("Shadows Into Light");
  font-size: 40px;
  text-align: center;
  position: relative;
  bottom: 20px; 
  margin: 0 auto 0 auto;
  width:100px;
}

Assets Directories

assets
|
|
---stylesheets
|  |
|   ---main.css
---images
|
|
---images
| 
|
---fonts
   |
    ---shadow.ttf

In an additional attempt, I tried to manually add the fonts directory into my asset pipeline:

config/application.rb

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

Any insights on how to successfully include a ttf custom font into my Rails application?

Answer №1

@font-face {
  font-family: 'customFont';
  src: url('path-to-yourfont.eot?#') format('eot'),  /* IE6-8 */
       url('path-to-yourfont.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('path-to-yourfont.ttf') format('truetype');  /* Saf3-5, Chrome4+, FF3.5, Opera 10+ */
}

Answer №2

Forget about the asset pipeline altogether. Just opt for google fonts and insert the given URL into your layouts.html.erb. However, be cautious when adding the font link and ensure you specify the src as https rather than http. For instance:

  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">

Make it:

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Shadows+Into+Light">

By using the latter, the request is made through a secure https connection instead of an insecure http one. This adjustment is essential when working with Heroku to avoid requesting assets over non-secure protocols.

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 Omitting Children <li> from CSS Design

I'm currently working in SharePoint Designer and facing an issue with custom bullets in my list. My goal is to apply a custom bullet on the parent li elements (Desc 1 and Desc 2), but unfortunately, it's also being applied to all the children li ...

What is the best way to ensure that my header remains responsive across all devices and screen sizes?

The header is not responding despite inputting width: 100%. How can I ensure that the header is responsive on all browsers, as well as iPads and phones? .head-wrap { background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/We-are-p ...

switch from material ui lists on/off

Trying to learn React through coding, I've encountered an issue with displaying the 'StarBorder' icon next to folders when clicked. Currently, clicking on any folder displays the 'StarBorder' icon for all folders. Any tips on how t ...

The Cascading of Bootstrap Card Designs

Looking for some assistance with my TV Show Searcher project that is based on an API. The functionality is complete, but I'm struggling to get the Bootstrap cards to stack neatly without any empty space between them. I want it to resemble the image ga ...

Using the / (forward slash) in CSS styling statements

Similar Query: Understanding the CSS font shorthand syntax As I was examining the styling on Apple's website, I encountered a CSS rule that left me puzzled: body { font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana, ...

Creating a simulated textarea with a scrollbar and dynamically refreshing the content

Due to limitations on markup content inside <p> tags, I have decided to create my own custom textbox. This textbox will function as a console where the battle progress is logged. Initially, I attempted using nested divs for each log, but encountered ...

Issues with CSS margins in IE causing bugs?

Currently dealing with a CSS issue that seems to be specific to Internet Explorer. I haven't encountered it in Firefox, Safari, or Opera during testing with IE 11. The problem: I've set the top margin of the website content/stage to around 2%, ...

Utilizing React to highlight buttons that share the same index value upon hover

I have some data in a JavaScript object from a JSON file, where certain entries have a spanid (number) while others do not. I've written React code to highlight buttons with a spanid on hover, but I'm looking for a way to highlight or change the ...

Eliminate any blank spaces in the SELECT Angular application for IE-CSS

One issue I encountered is removing the default selected "SELECT" option from a select drop down on my webpage. Currently, I am using to remove it successfully in Chrome and Firefox browsers, but unfortunately IE does not respond to this method. I ha ...

Affix Object to Bottom of Stationary Element

I have a header element that I want to remain fixed while scrolling. The scrollable area should be positioned directly after the fixed header, without using position: absolute and removing it from the document flow. To better illustrate the issue, I' ...

Creating a JQuery slider that efficiently loads and displays groups of elements consecutively

Currently, I am in the process of developing an infinite horizontal tab slider using jQuery. My main objective is to optimize loading time by having the slider display only the first 10 slides upon initial page load. Subsequent slides will be loaded as the ...

Settings for the packaging of web components

Is there a way to configure a web component in vue.config.js and separate the iconfont.css section when building? I am using the vue-cli-service build --target wc-async --name chat-ui src/views/Chat/Launcher.vue --report command to package the web compon ...

What could be causing my difficulty in locating an HTML element using jQuery/JS string interpolation?

In my project, I have a set of div blocks each identified by a unique numerical id. For instance: One of the tasks in my project is to select the 29th element following a specific chosen element. For example, if I choose the first div with id 1, then I s ...

Display of content visible via stationary div

Recently, I successfully implemented a fixed div that remains at the top of my webpage. However, I encountered an issue where text would appear through the div when scrolling. You can witness this phenomenon by visiting this site and simply scrolling down ...

Adjust the appearance of a div according to the input value

When a user inputs the correct value (a number) into an input of type "number," I want a button to appear. I attempted var check=document.getElementById("buttonID").value == "1" followed by an if statement, but it seems I made a mistake somewhere. Here&ap ...

Navigation that remains fixed while scrolling

Can someone help me fix the side navigation of this template to stay fixed when a user scrolls past it for easier navigation? I'm struggling with the code and could use some fresh eyes to look at it. I just can't seem to figure it out on my own, ...

Tips for changing color when hovering over elements in a CSS grid

I am currently attempting to incorporate a hover effect into this CSS grid, but I have not been successful in my efforts. I experimented with transition and opacity techniques, but they did not work as expected. Can someone please point out what I may be ...

Ways to hover and efficiently organize components?

My elements are floated with a width of 20%, resulting in 5 elements per line. The current arrangement looks like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Now, I want to reorganize them vertically as follows: 1 4 7 10 13 2 ...

pressing the button again will yield a new outcome

I am looking to disable a button (material ui) when it is clicked for the second time by setting disabled={true}. Unfortunately, I have not been able to find any examples related to this specific scenario on StackOverflow. <Button onClick={this.s ...

Using jQuery to create a flawless animation

I am currently working on an animation project, and I have shared my progress on jsfiddle. Below is the code snippet I have utilized: /* JavaScript: */ var app = function () { var self = this; var allBoxes = $('.box&apos ...