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?

cssruby-on-railsfonts

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

The issue with displaying inline block is that the divs are not appearing side by side on the

Two of my div elements, namely form-panel and data-panel, are currently not aligned on the same line. How can I use display:inline-block to align them in a single line? Please review the code provided below. I have already used display:inline-block on both ...

javascripthtmlcss

Paypal Payment Plans on a Monthly Basis Utilizing the Bootstrap Pricing Slider

I came across this fantastic Bootstrap Pricing Slider that I found originally at Within my Bootstrap Pricing Slider, there is a "total amount" calculated after some math, resulting in a final score. The slider includes a "Process" button which currently ...

javascriptjquerycsspaypalpaypal-subscriptions

Activate/deactivate CSS transition using jQuery hover state

Trying to prevent a "reversing" css transition when un-hovering the element. To keep it in its "forward" position and repeat the "forward" transition upon hovering again is the goal. This is what has been attempted: Using jQuery jQuery(document).ready(fu ...

jquerycsstransition

What could be causing the last LI to drop onto a new line when floating UL to the right?

I'm currently working on creating a horizontal navigation that needs to align to the right side of the page. However, when I float the navigation to the right and then float all the list items to the left, the last item in the list breaks onto a new l ...

htmlcsscss-floathtml-lists

Hover over me to see the CSS animation translate upwards until it reaches a specific point

I am new to CSS animation and I am trying to create a circle that moves from one end to the other on hover. However, I am facing an issue where the circle goes off-screen when the browser size is changed. How can I make it stop at a certain point within th ...

htmlcssanimationhovertranslate

Omitting an element from the CSS styling

How can I create a CSS selector that targets the text content within this snippet, excluding the <label> component? Essentially, I want to style the text in the div while leaving the label unchanged. <div id="edit-cc" class="form-item form-type ...

htmlcss

Customizing hyperlink styles with JavaScript on click

Hey there! I'm experimenting with something new. I've managed to change the background color of each link after it's clicked, but now I'm facing a challenge: How can I revert the original style when another link is clicked? Here's ...

javascripthtmlcss

What is the best way to align all menu items horizontally with the logo?

I'm facing a small issue that I can't seem to resolve on my own. I recently added a links menu to the header of my website, and it looks like the menu has fixed dimensions, causing the Login URL to get pushed down due to space constraints. I&apos ...

csswordpress

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

Take a look at this code snippet: $(document).ready(function() { $('.scrollable-area').on('wheel', function(e) { var scrollLeft = $(this).scrollLeft(); var width = $(this).get(0).scrollWidth - $(this).width(); var delta ...

javascriptjquerycssiframeiframe-resizer

Tips for adjusting alignment in MaterializeWould you like to change the alignment

I have implemented the Materialize framework for my front-end design. Initially, everything looks good when the page loads, but upon returning to the index, there is an alignment issue. Clearing the cookies seems to fix it. Here is how it currently looks: ...

phphtmlcsscodeigniter

Is there a conflict between bootstrap.min.JS and chart.min.js?

I have been working on developing an admin page for customer support and I recently added a visually appealing chart to display some data on the home screen. The chart integration was successful, but when I introduced tab panes to the page and refreshed ...

javascripthtmlcssbootstrap-4chart.js

"Finding the Perfect Alignment: How to Center Legends in Firefox

The issue at hand An issue has been identified where the code functions as intended in Chrome, Opera, and IE but fails to work in Firefox: fieldset>legend { display: table; float: none; margin: 0 auto; } <fieldset> <legend>Legend ...

htmlcssfirefox

Angular2 - Incorporating a New Attribute

I am working with the following Angular2 code: <ngx-datatable-column prop="id" name="ID"> <template ngx-datatable-cell-template let-row="row" let-value="value"> <a [routerLink]="['/devicedtls',r ...

cssangular

Adjusting the visibility of a div as you scroll

I'm trying to achieve a fade-in and fade-out effect on div elements when scrolling over them by adjusting their opacity. However, I'm facing difficulties in getting it to work properly. The issue lies in the fact that my div elements are positio ...

javascripthtmljquerycss

How can you create a blurred effect on a navbar?

Looking to achieve a unique blur effect in the background of my navbar component. The standard CSS blur effect isn't giving me the desired result, so I'm seeking some guidance on how to customize it. For example: https://i.sstatic.net/bPEXZ.png ...

htmlcss

Sneaky footer paired with a side panel

Trying to incorporate a sticky footer within the content area of a page that includes a full-height sidebar. Here is a preview of the page I'm currently working on: I have experience using in the past with success, utilizing methods involving percen ...

htmlcss

The variable 'xxx' is not defined in this context

I am attempting to incorporate a dark theme into ngx-charts, and I'm relatively new to using less. Here is the code snippet: My IDE is showing an error message "Cannot find variable 'color-bg-darker'" which leads to compilation failure. Err ...

cssangularlessngx-charts

The function is not being called as expected when using `onclick` or `eventListener('click')`

I'm in the process of developing a login form for my website that will offer 2 options - "login" and "signup". The concept is similar to mini tabs and iframe windows. Essentially, I have two divs side by side for "login" and "signup". When the user cl ...

javascripthtmlcss

Explore a variety of themes for the antd design token

Is there a way to access the text color of both the default and dark themes using design tokens? I am looking for a method to seamlessly switch between the two color schemes based on specific conditions, without having to change the entire theme. For ins ...

cssreactjsreact-hooksthemesantd

When is it appropriate to utilize props and CSS in customizing Material UI components?

As a beginner with Material UI, I'm curious about when to use props within the .jsx script and when to utilize CSS in a separate stylesheet to style MUI elements. Is it necessary to still incorporate CSS stylesheets for MUI elements or is it preferabl ...

cssreactjsmaterial-ui