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.
Related
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.
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 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 have to add a regional language content on the site but the output shows as
²æà PÀApÃgÀªÀ ¸ÀÄÖrAiÉÆà ¤AiÀÄ«ÄvÀ,
where as i have imported the font in the css like this
#font-face {font-family: 'CoreIconsRegular';
src: url('fonts/coreicons-webfont.eot');
src: url('fonts/coreicons-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coreicons-webfont.woff') format('woff'),
url('fonts/coreicons-webfont.ttf') format('truetype'),
url('fonts/coreicons-webfont.svg#coreiconsregular') format('svg');
font-family: "akshar";
src: url(/akshar.eot); /* IE */
src: local("The Real Font Name"),
url(/akshar.ttf) format("truetype"); /* non-IE */
font-weight: normal;
font-style: normal;
}
* {
font-family: "akshar", Arial, Helvetica, sans-serif;
font-weight:400;
}
please help???
You have the Declaration syntax error in your CSS. Update your CSS like below.
#font-face {
font-family: 'CoreIconsRegular';
src: url('fonts/coreicons-webfont.eot');
src: url('fonts/coreicons-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coreicons-webfont.woff') format('woff'),
url('fonts/coreicons-webfont.ttf') format('truetype'),
url('fonts/coreicons-webfont.svg#coreiconsregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "akshar";
src: url(/akshar.eot); /* IE */
src: local("The Real Font Name"),
url(/akshar.ttf) format("truetype"); /* non-IE */
font-weight: normal;
font-style: normal;
}