There must be something I don't know about how fonts work, a lot of things actually. May be someone can explain me why if the font in my css is set like "font-family: Arial, Helvetica, sans-serif;"
Why does it look a little different? In the pdf look stretched and rounder.
Are there different types of the same font? If that's the case how can I fix it?
HTML page:
PDF page:
This is what I'm applying to the html to print with mpdf
h1
{
text-align: center;
margin-top: 90px;
margin-bottom: 90px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 23vw;
}
$htmlStringView = view('pdf-view', ['content' => $content, 'cssString' => $cssString])->render();
$contract = $this->userContractRepository->show($id);
$mpdf = new Mpdf(['tempDir' => '/var/www/storage/temp', 'format' => [198, 280]]);
$contract = $this->addJsonDataToModelAttributes($contract);
$mpdf->SetHTMLFooter('<div style="text-align: right;">{PAGENO}/{nbpg}</div>');
$mpdf->WriteHTML($htmlStringView);
$mpdf->SetTitle($contract->title);
$mpdf->SetAuthor($contract->owner->email);
$mpdf->SetSubject(implode(", ", $contract->persons->pluck('full_name')->toArray()));
$mpdf->SetKeywords($id);
$mpdf->Output('/var/www/storage/app/' . $full_path);
Arial is not by default included in mPDF distribution, replacement is DejavuSans. If needed, you have to point your mPDF instance to the font file.
$defaultConfig = (new Mpdf\Config\ConfigVariables())->getDefaults();
$fontDirs = $defaultConfig['fontDir'];
$defaultFontConfig = (new Mpdf\Config\FontVariables())->getDefaults();
$fontData = $defaultFontConfig['fontdata'];
$mpdf = new \Mpdf\Mpdf([
'tempDir' => '/var/www/storage/temp',
'format' => [198, 280],
'fontDir' => array_merge($fontDirs, [
__DIR__ . '/custom/font/directory',
]),
'fontdata' => $fontData + [
'arial' => [
'R' => 'arial.ttf',
'I' => 'arial-italic.ttf',
]
],
]);
see https://mpdf.github.io/fonts-languages/fonts-in-mpdf-7-x.html
Related
I want to be able to choose font I wish to download from backend via select and then use it in my project. User can change fonts and download new ones. I have problem that if font is fixed in my css like this:
export const MainContent = styled.div`
#font-face {
font-family: 'Lobster';
src: local('Font Name'), local('FontName'),
url ('http://localhost/font/lobster') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
};
font-family: 'Lobster';
`;
It is downloaded properly right after app starts and I can use it, however I don't want to have it fixed, tried few solutions so far like with WebFont:
import WebFont from 'webfontloader';
function App() {
enter code here
WebFont.load({
custom: {
families: ['Lobster'],
urls: ['http://localhost/font/${fontname'] <= used fixed lobster in this case
}
});
...
}
But it throws error like =
The resource from “http://localhost/font/lobster” was blocked due to MIME type (“font/ttf”) mismatch (X-Content-Type-Options: nosniff).
another idea was to send parameter which could replace for example lobster via props of styled component like
<MainContent fontName="lobsterTheSecond">
...
</MainContent>
However I don't really know how to pass props in #font-face as it keeps throwing errors.
Does anyone knows how can I add fonts dynamically from backend while app works? I'm out of ideas already
Not sure about WebFont but it can be done quite easy with styled components:
First of all don't pass it to your 'MainContent' but rather pass props with new font to your globalStyles and then do something like that:
const GlobalStyle = createGlobalStyle`
body {
#font-face {
font-family: 'Lobster';
src: `${props =>
url ('http://localhost/font/${props.fontName}')` format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
};
}
`
and pass it like:
function App() {
const [newFont, setNewFont] = useState('');
return (
<div>
<GlobalStyle fontName{newFont} />
<button onClick={() => setNewFont('myNewFont')>Click</button>
</div>
)
}
and then in your MainContent just use this font:
const MainContent = styled.div`
font-family: 'Lobster';
`
PhpWord ignores the second argument of the the addCell() method completely when creating PDF or HTML Documents. I'm using symfony 3.5 and updated all libraries. PhpWord is currently at 0.14, dompdf at 0.8.2.
I'm trying to output them as PDF or HTML document, but none of them seem to use any of the array arguments.
<?php
namespace AppBundle\Controller;
use AppBundle\Entity\ModProduct;
use AppBundle\Entity\ModProductsize;
use PhpOffice\PhpWord\PhpWord;
use PhpOffice\PhpWord\IOFactory;
use PhpOffice\PhpWord\Settings;
use PhpOffice\PhpWord\SimpleType\Jc;
use PhpOffice\PhpWord\Style\Language;
use PhpOffice\PhpWord\Shared\Converter;
use PhpOffice\PhpWord\Style\Table;
use PhpOffice\PhpWord\Shared\Html;
use PhpOffice\PhpWord\Style\Section;
use Symfony ...
public function listAction()
{
Settings::setPdfRenderer(Settings::PDF_RENDERER_DOMPDF, $this->get('kernel')->getProjectDir() . '/vendor/dompdf/dompdf/');
....
$phpWord = new PhpWord();
$section = $phpWord->addSection();
$header1 = array('size' => 22, 'bold' => true, 'name' => 'Trebuchet MS');
$header2 = array('size' => 14, 'name' => 'Trebuchet MS');
$header3 = array('size' => 17, 'name' => 'Trebuchet MS');
$section->addText('Supplier Name', $header1); // STYLING WORKS
$table = $section->addTable();
$row = $table->addRow();
$w = array(
Converter::cmToTwip(7.4),
Converter::cmToTwip(2.8),
Converter::cmToTwip(2.6),
Converter::cmToTwip(1.5)
);
$fw = 0;
foreach($w as $value){
$fw += $value;
}
$row->addCell($w[0], ['bgColor' => '999999'])->addText('Produkt');
$row->addCell($w[1], $header2)->addText('ArtNr');
$row->addCell($w[2], ['align' => 'center'])->addText('EK-Preis');
$row->addCell($w[3])->addText('Bestm.');
}
Stlying for text works fine, but Cells are completely ignored. Tried bgColor, align, gridSpan, ... neither the PDF nor the HTML file change.
followed the guide described here :
https://mpdf.github.io/fonts-languages/fonts-in-mpdf-7-x.html
$defaultConfig = (new \Mpdf\Config\ConfigVariables())->getDefaults();
$fontDirs = $defaultConfig['fontDir'];
$defaultFontConfig = (new \Mpdf\Config\FontVariables())->getDefaults();
$fontData = $defaultFontConfig['fontdata'];
$mpdf = new \Mpdf\Mpdf([
'fontDir' => array_merge($fontDirs, [__DIR__ . '/../../Resources/Public/Fonts',]),
'fontdata' => $fontData + [
'Arial' => [
'R' => 'arial.ttf',
'I' => 'arial.ttf',
]
],
'default_font' => 'Arial'
]);
$mpdf->WriteHTML($pdfTemplate->render());
$mpdf->Output(__DIR__.'/document.pdf','F');
in template have also inline style with font-family
font-family: Arial, sans-serif
but when i download pdf and inspect fonts they are in default DejaVuSansCondensed
is it bug or did i make mistake somewhere ?
long time ago, but i have the same problem.
solution was the uppcase key in "fontdata" (Arial). this should be lowercase (arial) and in css use: "font-family: arial, other-fallback-font"
I am using mpdf 6.0 to create PDF from a html form.
I want to use Arial font. In my css file there is:
font-family:Arial, Helvetica, sans-serif;
in Mpdf in the "config_fonts.php" file I have activated the font directory:
define("_MPDF_SYSTEM_TTFONTS", 'C:/Windows/Fonts/');
then;
$this->backupSubsFont = array('arial','dejavusanscondensed','freeserif');
and;
$this->fonttrans = array(
'arial' => 'arial',
'times' => 'timesnewroman',
'courier' => 'couriernew',
'trebuchet' => 'trebuchetms',
'comic' => 'comicsansms',
'franklin' => 'franklingothicbook',
'ocr-b' => 'ocrb',
'ocr-b10bt' => 'ocrb',
'damase' => 'mph2bdamase');
But anyway the PDF file which is produced contains always the font
dejavu sans condensed and not arial.
any ideas?
thanks a lot.
regards
hawk
Download and move the Arial font TTF into the ttfonts folder and declare it manually in config_fonts.php.
This work for me:
$mpdf = new \Mpdf\Mpdf(['default_font' => 'arial']);
You can read more in the documentation:
https://mpdf.github.io/fonts-languages/default-font.html
I'm trying to use gulp-iconfont to build an icon font from a set of svg images.
I've created my gulp task and there're no errors when I run it. But neither can I get the code for each icon, which is what I need to use the icons on css pseudoelements.
The console output shows strange characters where the unicode is supposed to be:
Here's my gulp task:
gulp.task('iconfont', function(){
gulp.src(['assets/icons/*.svg'])
.pipe(iconfont({
fontName: 'icon-font', // required
appendUnicode: true, // recommended option
normalize: true,
centerHorizontally: true,
fontHeight: 100,
formats: ['ttf', 'eot', 'woff'],
}))
.on('glyphs', function(glyphs, options) {
console.log(glyphs, options);
})
.pipe(gulp.dest('assets/fonts/'));
});
As the appendUnicode option is set to true, I can see it at the beggining of my svg file name, for example uEA02-calendar.svg.
However, if I try to use it on my css file:
.calendar:before {
content: "uEA02";
speak: none;
font-style: normal;
font-weight: normal;
font-family: "icon-font"; }
what I see is the text uEA02 instead of my icon. I've checked and the font is loading, I don't know what could I be missing here?
I usually pair gulp-iconfont with gulp-iconfont-css. This additional package exports a stylesheet with the appropriate entities binded to a class. You can export pre-processed css or vanilla css.
Here's my gulp task.
var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');
var glyphFontName = 'icon';
var stream = gulp.src('resources/assets/glyph/*.svg')
.pipe(iconfontCss({
fontName: glyphFontName,
path: 'node_modules/gulp-iconfont-css/templates/_icons.scss',
targetPath: '../../resources/sass/generated/' + glyphFontName + '.scss',
fontPath: '../fonts/',
cssClass: 'i',
centerHorizontally: true
}))
.pipe(iconfont({
fontName: glyphFontName,
formats: [
'ttf',
'eot',
'woff',
'woff2'
],
}))
.pipe(gulp.dest('public/fonts/'));
return stream;
You simply need to escape the unicode string with a backslash (\).
In your CSS just write:
.calendar:before {
content: "\EA02";
speak: none;
font-style: normal;
font-weight: normal;
font-family: "icon-font";
}
You need to reformat the unicode from within the function you're passing to the "on glyphs" event. Otherwise the unicode will be lost in templating.
I'd suggest something like this:
.on('glyphs', function(glyphs, options) {
glyphs = glyphs.map((glyph) => {
...glyph,
unicode: glyph.unicode[0].codePointAt(0).toString(16).toUpperCase()
});
console.log(glyphs, options);
})
Can't take credit for this solution - found the answer in this post