Creating a habit of defining a set of root variables is crucial for maintaining consistency throughout an application.
:root {
--main-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
--kbd-font-family: Consolas, "Liberation Mono", Courier, monospace;
--main-font-color: #000;
--secondary-font-color: #000;
--cursive-font-color: rgba(0,0,0,0.93);
--main_bg_color: #78903a;
}
However, implementing this practice can be challenging as the Rails guide does not address the issue of fonts...
Various attempts have been made to specify the fonts using variables in CSS, but the browser only recognizes the literal text of the variable and fails to load the font properly.
In the configuration file config.application.rb, the following line was added:
config.assets.paths << Rails.root.join("app", "assets", "fonts")The server was then restarted (although this step should not be necessary in development).
To define a font family properly with the files located under assets/fonts, the following code snippet was used:
@font-face {
font-family: 'Gabarito';
src: url('Gabarito-Regular.ttf'),
url('Gabarito-Bold.ttf');
font-display: fallback;
}
The question remains - how can these root variables be set correctly?