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?
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.
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 am currently working on a document generator symfony 2 bundle which allows to generate HTML and PDF documents (such as an invoice).
When i generate my document in-browser as an HTML page, everything's fine, but when i generate my PDF file, i have no fonts applied to my document.
I use the same templates for both case. Here is my pdf generation method :
private function generatePdfWithoutMerge($html)
{
$pdfService = $this->get('knp_snappy.pdf');
return $pdfService->getOutputFromHtml($html);
}
The $html variable is generated from a rendered twig template and, as said before, i have no issues if i display it as HTML in my browser.
LESS File :
#base-url: 'url-to-bucket';
#dark-grey: #555559;
#dark-pink: #970047;
#font-face {
font-family: paralucent_demi_boldregular;
src: url('#{base-url}/paradb__-webfont.eot');
src: url('#{base-url}/paradb__-webfont.eot?#iefix') format('embedded-opentype'),
url('#{base-url}/paradb__-webfont.woff') format('woff'),
url('#{base-url}/paradb__-webfont.ttf') format('truetype'),
url('#{base-url}/paradb__-webfont.svg#paralucent_demi_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: paralucent_lightregular;
src: url('#{base-url}/paral___-webfont.eot');
src: url('#{base-url}/paral___-webfont.eot?#iefix') format('embedded-opentype'),
url('#{base-url}/paral___-webfont.woff') format('woff'),
url('#{base-url}/paral___-webfont.ttf') format('truetype'),
url('#{base-url}/paral___-webfont.svg#paralucent_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: paralucent_thinregular;
src: url('#{base-url}/parat___-webfont.eot');
src: url('#{base-url}/parat___-webfont.eot?#iefix') format('embedded-opentype'),
url('#{base-url}/parat___-webfont.woff') format('woff'),
url('#{base-url}/parat___-webfont.ttf') format('truetype'),
url('#{base-url}/parat___-webfont.svg#paralucent_thinregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: paralucent_mediumregular;
src: url('#{base-url}/param___-webfont.eot');
src: url('#{base-url}/param___-webfont.eot?#iefix') format('embedded-opentype'),
url('#{base-url}/param___-webfont.woff') format('woff'),
url('#{base-url}/param___-webfont.ttf') format('truetype'),
url('#{base-url}/param___-webfont.svg#paralucent_mediumregular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
color: #dark-grey;
font-family: paralucent_lightregular, Helvetica, Arial, sans-serif;
font-size: 1.2em;
line-height: 0.9em;
}
.thin {
font-family: paralucent_thinregular, Helvetica, Arial, sans-serif;
}
.bold {
font-family: paralucent_mediumregular, Helvetica, Arial, sans-serif;
}
.demibold {
font-family: paralucent_demi_boldregular, Helvetica, Arial, sans-serif;
}
.price {
font-family: Arial, sans-serif;
font-size: 0.8em;
}
.separator_unbreak_wrapper {
}
.separator_unbreak {
page-break-inside: avoid !important;
}
.city_format {
font-size: 0.75em;
}
table tr th {
border-bottom: 1px solid #dark-pink;
font-weight: normal;
font-style: normal;
}
Thanks to DevDonkey comment :
I tried to have a nice file architecture with a children templates extending from a common parent template and a common LESS file, but Wkhtmltopdf has some issues with such complex architecture.
I had to gather everything in a single HTML file to make it work.
Many thanks all for your help.
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;
}