Seems this question has been posted a few times, but posting here again because I couldn't find anything useful for my issue :(
I am using wkhtmltopdf to generate pdf files from HTML views. I have added custom fonts in the site. The rendered HTML view looks great. But the CSS styles aren't applied in the PDF properly.
My CSS
#font-face {
font-family: 'MyFont';
src: url('fonts/MyFont-Light.otf') format('opentype'),
url('fonts/MyFont-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'MyFont';
src: url('fonts/MyFont-Regular.otf') format('opentype'),
url('fonts/MyFont-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'MyFont', Helvetica, Arial, sans-serif;
font-weight: 300;
}
h1 {
font-weight: 400;
}
HTML View
PDF View
Can someone please help me resolve this issue? Thanks in advance.
Related
I am using uploaded google fonts on my website. When I open url on browsers it works but when I share it on facebook . It works on desktops but it doesnt work on mobilephones
redirect: https://l.facebook.com/l.php?u=http://website
/* latin-ext */
#font-face {
font-family: 'Grand Hotel';
font-style: normal;
font-weight: 400;
src: local('Grand Hotel'), local('GrandHotel-Regular'), url(../fonts/grandhotel-regular.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Grand Hotel';
font-style: normal;
font-weight: 400;
src: local('Grand Hotel'), local('GrandHotel-Regular'), url(../fonts/grandhotel-regular-II.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
I couldnt find the issue. What should I do?
I have already asked and played around with this question on Laravel discussions here (https://laracasts.com/discuss/channels/code-review/linking-to-custom-font-file-from-a-stylesheet-inside-a-blade-template). moving the file back to the stylesheet and removing the asset in the link the did not. I am trying to import custom fonts into my website, but because of Laravel's router, I can't directly link to the font files in my CSS. how can I get my custom fonts to display in the browser? So far, this dosent work:
#font-face { font-family: NexaBold; src: url('{!! asset('build/fonts/NexaBold.otf') !!}'); }
#font-face { font-family: NexaLight; src: url('{!! asset('build/fonts/NexaLight.otf') !!}'); }
#font-face { font-family: OpenSans; src: url('{!! asset('build/fontsOpenSans-Regular.ttf') !!}'); }
I tried replacing asset with public_path but that didn't work either. How do I get my fonts to display using the Laravel blade engine?
You can put your fonts in this directory /storage/app/public/fonts, so they can be accessible from the frontend:
This is how you can import them:
#font-face {
font-family:'NexaBold';
src: url('/fonts/NexaBold.otf') format('otf');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family:'NexaLight';
src: url('/fonts/NexaLight.otf') format('otf');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family:'OpenSans';
src: url('/fonts/OpenSans-Regular.ttf') format('ttf');
font-style: normal;
font-weight: normal;
}
Than to style some elements:
body{
font-family: NexaLight,Arial,Helvetica,sans-serif;
}
h1, h2{
font-family: NexaBold,Arial,Helvetica,sans-serif;
}
I'm using DOMPDF ver. 0.7.0 to make a pdf file from HTML, but I have problem when I need to use custom font (arial) with bold style. the bold font won't work after rendering.
here's the CSS style I'm using now:
#font-face {
font-family: 'font';
font-style: normal;
font-weight: normal;
src: url(dompdf/font/arial.ttf);
}
#font-face {
font-family: 'font';
font-style: normal;
font-weight: bold;
src: url(dompdf/font/arialbd.ttf);
}
body{
font-family: 'font';
}
and here's dompdf - php code:
require_once 'dompdf/autoload.inc.php';
use Dompdf\Dompdf;
$dompdf = new Dompdf();
$dompdf->load_html($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$pdf = $dompdf->output();
file_put_contents('pdf/sptjm.pdf', $pdf)
here's the result in HTML:
and here's the result in PDF:
the pdf didn't show the bold type, please help. thanks in advance.
i have done it simply with using different font name:
#font-face {
font-family: 'font';
font-style: normal;
font-weight: normal;
src: url(dompdf/font/arial.ttf);
}
#font-face {
font-family: 'font2';
font-style: normal;
font-weight: bold;
src: url(dompdf/font/arialbd.ttf);
}
body{
font-family: 'font';
}
so when i need the bold font type, just simply call the other font name 'cuz basically it is different font source.
I have problem with custom font on my wordpress site, it works only on homepage but when you go on any subpages like http://domainname.com/about font stop work.
Kindly ask for some help.
Here is css which i use to pass fonts :
#font-face {
font-family: 'TrajanPro-Bold';
src: url("wp-content/fonts/TrajanPro-Bold.otf");
src: url("wp-content/fonts/TrajanPro-Bold.otf?#iefix") format('opentype');
font-weight: bold;
font-style: normal; }
#font-face {
font-family: 'AVENIRNEXT-BOLD';
src: url("wp-content/fonts/AVENIRNEXT-BOLD.OTF");
src: url("wp-content/fonts/AVENIRNEXT-BOLD.OTF?#iefix") format('opentype');
font-weight: bold;
font-style: normal; }
#font-face {
font-family: 'AVENIRNEXT-ITALIC';
src: url("wp-content/fonts/avit.otf");
src: url("wp-content/fonts/avit.otf?#iefix") format('opentype');
font-weight: normal;
font-style: italic; }
#font-face {
font-family: 'AVENIRNEXT-REGULAR';
src: url("wp-content/fonts/AVENIRNEXT-REGULAR.OTF");
src: url("wp-content/fonts/AVENIRNEXT-REGULAR.OTF?#iefix") format('opentype');
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'JaneAust';
src: url("fonts/JaneAust.ttf");
src: url("wp-content/fonts/JaneAust.ttf?#iefix") format('truetype');
font-weight: normal;
font-style: normal;
}
This is because the URL wp-content/fonts/TrajanPro-Bold.otf will be relative to the current page directory.
Make the path absolute by adding a leading slash / to all the URLs.
Example: /wp-content/fonts/TrajanPro-Bold.otf
I want to added custom font in my app, but it does not work.
Here it is path when font located
#font-face { font-family: PF Din Text Cond Pro;
src: url('/fonts/JtNLnKEa.ttf'); }
font located in system/fonts/JtNLnKEa
UPD
#font-face {
font-family: PF Din Text Cond Pro;
src: url('http://contrast-energo.ru/fonts/JtNLnKEa.ttf');
}
body,html {
font-family: PF Din Text Cond Pro;
height: 100%;
min-height: 100%;
margin-top: 0px;
}
How fix?
Sorry for my bad English
Add your font a directory accessible to your CodeIgniter.
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.com/fonts/JtNLnKEa.ttf'); /*URL to font*/
}
And use your font name like:
.classname {
font-family: 'YourFontName';
}
EDIT:
body,html {
font-family: "PF Din Text Cond Pro"; /* Add double quotes around your custom font name */
height: 100%;
min-height: 100%;
margin-top: 0px;
}
#font-face {
font-family:'Lucida Grande';
font-style: normal;
font-weight: 100;
src: url(../fonts/6216.ttf) format('ttf');
}
#font-face {
font-family:'Myriad Set Pro';
font-style: normal;
font-weight: 100;
src: url(../fonts/myriad.woff) format('woff');
}
#font-face {
font-family:'Helvetica Neue';
font-style: normal;
font-weight: 100;
src: url(../fonts/helvetica-neue-medium.ttf) format('ttf');
}
#font-face {
font-family:'Roboto';
font-style: normal;
font-weight: 100;
src: url(../fonts/helvetica-neue-medium.ttf) format('ttf');
}
body
{
font-family:"Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
overflow-x:hidden !important;
}
in root folder assets/css/fonts
your appliation structuer should be like this
- application
- system
- assets
- css
- js
- fonts
etc..
then your access url should be like http://contrast-energo.ru/assets/fonts/JtNLnKEa.ttf
Your problem isn't related to CodeIgniter. You have a problem in the CSS/HTML.
You need to use the following CSS code to add properly your fonts to a HTML document:
#font-face {
font-family: 'PF Din Text Cond Pro';
src: url('fonts/PF-Din-Text-Cond-Pro.eot');
src: url('fonts/PF-Din-Text-Cond-Pro.woff') format('woff'),
url('fonts/PF-Din-Text-Cond-Pro.ttf') format('truetype'),
url('fonts/PF-Din-Text-Cond-Pro.svg') format('svg');
font-weight: normal;
font-style: normal;
}
The custom font will be displayed on all the browsers.
In case you want to assign the font to the body element, you can use the following:
body {font-family:'PF Din Text Cond Pro', Arial, sans-serif;}
You need to add the font name between single quotes or double quotes, because it's a custom font.
In case you have only a ".otf" or ".ttf" font file, then you need to convert this file to the other formats.
Online Font Converter is the best free font converter out there.
Try this:
Font name has case sensitive. Use font file name with correct case sensitive.
My font file name is Prata-Regular_0.ttf
So i type this:
#font-face {
font-family: 'Prata-Regular_0';
src: url("http:// YOUR DOMAIN .com/assets/fonts/Prata-Regular_0.ttf");
}
Not like this:
#font-face {
font-family: 'Prata-Regular_0';
src: url("http:// YOUR DOMAIN .com/assets/fonts/prata-regular_0.ttf");
}
It works guys...