I have a _fonts.scss file in my app with the code shown below. When trying to see if the font-weight 400 applies, nothing happens. However, font-weights like 300, 500 and 900 work. I tried to find a solution but to no avail. What could be causing this?
#font-face {
font-family: ProximaNova;
src: url("../fonts/ProximaNova-Regular.otf") format("opentype");
font-weight: 400;
}
#font-face {
font-family: ProximaNova;
src: url("../fonts/ProximaNova-Semibold.otf") format("opentype");
font-weight: 500;
}
#font-face {
font-family: ProximaNova;
src: url("../fonts/ProximaNova-Bold.otf") format("opentype");
font-weight: bold;
}
#font-face {
font-family: ProximaNova;
src: url("../fonts/ProximaNova-Light.otf") format("opentype");
font-weight: 300;
}
#font-face {
font-family: ProximaNova;
src: url("../fonts/ProximaNova-Thin.otf") format("opentype");
font-weight: lighter;
}
[UPDATE]
It seems ProximaNova-Thin always replaces ProximaNova-Regular when seen in the Fonts tab of Chrome's dev tools. Why can't I keep both?
Related
I'm trying to use the following CSS that adds a font family with six different font-weights.
#font-face { font-family: myFont; font-weight: Thin; src: url('../fonts/myFont-Thin.ttf'); }
#font-face { font-family: myFont; font-weight: Light; src: url('../fonts/myFont-Light.ttf'); }
#font-face { font-family: myFont; font-weight: Medium; src: url('../fonts/myFont-Medium.ttf'); }
#font-face { font-family: myFont; font-weight: Regular; src: url('../fonts/myFont-Regular.ttf'); }
#font-face { font-family: myFont; font-weight: Bold; src: url('../fonts/myFont-Bold.ttf'); }
#font-face { font-family: myFont; font-weight: Black; src: url('../fonts/myFont-Black.ttf'); }
.myClass{
font-family: myFont, sans-serif;
font-weight: Medium;
}
When I try to use the class myClass, it uses the myFont-Bold.ttf with a font-weight of 400 instead of using the myFont-Medium.ttf with a font-weight of 400. Inside of the developer tools, I'm able to see it's only loaded two font-weights of my font: Bold and Black. When I delete the line for the black font-weight, it then loads in Regular and Bold. Why is it only loading two font-weights instead of all of them?
You're using invalid font-weight keywords. (See MDN: font-weight)
Style names like "light" or "medium" are commonly used in desktop environments (e.g using a graphic application) – these style names are actually stored in a font file (at least in formats like truetype/ttf).
However, browsers can't use these internally stored style names and need an explicit style/weight mapping like so:
#font-face {
font-family: myFont;
font-weight: 100;
font-style: normal;
src: url("../fonts/myFont-Thin.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 300;
font-style: normal;
src: url("../fonts/myFont-Light.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 500;
font-style: normal;
src: url("../fonts/myFont-Medium.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 400;
font-style: normal;
src: url("../fonts/myFont-Regular.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 700;
font-style: normal;
src: url("../fonts/myFont-Bold.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 900;
font-style: normal;
src: url("../fonts/myFont-Black.ttf") format('truetype');
}
body {
font-family: myFont, sans-serif;
}
.thin {
font-weight: 100;
}
.medium {
font-weight: 500;
}
.black {
font-weight: 900;
}
I strongly recommend using numeric font-weight values for better compatibility as well as specifying the format like format('truetype')
You should also include a font-style to map normal and italic styles.
Here's my problem:
In order to improve my SPEED mark on google speed insight, I had to switch from render-blocking google fonts to loaded locally google fonts.
So far so good except that I have a HUGE problem.
Before I was loading my fonts in this way:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Open+Sans+Condensed:300|Ubuntu+Condensed|Ubuntu:300,700" rel="stylesheet">
And in my huge style-sheet, I was just calling them normally for example:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
But now, since I had to download them to avoid the render-blocking red flag, I'm calling them in this way:
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Regular.ttf");
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Bold.ttf");
font-weight: 600;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-ExtraBold.ttf");
font-weight: 700;
}
#font-face {
font-family: "Opens Sans Condensed";
src: url("/fonts/OpenSansCondensed-Light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu Condensed";
src: url("/fonts/UbuntuCondensed-Regular.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu";
src: url("/fonts/Ubuntu-Regular.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu";
src: url("/fonts/Ubuntu-Bold.ttf");
font-weight: 700;
}
And here you can see my PROBLEM.
I call different fonts with the same name, but they have different weights. Obviously, I can call them with a different name, for example, "Ubuntu Bold" but then I would have to change my entire stylesheet, for example, I should now declare:
body {
font-family: 'Open Sans Normal', sans-serif;
// font-weight: 400; //
}
p {
font-family: 'Open Sans Bold', sans-serif;
// font-weight: 700; //
}
Essentially, no more font-weight, only different font-family names to state the weight.
Is there any solution to my problem?
Even though the font files are different, you don't need to set a different font-family for each variation of the font. You can just set one font-family, and specify the different variations in the different #font-face properties.
You should define each #font-face with the same font-family name, like so:
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Regular.ttf");
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Italic.ttf");
font-style: italic;
font-weight: 400;
}
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Bold.ttf");
font-style: normal;
font-weight: 600;
}
Note that each different font file has a separate #font-face with different properties that correspond to the specific font file, but they have the same font-family. You can then use the font in your css like so:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.bold {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.italic {
font-family: 'Open Sans', sans-serif;
font-style: italic;
}
The other properties in your css classes (font-weight, font-style, etc) will determine which #font-face is used.
Hy,
I have a little problem.
I put the font in assets/fonts/barcode.ttf
I use the next code
#font-face {
font-family: "barcode font";
src: url(assets/fonts/barcode.ttf) format("truetype");
src: url(assets/fonts/barcode.svg) format('svg');
src: url(assets/fonts/barcode.eot);
src: url(assets/fonts/barcode.woff);
src: url(assets/fonts/barcode.woff2);
}
.classname {
font-family: 'barcode font';
}
p.codbare {
font-family: 'barcode font';
font-weight: normal;
font-style: normal;
font-size: 80px;
}
but is not working. Is not showing the font when I add a text.
I'm trying to use Circular font, but for some reason it falls back on "arial"
Here's my
fonts.css file:
/* Light Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Light.eot");
src: url("../fonts/Circular/CircularWeb-Light.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Light.woff2") format("woff2");
font-weight: 300;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Light.eot");
src: url("../fonts/Circular/CircularWeb-Light.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Light.woff2") format("woff2");
font-style: italic;
font-weight: 300;
}
/* End Light Font */
/* Normal Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Book.eot");
src: url("../fonts/Circular/CircularWeb-Book.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Book.woff2") format("woff2");
font-weight: 400;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Book.eot");
src: url("../fonts/Circular/CircularWeb-Book.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Book.woff2") format("woff2");
font-style: italic;
font-weight: 400;
}
/* End Normal Font */
/* Medium Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Medium.eot");
src: url("../fonts/Circular/CircularWeb-Medium.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Medium.woff2") format("woff2");
font-weight: 500;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Medium.eot");
src: url("../fonts/Circular/CircularWeb-Medium.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Medium.woff2") format("woff2");
font-style: italic;
font-weight: 500;
}
/* End Medium Font */
/* Bold Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Bold.eot");
src: url("../fonts/Circular/CircularWeb-Bold.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Bold.woff2") format("woff2");
font-weight: 700;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Bold.eot");
src: url("../fonts/Circular/CircularWeb-Bold.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Bold.woff2") format("woff2");
font-style: italic;
font-weight: 700;
}
/* End Bold Font */
/* Black Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Black.eot");
src: url("../fonts/Circular/CircularWeb-Black.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Black.woff2") format("woff2");
font-weight: 900;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Black.eot");
src: url("../fonts/Circular/CircularWeb-Black.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Black.woff2") format("woff2");
font-weight: 900;
font-style: italic;
}
/* End Black Font */
Here's my SASS to use the font:
$font-family-primary: "CircularWeb", Arial, sans-serif;
#media print {
body, html {
font-family: "CircularWeb", Arial, sans-serif;
}
}
*,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "CircularWeb", Arial, sans-serif;
}
I've tried multiple different methods for this, but nothing seems to work. Maybe I did them wrong, so I'm open to any and all suggestions. My compiled CSS directory: root/css. My fonts directory: root/fonts
If I go to: mysite.com/fonts/Circular/CircularWeb-Light.eot it saves the font, so I know I'm using the right directory. Any help would be greatly appreciated. (I've never added a font from a local directory only from fonts.google)
Troubleshooting steps:
test it online
try a different font
attempt with one font-face declaration
double check the font file path
check in the dev tool (f12 in Chrome) to see that the font is being declared on the elements you declared
I want my #font-face to apply to a range, of, say, 0 to 400 font-weight values. It appears that my #font-face applies only to the explicit font-weight specified in it. For example:
#font-face {
font-family: 'Roboto';
src: url('Roboto/Roboto-Bold.tff');
font-weight: 200;
}
If I used:
span { font-weight: 201; font-family: 'Roboto';}
It doesn't apply.
Apparently there are only 9 valid font-weights.
try to remove the single quote :
#font-face {
font-family: Roboto;
src: url(Roboto/Roboto-Bold.tff);
font-weight: 200;
}
span { font-weight: 200; font-family: Roboto;}
#font-face {
font-family: Roboto;
src: url(../fonts/Roboto-Bold.eot);
src: url(../fonts/Roboto-Bold.eot?#iefix) format('embedded-opentype'), url(../fonts/Roboto-Bold.woff) format('woff'), url(../fonts/Roboto-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;
}
body {
font-family: Roboto, Arial; font-weight: 100;}
Saw an article in MDN
#font-face {
font-family: 'Manrope';
font-display: auto;
font-style: normal;
font-weight: 400 600;
src: url('URL');
}
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/font-weight