Looking af https://wkhtmltopdf.org to render HTML to PDF
What can be done to improve the horrific rendering of a standard font link Arial?
HTML
<div style="font-family:'Arial'; font-size:11px; font-weight:100;">THIS is my test size:11 weight:100</div>
Command line
PS C:\Users\me\test> echo "<div style=""font-family:'Arial'; font-size:11px; font-weight:100; "">THIS is my test size:11 weight:100</div>" | .\wkhtmltopdf.exe - test.pdf
Rendered result
Expected result
I had a similar issue with a webfont (which was not installed by default in the system). I could only solve it including the base64 font in the style.css passed to user-style-sheet. Reference here
#font-face {
font-family: 'Arial';
font-style: normal;
font-weight: 400;
src: url(data:font/opentype;charset=utf-8;base64,d09GRgABAAAAAD00AA4A---[large string ommited]----3MAuAH/hbAEjQA=) format("woff"),
url(data:font/truetype;charset=utf-8;base64,AAEAAAARAQAABAAQRFNJRwAAAAEAAJUIAAA---[large string ommited]-----wAAAAAAAAAAAAEAAAAA) format("truetype");
}
You can use a tool like this to transform your font to base64.
Hope it helps!
Related
I have a next JS application and my custom fonts are in my public folder.
My task is to prevent FOUT (flash of unstyled text) on site load and so I have settled for using font-display:block;
#font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova-Regular.woff2') format('woff2'),
url('/fonts/ProximaNova-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display:block;
}
in document.tsx I am preloading the fonts in the Head component as such :
<link
rel="preload"
href="/fonts/ProximaNova-Bold.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
in _app.tsx I am importing global styles as such import './styles.css';
When i check load time for my fonts in the nextwork tab, it is roughly 3 seconds (please refer to screenshot).
Any suggestions on making my font load faster?
I am looking for a way to create PDF from (BLADE )HTML with CSS
I am using this.
"barryvdh/laravel-dompdf": "^0.8.7",
but its output looks misconversion.
$pdf = PDF::loadView('test'
)->setPaper('a4', 'portrait');
return $pdf->stream("aaa.pdf");
I use this html
https://github.com/okoppe8/PaperFormToHTML
result here.
Use Custom font to display.So download simhei.ttf from any source.and place it public folder.Then you can use below css
<style type="text/css">
#font-face {
font-family: SimHei;
src: url('simhei.ttf') format('truetype');
}
* {
font-family: SimHei;
}
</style>
As per github issue
Ref:https://github.com/barryvdh/laravel-dompdf/issues/198
Download font from
https://www.wfonts.com/font/simhei
I'm trying to get my PDF's created using DOMpdf to work correctly with Japanese characters. I have it working fine with French etc, but Japanese characters don't show (just get ???)
Here is how the HTML page looks:
...but the PDF comes out as:
The code I'm using is pretty simple:
<?php
// include autoloader
require_once '/path/to/admin/invoices/autoload.inc.php';
define("DOMPDF_ENABLE_REMOTE", true);
define("DOMPDF_UNICODE_ENABLED", true);
// reference the Dompdf namespace
use Dompdf\Dompdf;
$order_id = $argv[1];
$content = file_get_contents("/path/to/admin/invoices/html_versions/$order_id.html");
// // instantiate and use the dompdf class
$dompdf = new Dompdf();
$dompdf->loadHtml($content);
// Render the HTML as PDF
$dompdf->render();
// Output the generated PDF to Browser
$dompdf->stream();
?>
From what I can see, it wants a font specifically for Japanese.
What font would work?
Can I have it running alongside the normal font? i.e I still want to be able to show stuff like íóé etc
UPDATE: I'm getting a bit closer!
I've downloaded the CyberCJK TTF font (as suggested here: https://github.com/dompdf/dompdf/issues/938 )
Then I tweaked my CSS to:
#font-face {
font-family: CyberCJK;
font-style: normal;
font-weight: normal;
src: url("https://example.com/cgi-bin/admin/invoices/lib/fonts/DejaVuSerif.ttf") format("truetype");
}
* {
font-family: 'CyberCJK', sans-serif;
}
#page { margin: 0px; } body { margin: 0px; }
html { font-size: 14px/1; font-family: 'CyberCJK', sans-serif; overflow: auto; }
..and now I get partial characters:
I have also tested uploading my HTML page on: http://www.htm2pdf.co.uk , and it comes out perfectly as a PDF, and is also only 64kb, compared to 13mb+ using DOMPdf. Something must be up!
I'm really at a loss as to what else to try :/
I noticed Firefox refuses to load custom fonts on one of my web pages. I'm 90% sure it worked one month ago. Now I use Firefox 43.04 (Windows). The error in the console is:
downloadable font: rejected by sanitizer (font-family: "PT Serif" style:normal weight:bold stretch:normal src index:0) source: https://localhost:8443/project/fonts/2/pt-serif-v8-latin_latin-ext-700.eot
and the html text is rendered with a system font (Times New Roman) instead.
The relevant CSS is:
#font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 700;
src: url('../fonts//pt-serif-v8-latin_latin-ext-700.eot'); /* IE9 Compat Modes */
src: local('PT Serif Bold'), local('PTSerif-Bold'),
url('../fonts//pt-serif-v8-latin_latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts//pt-serif-v8-latin_latin-ext-700.woff') format('woff'), /* Modern Browsers */
url('../fonts//pt-serif-v8-latin_latin-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */
}
If I remove both lines with eot, then it works correctly (web font is used).
The question is, why does it reject the entire font family when the problem is just with one format?
I need eot for IE (strange, caniuse claims IE supports WOFF since v9, but it does not seem to work with my IE11).
I downloaded the font files thru https://google-webfonts-helper.herokuapp.com/fonts
The CSS line (the one with "Safari, Android, iOS") ends with a comma instead of semicolon. (blush)
The correct (tested to work) version is:
#font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 700;
src: url('../fonts//pt-serif-v8-latin_latin-ext-700.eot'); /* IE9 Compat Modes */
src: local('PT Serif Bold'), local('PTSerif-Bold'),
url('../fonts//pt-serif-v8-latin_latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts//pt-serif-v8-latin_latin-ext-700.woff') format('woff'), /* Modern Browsers */
url('../fonts//pt-serif-v8-latin_latin-ext-700.ttf') format('truetype'); /* Safari, Android, iOS */
}
Hello and thanks a ton for any help with my problem. Here are the facts:
The URL is www.thecloudz.net, regarding the navigation links at the very top, the font is called brooklyn. The font on the URL appears correctly in Safari and Chrome, but not in Firefox. I was told I may have a plugin installed that's interfering with font-face.
The font-face settings for the URL are below, 'rock salt' is the default font showing up in FF, but according to the code below it should first show brooklyn. Why is it working on every browser except Firefox? Please help if you can, thank you!
`/* CHANGES FONT FOR NAVIGATION */
#font-face {
font-family: brooklyn;
src: url('http://thecloudz.net/files/BROOKLYN.eot');
src: url('http://thecloudz.net/files/BROOKLYN.eot?#iefix') format('embedded- opentype'),
url('http://thecloudz.net/files/brooklyn.woff') format('woff'),
url('http://thecloudz.net/files/BROOKLYN.TTF') format('truetype');
}
#navigation ul li a {
font-family: brooklyn, 'rock salt', serif;
font-size: 1.3em;
padding-top: 7px;
height: 50px;
}`
Firefox enforces a same origin policy.
http://thecloudz.net/ and http://www.thecloudz.net/ are not the same.