I am trying to load a font from a folder using sass like so:
#font-face {
font-family: "myFont";
font-style: normal;
font-weight: 300;
src: url("/wwwroot/assets/fonts/sampleFont.otf") format("embedded-opentype")
}
h1 {
font-family: "myFont";
font-style: normal;
font-weight: 300;
color:#fff;
}
The problem is that I can't see the font been applied (i am currently using chrome and I have also tested it on Edge without success)
The path seems correct else webpack would have failed the build.
Is there anything I am missing or misunderstood?
Related
What I want and what I wonder
I would like to use self-hosted font within a Next.js application
What i already tried
https://i.stack.imgur.com/AuIwB.png
https://i.stack.imgur.com/P6ekH.png
The result
In both cases CSS only recognizes the last font
Important
My Bold, Medium, Italic and regular fonts are separeted file, they are all in woff2 format.
I already tried to use diferente #font-face for each file (bold,regular and medium) and name each one, it works, but i think could be a more eficient way
You need to add one #font-face per style (including weights and italic versions).
The font-family name should stay the same!
Otherwise styles won't get mapped correctly to the specific font files.
Currently you're just overriding your first url – "Metropolis-Medium.woff2" won't be loaded at all since it's replaced by "Metropolis-Bold.woff2".
Multiple URLs can be used for fallback formats (e.g woff2, woff2, ttf etc.)
Without any font-weight values the browser will map the family-name "Metropolis" to "Metropolis-Bold.woff2" file and regular font-weight (or 400).
For better compatibility, you should use more verbose rules like so:
(Albeit some browsers might be more forgiving)
#font-face {
font-family: Metropolis;
font-weight: 400;
font-style: normal;
src: url("../../../public/fonts/metropolis/Metropolis-Regular.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Regular.woff")
format("woff");
}
#font-face {
font-family: Metropolis;
font-weight: 400;
font-style: italic;
src: url("../../../public/fonts/metropolis/Metropolis-Italic.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Italic.woff")
format("woff");
}
#font-face {
font-family: Metropolis;
font-weight: 500;
font-style: normal;
src: url("../../../public/fonts/metropolis/Metropolis-Medium.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Medium.woff")
format("woff");
}
#font-face {
font-family: Metropolis;
font-weight: 700;
font-style: normal;
src: url("../../../public/fonts/metropolis/Metropolis-Bold.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Bold.woff") format("woff");
}
body {
font-family: Metropols, sans-serif;
}
.medium {
font-weight: 500;
}
.bold {
font-weight: 700;
}
My custom font (Gilroy, purchased on myfonts) is having issues across browsers. The font is thicker and bigger in Chrome than on other browsers.
The font size is the same, but your letters in Chrome are bolder than in Firefox. That's because you are importing your fonts wrong.
Currently you are using:
#font-face {
font-family: "Cobury Regular";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: "Cobury Bold";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
font-weight: 400;
font-style: normal;
}
... {
font-family: "Cobury Regular";
}
... {
font-family: "Cobury Bold";
}
But the correct way would be:
#font-face {
font-family: "Cobury";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Cobury";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
font-weight: bold;
font-style: normal;
}
... {
font-family: "Cobury";
font-weight: normal;
}
... {
font-family: "Cobury";
font-weight: bold;
}
Always use font with their actual font-weight. Don't treat the same font with different weight and style like different fonts.
Your .woff font files have implemented meta tags inside, which telling the browser what thickness the letters have. If the provided font-weight in the import statement #font-face doesn't match with that, browsers will treat that differently, because there is no standard for that. (Chrome tries to handle the situation by adding a additional thickness to the already bold font, for whatever reason.)
Edit:
I'm seeing that you use h1, .text-logo #logo { font-weight: 900; ... in your CSS but you have never defined the font with the weight number 900. Please use only the weights you have provided via #font-face. (With my suggestion it would be normal and bold)
I'm trying to do global font faces for my app and so in the index.jsx I import fonts.css which contains:
#font-face {
font-family: 'ProximaNova';
src: url('/assets/fonts/ProximaNova-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'ProximaNova';
src: url('/assets/fonts/ProximaNova-Medium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ProximaNova';
src: url('/assets/fonts/ProximaNova-Extrabold.woff') format('woff');
font-weight: bolder;
font-style: normal;
}
body,
html {
font-family: 'ProximaNova';
}
In the chrome dev tools, I see that it's trying to get the font, but it returns html instead of the font it actually wants. This results in the font not being able to be decoded.
I'm pretty sure this is a result of my use of react-router-dom having a 404 route and webpack having some kind of issue.
This seems like such a trivial thing to do but it's been taking me the past hour and a half and I've gotten nowhere. Let me know if I need to be more clear. Thanks for your help
I am using Sass for my project and I am getting this error on my home page while importing fonts from my custom fonts folder of Merriweather.The problem is that when i check the network tab on chrome it shows that Agenda font file is included but not the merriweather font file.Both Agenda and Merriweather fonts are in separate folders.
Error :
**http://localhost/project-name/fonts/Merriweather/Merriweather-Italic.tff net::ERR_ABORTED 404 (Not Found)**
My Project folder structure in like this:
project-folder/fonts-folder/Merriweather-folder/All fonts of Merriweather here
project-folder/fonts-folder/Agenda-folder/All fonts of Agenda here
project-folder/scss-folder/partials-folder/global.scss
project-folder/scss-folder/variables.scss
QUESTIONS:
I want to know the is my syntax right for importing multiple fonts
from the same font family like Merriweather ?
what exactly i am doing wrong in variables.scss ??
Please help me to resolve this issue.
Code in Variables.scss
#font-face {
font-family: Agenda;
font-weight: 500;
font-style: normal;
src: url("../fonts/Agenda/Agenda-Medium.otf") format("opentype");
}
#font-face {
font-family: Merriweather-Italic;
font-weight: normal;
font-style: italic;
src: url("../fonts/Merriweather/Merriweather-Italic.tff") format("truetype");
}
#font-face {
font-family: Merriweather-Regular;
font-weight: normal;
font-style: normal;
src: url("../fonts/Merriweather/Merriweather-Regular.tff") format("truetype");
}
This is how i am using fonts in globals.scss
#import "../variables";
body{
font-family: Merriweather-Regular;
font-size: 22px;
background-color: $white;
}
h1{
font-family: Merriweather-Italic;
font-style: italic;
font-size: 94px;
}
h2{
font-family: Merriweather-Regular,Merriweather-Italic;
font-size: 42px;
}
h3{
font-family: Agenda;
font-size: 30px;
}
h4{
font-family: Merriweather-Regular;
font-style: bold;
font-size: 27px;
}
h5{
font-family: Merriweather-Regular;
font-size: 26px;
}
To be sure I would have to see a screenshot of your fonts folder, but I think the font isn't found because of typo in the font-face declaration. True-type font files usually have a .ttf extension instead of .tff.
That means you would have to adjust your #font-face declaration from:
#font-face {
// omitted font-family, weight and style for clarity
src: url("../fonts/Merriweather/Merriweather-Italic.tff") format("truetype");
}
to:
#font-face {
// omitted font-family, weight and style for clarity
src: url("../fonts/Merriweather/Merriweather-Italic.ttf") format("truetype");
}
At this point, so in variables.scss, I usually also declare a font variable for each font (type) for usage in the rest of my SASS files, e.g $merriweather--italic: "Merriweather-Italic", serif;
Therefore you can use these variables in your global.scss as such:
h1{
font-family: $merriweather--italic;
font-size: 94px;
}
I have a problem importing a font to my CSS file, and I can't understand the problem.
The code:
#font-face {
font-family: 'Reg';
font-style: normal;
font-weight: 400;
src: local('Reg'), url(carmelit.ttf) format('ttf');
}
body{
font-family: 'Reg';
}
This is not working, and not because I'm overriding it later on. The file "carmelit.ttf" is in the same folder as the CSS file.
format('ttf') should be format('truetype')
You can also remove the local info unless you're supporting ancient versions of IE.
You should also try like this:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}