I have a text that can be edited in tinymce web editor. After finishing, the text can be exported to PDF file using wkhtmltopdf 0.12.5 (with patched qt) and snappy as the wrapper.
Now there is multiple fonts to chose from and after a little research I managed to make it so that the font will be rendered correctly after exporting to PDF for English. However, when the text is in Arabic it always renders with a default font and wkhtmltopdf ignores the font that was selected in the editor.
Here is the code:
$htmlString = '<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://fonts.googleapis.com/css?family=Book+Antiqua|Andale+Mono|Arial|Arial+Black|Comic+Sans+MS|Courier+New|Georgia|Helvetica|Impact|Tahoma|Terminal|Times+New+Roman|Trebuchet+MS|Verdana|Webdings|Wengdings&;subset=latin" rel="stylesheet" type="text/css">
<style>
p, h, div, tr, ul, ol{page-break-inside: avoid !important;}
</style>
</head><body>' . $request->content . '</body></html>';
$options = [
'enable-smart-shrinking' => true,
];
$pdf = App::make('snappy.pdf.wrapper');
$pdf->loadHTML($htmlString);
return $pdf->setOptions($options)->inline(date('d-m-y_h:i:s_a') . '.pdf');
Note that the font shows correctly in the editor on the browser but it doesn't get applied on the generated PDF document. The content of the page is a simple paragraphs and headers nothing too fancy like tables or images.
Page as html
Page As PDF
I tried adding the fonts then using #font-face and I also tired to changing the subset in the google fonts link to Arabic but nothing worked.
Please advise.
Thanks in advance :)
I encountered a similar issue while working on an Odoo Report which uses wkhtmltopdf 0.12.5. The solution that worked for me was to use #font-face and add the base64-encoded font file as source:
#font-face{
font-family: 'Arial';
src: url(data:font/truetype;charset=utf-8;base64,<BASE64 CODE HERE>);
}
/* apply the font to all */
html * {
font-family: Arial;
}
to get the base64 code, you may use a tool such as this or this. just upload the font file there and copy the output base64 code and put it in place of <BASE64 CODE HERE> in the above sample CSS
Related
I downloaded a font, the location of the file is correct but i dont know why it's not working:
<style>
#font-face {
font-family:"myfont";
src: url('fonts/Helvetica85Heavy_22449.ttf');
}
h1 { font-family: "myfont" !important }
</style>
<h1> Some text </h1>
Somehow the font is not being displayed. Any idea why this could be happening?
You may need to use a web font kit to convert it. Try uploading it here first then replacing it in your font directory.
https://www.web-font-generator.com/
I am developing a JSP based web application using DW CS5.5. The background color & font are defined in maincss.css file which has been attached to the jsp code file. The background color & fonts show up correctly in DW live view but not in browser or browser preview . I have already searched and tried no. of suggested solutions but it hasn't helped. If the bgcolor and Text font are defined in html code in body tag, it works but not through css. My code is as below:
maincss.css file is saved in WEB-INF folder.
maincss code:
#charset "utf-8";
.bodystyle {
font-family: Georgia, "Times New Roman", Times, serif;
color: white;
background-color: #336666
}
HTML/ JSP code:
.
.
<script language="javascript" src="validation.js"></script>
<link href="WEB-INF/maincss.css" rel="stylesheet" type="text/css">
</HEAD>
<body background="" class="bodystyle"
onload=document.NewUser.user.focus()>
<%# include file="menu1.htm" %>
.
.
I feel that browser is not able to locate or implement the maincss file but not able to figure out why.
Please help to locate and rectify the error in my code.
Thanks in advance.
SK
Move your css file under another folder. The WEB-INF folder is not accessible because files under it are not directly visible for the public
I tried to use the Ubuntu font in my page by adding a link:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
Here is the CSS:
body{
font-family : Ubuntu;
}
It works but sometimes the font can't recognize slovak characters like "č, ž". These are a different font (not Ubuntu). For example in a mobile sized screen (when I push ctrl+shift+m in firefox = mobile view).
Do you know what the problem is?
I don't know about the slovak font showing it correctly. Maybe you need to add latin-ext (You need to check the latin-ext to see if it supports Slovak characters. But if you are getting wrong characters on different browsers, it is because you didn't explicitly set the charset. Add the following line to the header:
<meta charset="utf-8">
This will force the browser to show the website in UTF-8, which will fix your problem.
Note that the link to the font says "subset=Latin". This is usually sufficient for ASCII-only text; for characters with diacritics, you need latin-ext, which means "extended Latin characters." This set should cover pretty much all characters used in European, Latin-script using languages (not Cyrillic, obviously).
This is configurable in the "character set" tab in Google's font picker.
I apologize, the code for importing external provider:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
In case the viewers of the site doesn't have the Ubuntu font in their devices please add this code:
Importing from external Provider:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
Then, add Ubuntu to your font family list:
body { font-family: Ubuntu, "Times new roman", Arial, San-serif, Ubuntu; }
Hope this helps.
So, I'm using a font-face webkit from fontsquirrel and I've put the stylesheet and all fonts in a folder called "Fonts" which is contained in my HTML folder with my Index.html file. I'm using Dreamweaver and iPage and I've put the new files and synched them, but they aren't showing on other computers on the live page like they should. They work in my preview obviously. Here is my code:
<link rel="stylesheet" href="Fonts/stylesheet.css" />
What about:
<link rel="stylesheet" href="Fonts/Stylesheet.css" type="text/css">
And are you using css to implement the tag, for example:
<style>
p {font-family: 'stylesheet', sans-serif;}
</style>
Is it possible to edit out the font tag in iPage and replace it with a text tag like
<p></p>
because
<font face="stylesheet"></font>
is deprecated, but may still work in preview mode.
I need help again. I'm watching some tutorials, and I have an easy code that works fine with internal CSS, but I doesn't with external CSS. I think I'm doing everything right, since I don't change a single word of the code, excep for the external css reference. Any ideas why is it not working? Thanks for your answers! (By the way, I read all the post relationed with my problem, but nothing work out.) Here's the code:
div.box
{
width:320px;
padding:10px;
border:10px solid green;
margin:0px;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: large;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="new 1.css">
</head>
<body>
<div class="box">This text in a box example uses css.<br /><b>Note:</b> there is a
DOCTYPE declaration (above the html element), so it displays correctly in all browsers.
</div>
</body>
</html>
It work out here! It is driving me insane. I tried it in Notepepad++, Brackets, and text editors. I really can't figure out what's happening.
You can't have spaces in a URL, try changing the space to its ASCII character: %20 so it would look like this:
<link rel="stylesheet" type="text/css" href="new%201.css">
Or what I would normally do is use proper file naming conventions, either camel case (every word [ besides the first one] starts with an upper case letter) or use underscores between the names.
I had the exact same problem a few days ago. (And I had no spaces in my file name..)
As soon as I outsourced my CSS code in an external file, the exact same problem came across.
For me the problem was in the encoding.
For those who have this problem too: Just switch the file encoding to UTF-8 . (I used Notepad++)
Maybe you have to add to your html file:
<meta charset="UTF-8">
And then it should finally work.
see more here: http://www.w3schools.com/html/html_charset.asp
Change encoding of the css file to utf-8 using simple notepad.
Open css file by notepad, save as then choose utf-8 from encoding tab then save.
Remember to check that there is no inline style.
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.
I had this problem too. But I understood that my wrong is here: when I was writing HTML file, I changed the direction of this file to a folder and created a CSS file next to it.
So my path for CSS file became wrong. Now I recommend to first close your editor of HTML or CSS, after choosing your direction of these files, then open your editor and write your code.