It is common knowledge that when we include the following code in our .css file:
@font-face {
font-family: "Akrobat-Regular";
src: url('/assets/Akrobat-Regular.otf') format("truetype");
}
body {
color: #1c1c1c;
font-family: "Akrobat-Regular" !important;
}
The browser will send an additional request to download the font, causing a brief period where the default font is displayed before being replaced by the new font.
I came across a method to preload the font, but I am unsure how to utilize the downloaded font without the need for an additional request. Here is a simplified syntax:
link rel='preload' href='/assets/Akrobat-Regular.otf' as='font' type='font/otf'
= stylesheet_link_tag 'application'
css:
@font-face {
font-family: "Akrobat-Regular";
src: url('/assets/Akrobat-Regular.otf') format("truetype");
}
body {
color: #1c1c1c;
font-family: "Akrobat-Regular" !important;
}