Develop Reference

Font in Next.js / Tailwind CSS app initially bold but then unintentionally reverts

I'm working on a pretty bare bones Next app using Tailwind and I just installed a custom variable-weight font Raleway (downloaded the family in .ttf format and converted it to .woff2) but for some reason am unable to change the font weight via the font-bold, font-extrabold, etc custom classes... at least permanently. The Raleway font is successfully showing at all to begin with.
Shown below, a refresh makes the page immediately flash with what's seemingly the correct style but then reverts to something else.
Could it have something to do with the font block period transitioning to the font swap period? Below is my styles/globals.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
#font-face {
font-family: 'Raleway';
src: url('/fonts/Raleway-Thin.woff2') format('woff2');
font-weight: 400;
font-display: swap;
font-style: normal;
}
}
And here's my tailwind.config.js:
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
fontFamily: {
raleway: ['Raleway', 'sans-serif'],
},
},
},
plugins: [],
}

it's because the .ttf file you converted only contains the thin weight (font-weight: 100) of the Raleway font. You need all the weight for this to work.
Example for Poppins :
#font-face {
font-family: 'Poppins';
font-weight: 100;
src: url('../assets/fonts/Poppins/Poppins-Thin.ttf') format('truetype');
}
#font-face {
font-family: 'Poppins';
font-weight: 200;
src: url('../assets/fonts/Poppins/Poppins-ExtraLight.ttf')
format('truetype');
}
#font-face {
font-family: 'Poppins';
font-weight: 300;
src: url('../assets/fonts/Poppins/Poppins-Light.ttf') format('truetype');
}
...
The flash you see is the default browser font because of the display swap

Styles in .scss file not applied

I have a react app and use .scss files for styling.
My index.js looks like this:
import './App.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
My App.scss looks like this:
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
height: 100%;
}
body,
:global(#root) {
min-height: 100%;
color: var(--primary-font-color);
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 22px;
}
h1 {
color: var(--primary-font-color);
font-size: 32px;
font-weight: 600;
line-height: 36px;
}
:root {
/*Colors */
--primary-color: #f6f5f2;
}
Now my problem is that all the styles apart from *,*::before,*::after and :root are not applied.
In the browser console I can see that the App.scss is used and the *,*::before,*::after styles are applied. Also all vars from :root can be found there.
I want to use the App.scss file for global styles, but the only way I found to apply them is with an #import("App.scss") in a component.module.scss. Importing the App.scss to every module results in as many duplicates as imports. Is this the intended way to handle scss styles?

Sass is not recommended to use today for global styles, because as they wrote -> it can generate more files than you want -> effect is that you have worse performance
This information we can read on their main page
I recommend you use once simple CSS file for variables, global styles then easily you can reuse them and if you wanna use Sass as a developer then go-ahead for the rest of styling
Best!

For example what you can do
App.css:
body {
margin: 0;
font-family: Lato, Helvetica, Arial, sans-serif;
transition: all 0.3s linear;
}
:root {
--facebook-color: #507dc0;
}
And then:
Login.scss
body {
.login {
background-color: var(--facebook-color);
}
}
Of course this is only example.

I found the a solution:
Looks like it was the :global(#root) which caused the problem. Removing it makes the other styles applied no matter if they are in a .scss or .css file.

How to import font family files properly react

I cannot import my font files, dont know why is not working.
Here what I did:
Create font folder and added font-files inside
fonts/avenir.woff
fonts/avenir.woff2
in body setup font-faimily
body {
font-family: Avenir;
// Open-Sans, Helvetica, Sans-Serif;
font-style: normal;
font-size: 14px;
background: ${colors.offWhite};
}
Call the font-face:
#import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=7ba9e0a7-abe8-437c-a682-27fa19a01908");
#font-face{
font-family:"Avenir LT W01_35 Light1475496";
src:url("./fonts/avenir.woff2") format("woff2"),url("./fonts/avenir.woff") format("woff");
}
And still does not work
Where I am making a mistake?

CSS - Can't resolve local ttf file?

Alright, common issue - just trying to include a custom font. Ive tried multiple methods, including:
#font-face {
font-family: SequelSansBlackDisp;
src:"./src/resources/SequelSansBlackDisp.ttf";
}
#font-face {
font-family: SequelSansLightDisp;
src:"./src/resources/SequelSansLightDisp.ttf";
}
and
#font-face {
font-family: SequelSansBlackDisp;
src:url("./src/resources/SequelSansBlackDisp.ttf");
}
#font-face {
font-family: SequelSansLightDisp;
src:url("./src/resources/SequelSansLightDisp.ttf");
}
To no avail. The first doesnt do anything, while the 2nd draws "cannot resolve" errors. The font is right there in the resources folder - I did rename the ttf file to take out the spaces. Maybe this is the issue? How would I know how to correctly reference the ttf file?

try this solution:
#font-face {
font-family: fontName;
font-style: normal;
font-weight: normal;
url('/static/fonts/dir/font_name.ttf') format('truetype');
}

You can try this.
#font-face {
font-family: SequelSansBlackDisp;
src:url('./src/resources/SequelSansBlackDisp.ttf') format('truetype');
}
#font-face {
font-family: SequelSansLightDisp;
src: url('./src/resources/SequelSansLightDisp.ttf') format('truetype');
}

How to host Material Design icons offline?

I want to host Material Icons offline for my offline web development project (I will not have internet on the computer where is deployed). From my Google search, I found this SO answer. BUT it is Not working for me. My question is how to make it work. How to host material design icons offline for my offline project?
I have attached a .zip file of my SSCCE project, which reproduces the problem, here.
Basically I downloaded the MaterialIcons-Regular.eot, MaterialIcons-Regular.ttf, MaterialIcons-Regular.woff and MaterialIcons-Regular.woff2 from here and put them in my project's directory.
Here is my index file:
<!DOCTYPE html>
<html>
<head>
<title>MaterializeTest</title>
<link rel="stylesheet" href="material-fonts.css" />
<link type="text/css" rel="stylesheet" href="materialize.min.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1"/>
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<i class="material-icons">chevron_left</i>
</body>
</html>
And here is the CSS file.
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'),
url(MaterialIcons-Regular.woff) format('woff'),
url(MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}

First way to add icons will be following:
Copy content of this file to you custom css file (for instance, material-fonts.css) https://fonts.googleapis.com/icon?family=Material+Icons
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
Copy the link from src url and put it in browser. It will download file. You need to put it file in the same directory where you save first file(material-fonts.css).
Update in material-fonts.css file src: url() as src: url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
Second example:
Looks like you download wrong files.
You need to download this directory and put it into your folder, previous files have to removed.
Your materialFontTest.php should look like:
<!DOCTYPE html>
<html>
<head>
<title>MaterializeTest</title>
<link rel="stylesheet" href="material-icons.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<i class="material-icons">chevron_left</i>
</body>
</html>

Original but light weight Material Icons
This light-weight repository (https://www.npmjs.com/package/material-design-icons-iconfont) is a fork of the original repository of ~60MB but this is very much light weight because unnecessary files were removed from that original repository.
How to install?
step 1:
// install via bower/npm
bower install material-design-icons-iconfont
npm install material-design-icons-iconfont
step 2:
// import or link
#import "~material-design-icons-iconfont/dist/material-design-icons.css";
<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">
How to use?
<i class='material-icons'>done</i> // remember to add class `material-icons`
more on https://material.io/tools/icons/?style=baseline

I think you downloaded wrong files from somewhere. This is the path that you have to download correct fonts from: https://github.com/google/material-design-icons/tree/master/iconfont or use the one in my GH repo that worked for you already.
Also you need to call only one css in your html (php) file, like this:
<link rel="stylesheet" href="material-fonts.css" />
hth, k