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.

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');
}

Font are wrong or inconsistent in Kendo PDF

I am having a problem with KendoUI PDF export. I believe the core "Regular" font loads, but the varients don't seem to be there. am I configuring "bold\semibold\etc" wrong?? The docs are REALLY bad explaining this.
As an example "Work Sans" with font-weight: 700; doesn't show up in the pdf, looks just like regular. Clearly it's Work Sans, but nothing is bold.
Simple VSCode Project Sample:
https://www.dropbox.com/s/w25q38w1makog3w/FontProject.zip?dl=0
So here are my font families from the sass
$font-Halant: 'Halant', serif;
$font-IBMPlexSerif: 'IBM Plex Serif', serif;
$font-Lato: 'Lato', sans-serif;
$font-Roboto: 'Roboto', sans-serif;
$font-SourceSansPro: 'Source Sans Pro', sans-serif;
$font-WorkSans: 'Work Sans', sans-serif;
They are all google fonts for the page and the ttfs are saved locally for the kendo export. Everything looks great on the page, all the fonts are there.
This is how I am defining the fonts for export
kendo.pdf.defineFont({
//Halant
"Halant": "fonts/Halant/Halant-Regular.ttf",
"Halant|SemiBold": "fonts/Halant/Halant-SemiBold.ttf",
"Halant|Bold": "fonts/Halant/Halant-Bold.ttf",
"Halant|Medium": "fonts/Halant/Halant-Medium.ttf",
//Roboto
"Roboto": "fonts/Roboto/Roboto-Regular.ttf",
"Roboto|Bold": "fonts/Roboto/Roboto-Bold.ttf",
"Roboto|Medium": "fonts/Roboto/Roboto-Medium.ttf",
//IBM
"IBM Plex Serif": "fonts/IBM_Plex_Serif/IBMPlexSerif-Regular.ttf",
"IBM Plex Serif|Bold": "fonts/IBM_Plex_Serif/IBMPlexSerif-Bold.ttf",
"IBM Plex Serif|Medium": "fonts/IBM_Plex_Serif/IBMPlexSerif-Medium.ttf",
"IBM Plex Serif|SemiBold": "fonts/IBM_Plex_Serif/IBMPlexSerif-SemiBold.ttf",
//Lato
"Lato": "fonts/Lato/Lato-Regular.ttf",
"Lato|Bold": "fonts/Lato/Lato-Bold.ttf",
//Source Sans Pro
"Source Sans Pro": "fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf",
"Source Sans Pro|Bold": "fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf",
"Source Sans Pro|SemiBold": "fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf",
//Work Sans
"Work Sans": "fonts/Work_Sans/WorkSans-Regular.ttf",
"Work Sans|Bold": "fonts/Work_Sans/WorkSans-Bold.ttf",
"Work Sans|Medium": "fonts/Work_Sans/WorkSans-Medium.ttf",
"Work Sans|SemiBold": "fonts/Work_Sans/WorkSans-SemiBold.ttf"
});

Post was answered by Telerik, gonna post this for others. Basically just make new font names, specify the files and it should be good.
Now I still WANT google fonts for the page so on PDF export I apply a .exporting class to body so I'll just hack these font names in for that.
1) Remove the googlefonts link from the index :
<head>
<!-- Fonts -->
<!-- <link href="https://fonts.googleapis.com/css?family=Halant:400,600|IBM+Plex+Serif:400,400i,600,600i,700|Lato|Roboto:400,500,700|Source+Sans+Pro:400,600,700|Work+Sans:400,500,600" rel="stylesheet"> -->
</head>
2) Remove the kendo.pdf.defineFont method from resumes.js:
kendo.pdf.defineFont({...})
3) Use font-face in the resume.css files to load the desired fonts from the local files:
#font-face {
font-family: "Work Sans";
src: url("fonts/Work_Sans/WorkSans-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Work Sans Bold";
src: url("fonts/Work_Sans/WorkSans-Bold.ttf") format("truetype");
}
Notice that the declaration is slightly different for the Bold file. This allows the usage of the font to be changed in the resume.css as follows:
.resume.style2 {
font-family: "Work Sans";
}
.resume.style2 header h3 {
font-size: 16pt;
font-family: "Work Sans Bold";
}
.resume.style2 section h4 {
line-height: 23px;
font-size: 12pt;
letter-spacing: 0.1pt;
font-family: "Work Sans Bold";
}

How to import a font into an Ember project

I am creating a website using the MEEN Stack (Mongo, Ember, Express, Node). And right now, I am trying to import the Lato font family into my project as that will be the font of everything on the website. I seem to be having trouble with this and can't find any resources online that cover this. Any ideas on how to do this? I've downloaded the Lato font and put the files in my public/assets/fonts folder and am still having problems. I am also using foundation if that helps.
I have this in my app.scss file:
/* Webfont: Lato-SemiboldItalic */#font-face {
font-family: 'LatoWebSemibold';
src: url('fonts/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
src: url('fonts/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
url('fonts/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
url('fonts/Lato-SemiboldItalic.ttf') format('truetype');
font-style: italic;
font-weight: normal;
text-rendering: optimizeLegibility;
}
nav {
font-family: "LatoWebSemibold";
background-color: none;
width:150px;
text-align:left;
font-size:1em;
list-style: none;
margin: 0 0 0 0;
padding: 0 20 30 20;
float:left;
}

I think your missing '/assets/' in the url
below is my working example
#font-face {
font-family: 'Mytupi-Bold';
src: url(/assets/fonts/mytupibold.ttf) format('truetype');
}

I was trying to import a local font file into my ember addon.
Sheriffderek posted a nice mixin here but I kept seeing 404 errors.
I eventually got it working by putting the name of the app at the beginning of the font URL.
$font-url: '/<app/addon-name>/fonts';
#mixin font-face($name) {
#font-face {
font-family: $name;
src: url("#{$font-url}/#{$name}.woff2") format("woff2"),
url("#{$font-url}/#{$name}.woff") format("woff");
}
#include font-face('font-name-500');
body {
font-family: 'font-name-500';
}