I want to use a custom font in my project so I used #font-face in glabal.css:
// Black
#font-face {
font-family: "nunito";
src: url('/public/fonts/nunito/Nunito-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
#font-face {
font-family: "nunito";
src: url('/public/fonts/nunito/Nunito-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
// ExtraBold
#font-face {
font-family: "nunito";
src: url('/public/fonts/nunito/Nunito-ExtraBlold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: "nunito";
src: url('/public/fonts/nunito/Nunito-ExtraBloldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
...
I have a component in /component/Card/Card.tsx with its custom CSS /component/Card/Card.module.css, I want to use my font in my Card.module.css, but it is not working.
Do you have an idea of where I should put my #font-faced to be able to use it in my whole project?
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.
I have a css file where I am importing some fonts now the font itself does work just fine when i use it in an element , but when i declare a font-weight property in the #font-face tag that does not apply.
fonts.css
#font-face {
font-family: "Password";
font-style: normal;
font-weight: 400;
src: url("~assets/fonts/password.woff2") format("woff2"),
url("~assets/fonts/password.woff") format("woff");
}
#font-face {
font-family: "TT Hoves Bold";
font-style: normal;
font-weight: 700;
src: url("~assets/fonts/tt_hoves_bold-webfont.woff2") format("woff2"),
url("~assets/fonts/tt_hoves_bold-webfont.woff") format("woff");
}
#font-face {
font-family: "TT Hoves Demi Bold";
font-style: normal;
font-weight: 600;
src: url("~assets/fonts/tt_hoves_demibold-webfont.woff2") format("woff2"),
url("~assets/fonts/tt_hoves_demibold-webfont.woff") format("woff");
}
#font-face {
font-family: "TT Hoves Medium";
font-style: normal;
font-weight: 500;
src: url("~assets/fonts/tt_hoves_medium-webfont.woff2") format("woff2"),
url("~assets/fonts/tt_hoves_medium-webfont.woff") format("woff");
}
#font-face {
src: url("~assets/fonts/tt_hoves_regular-webfont.woff");
font-family: "TT Hoves Regular";
font-style: normal;
font-weight: 700;
}
HTML
h2.text{
font-family: TT Hoves Regular
font-size: 1.125rem
}
the font family does apply to this element but not the font-weight, it does work when i declare font-weight in the element but that becomes repetitive and ugly doest anyone knows how to declare and use font-weight from #font-face property?
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 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
i use this for invoke news fonts to my page, but not result. Why?
This fonts don't exist for default. I did download and insert in a folder Font in my skin.
#font-face {
font-family: 'akzidenzgroteskregular';
src: url('Font/Akzidenz-Grotesk (R) Extended Regular.ttf') format('truetype');
font-style: normal;
}
#font-face {
font-family: 'klavikaRegular';
src: url('Font/klavika-regular-webfont.ttf') format('truetype');
font-style: normal;
}
#font-face {
font-family: 'KlavikaBold';
src: url('Font/klavika-bold-webfont.ttf') format('truetype');
font-style: normal;
}
I used this in some projects:
.AFDefaultFont:alias,
body
{
font-family: Comic Sans, Tahoma, sans-serif !important;
font-size: 14px !important;
}