Guide on how to pre-load custom fonts using webpack and rails 6

How can I efficiently preload a custom font in my Rails 6 application using webpack?

Here is the font setup in config/_fonts.scss :

@font-face {
  font-family: 'customfont';
  src: font-url('customfont.eot?81236734');
  src: font-url('customfont.eot?81236734#iefix') format('embedded-opentype'),
       font-url('customfont.woff2?81236734') format('woff2'),
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

To include the font, I import it in my application scss :

@import "config/index";

Now, I'm looking for the best practice to preload this font. What would be the most effective way to achieve this?

cssruby-on-railswebpackfontsweb-performance

Answer №1

It seems like a link tag needs to be added in the head of the view according to this informative article: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

To ensure the correct file is targeted, make use of the asset_pack_url helper for the href.

Additionally, remember that the asset_path_url should indicate the folder where your compiled asset is located without including "public/packs".

You may need to utilize something like 

<%= asset_pack_url 'media/fonts/my-font.woff' %>
or a similar approach.

(Assuming you are utilizing Webpack for images/css and fonts. If the asset pipeline is being used, stick to the usual helpers)

Answer №2

I recently faced the same question and came up with a solution for Rails 6 using webpack. From my understanding, webpack generates a `manifest.json` file that can be located in the public directory of your application (configured in `webpacker.yml`).

Upon opening the manifest.json file, you will find references to fonts. In my manifest, it looked something like this:

"media/images/some-font.woff2": "/packs/media/images/4d419d560889218c146f.woff2"

Now that you are aware of the pack path, it becomes simple to create preloading in the head section (example in haml):

= preload_link_tag(asset_pack_path('media/images/some-font.woff2'))

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 steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

Currently I am developing a single page web application using Vue.js. This app consists of 4 "page.vue" files, each with a right and left child .vue component nested inside. For instance, the Page1.vue file is structured as follows (omitting style and scr ...

javascripthtmlcssvue.js

The carousel's slides don't behave properly when swiping or using the slider controls (next/prev)

I have recently completed the construction of a carousel with swipe/touch functionality and control buttons for previous and next slides. However, I am facing an issue with the behavior of the carousel as it seems to be sliding by 2 or 3 instead of one at ...

javascriptjquerycsshammer.js

Is your website designed to adapt effortlessly to all screen sizes?

After uploading my web pages to a server, I've been testing them on various screen sizes and resolutions. Although everything looks good on larger screens, it's not scaling well on smaller resolutions like 800 x 600, 640 x 480, and 240 x 320. Cou ...

cssweb

Line divider immediately following the title on the same row

I am looking to insert a separator line immediately following the H1 tag, however my attempts have been unsuccessful. Can someone provide assistance with this? <style> #sepr { border-top-width: 3 px; border-top-style: solid; ...

htmlcss

JavaScript opacity adjustments not achieving desired outcome

My attempt to make this sub menu fade in and out upon button press is not working as expected. It should fully fade in shortly after clicking 'help' and completely fade out when clicking 'back'. Is the problem with the method I'm u ...

javascripthtmlcss

seeking a solution to simulate a variety of web browsers

Seeking a solution to preview my website on various browsers including IE7 and above, as well as different versions of Firefox. Although I am new to CSS, I previously tried installing software on my PC to assist with this task, which unfortunately caused ...

htmlcssinternet-explorer

What is the reason behind the `h-full`/`height:100%` not completely filling the void within a div element?

The issue lies in the structure of my content, which includes a title, a subtitle, and a footer. My desire is for the subtitle's div to fill the gap between the title and the footer. I attempted using h-full on the div element, but it had no noticeab ...

htmlcssnext.jsflexboxtailwind-css

The Troubles of Top Margins in CSS

Hey there, I'm a bit stumped on this issue. I've been trying to apply a 10px top margin to a paragraph inside a div, but instead of creating the space I want between elements, it just seems to push the whole containing div down by 10px. Here are ...

phphtmlcss

Inject CSS styles into panelgrid on-the-fly

How can I pass a color code property fetched from ebean to a css function? <h:panelGrid id="testpanel" columns="#{message.no_of_columns}" rows="#{message.no_of_rows}" styleClass="dynamicGrid"> <c:forEach items="#{bLDashBoar ...

cssjsf

I am unable to zoom in on the picture located in the navigation bar

(https://i.sstatic.net/epWYL.png)](https://i.sstatic.net/OHEq8.png) I am struggling to increase the size of the logo in the navbar, despite trying different values. How can I solve this issue? Although I successfully changed the position of the picture, ...

htmlcsswebbootstrap-4frontend

Display an HTML checkbox with intricate design features

I have a simple question - how can I print a green checkbox with a white check mark (Ctrl + P) without it turning black and white? This solution currently works with Bootstrap 4.0.0, but needs to be compatible with bootstrap 3.3.7. I've managed to cr ...

htmlcss

Is it impossible to use CSS for absolute positioning of text?

I am currently learning CSS and HTML, as I'm working on a project for my final school assignment. My goal is to position the text "Welcome" absolutely within a specific div that I've created. However, despite multiple attempts, I can't seem ...

htmlcss

What is the method to choose the following CSS element?

There are two div elements in my HTML code: <body> <div id="one"></div> <div></div> </body> I am looking to hide the div elements after the one with id="one" using CSS. I attempted this method: #one:after{display: ...

htmlcsscss-selectors

Unusual HTML Structure (content misplaced or out of order?)

Recently, I started learning CSS/HTML in school and we just delved into Javascript. Currently, we are working on a website project. However, while trying to integrate the content with the navbar, I encountered a strange issue. When resizing to 620px or le ...

javascripthtmljquerycss

Having trouble with the width:auto attribute in IE7?

CSS #wrapper .tn{ width:auto; height:20px; line-height:20px; float:left; padding:5px 2px 5px 5px; margin:0 5px 10px; font-weight:bold; background:#f0f0f0; } HTML <div id="wrapper"> ...

htmlcssinternet-explorerwidthinternet-explorer-7

The benefits of utilizing "native tags" instead of foreignObject in an SVG

As the creator of the stackoverflow-readme-profile project, I dedicated extensive time and effort to crafting a personalized Stackoverflow profile in the form of an SVG image. Utilizing "native svg tags," I meticulously constructed elements such as: < ...

htmlcsssvg

Having trouble changing the style property of the `<div>` element in my JS function within Bootstrap Studio

I am currently utilizing Bootstrap in Bootstrap Studio along with plain JavaScript. One of the challenges I am facing pertains to changing the background color of a <div> element upon selecting a new tab. The objective is to dynamically alter the ba ...

javascripthtmlcssbootstrap-4bootstrap-studio

The excessive code in React comments within webpack-built bundles is causing the vendor chunk to be unnecessarily large

During my webpack bundling process, I noticed that the production built vendor chunk is approximately 350k in size. Upon investigating further, I came across these specific comments: ** @license React v16.13.1 * react-dom.production.min.js * * Copyrigh ...

reactjswebpack

How to align CSS counters to the right within the ::before pseudo-element

Utilizing CSS counters and the <code> element to display syntax highlighted code snippets with automatic line numbering: JSFiddle HTML: <code> <div class="line"><span>line 1</span></div> <div class="line">< ...

htmlcss

Web page saving fails to preserve images!

Currently working on a PHP-based website that is utilizing the Zend framework and hosted on an Apache server. The folder structure within my www directory looks like this: +www | |_+css | | | |_images | |_js | |_images The issue I'm ...

phpcssimagezend-frameworkdownload