I've been looking for the error or the way to make dompdf work with my Google downloaded font, in this case "Roboto", and I don't know what else can I do to make this work, I've tried creating a link path to the robot-font.css, and tried pasting down all this code, inside a style tag in the PDF blade:
<style>
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.svg#Roboto') format('svg');
font-weight: 100;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Thin';
src: url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.svg#Roboto') format('svg');
font-weight: 100;
font-style: italic;
}
#font-face {
font-family: 'Roboto-ThinItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.svg#Roboto') format('svg');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Light';
src: url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.svg#Roboto') format('svg');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'Roboto-LightItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Regular';
src: url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.svg#Roboto') format('svg');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'Roboto-RegularItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.svg#Roboto') format('svg');
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Medium';
src: url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.svg#Roboto') format('svg');
font-weight: 500;
font-style: italic;
}
#font-face {
font-family: 'Roboto-MediumItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.svg#Roboto') format('svg');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Bold';
src: url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.svg#Roboto') format('svg');
font-weight: 700;
font-style: italic;
}
#font-face {
font-family: 'Roboto-BoldItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.svg#Roboto') format('svg');
font-weight: 900;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Black';
src: url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.svg#Roboto') format('svg');
font-weight: 900;
font-style: italic;
}
#font-face {
font-family: 'Roboto-BlackItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.svg#Roboto') format('svg');
}
</style>
And if I call a random <p> tag from the PDF as any of the font-family names and apply some weight or strong or bold tag it shows sans-serif with the proper weight, but not the Roboto.
Unfortunately the PDF font is very important for this project. Can't leave it as sans-serif.
Related
I am very new to Php and was wondering if i could automate this process. Is there a way to make this a little more compact using php? So that i can easely update custom fonts by just putting it in a directory (called fonts). All idea's are welcome! If you know a better solution or simply advise that i should not do this that is also fine.
/* ======================================================
► FONT-LIBRARY
====================================================== */
/*Brandon Grotesque*/
#font-face {
font-family: 'brandon_thin';
src: url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.svg#brandon_grotesquethin') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_thin_it';
src: url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.svg#brandon_grotesquethin_italic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_light';
src: url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.svg#brandon_grotesquelight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_light_it';
src: url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.svg#brandon_grotesquelight_italic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_reg';
src: url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.svg#brandon_grotesque_regularRg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_reg_it';
src: url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.svg#brandon_grotesqueRgIt') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_med';
src: url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.svg#brandon_grotesquemedium') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_med_it';
src: url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.svg#brandon_grotesqueMdIt') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_bld';
src: url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.svg#brandon_grotesquebold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_bld_it';
src: url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.svg#brandon_grotesquebold_italic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_blk';
src: url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.svg#brandon_grotesqueblack') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_blk_it';
src: url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.svg#brandon_grotesqueblack_italic') format('svg');
font-weight: normal;
font-style: normal;
}
(Sorry for the bad english)
You can use SASS Mixins to do something more readable.
Here is a mixin I often use :
#mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
#font-face {
font-family: quote($font-name);
src: url($file-name + '.otf') format('opentype');
src: url($file-name + '.eot');
src: url($file-name + '.eot?#iefix') format('embedded-opentype'),
url($file-name + '.woff') format('woff'),
url($file-name + '.ttf') format('truetype'),
url($file-name + '.svg##{$font-name}') format('svg');
font-weight: $weight;
font-style: $style;
}
}
And after I can do that for example :
// BRANDON GROTESQUE
// ================================
$directory-font-brandonGrotesque: './Brandon-Grotesque';
#include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 300, 'italic');
#include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 300);
#include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 400);
#include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 500);
#include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 700);
If you really need to do it automatically, I think GULP or any other task manager can help you to achieve it.
I am trying to use OLD English font in Dompdf with Laravel.,
I have inserted the font in laravel view. But it seems when generating the pdf It is not working.I tried editing dompdf >vendor >.../dompdf_font_family_cache.dist.php File.But no luck,
Can anyone Suggest a Solution?
Thanks In Advance.
Make a fonts directory in the storage folder of your Laravel project. ( storage/fonts )
Put your .otf or .ttf files in the storage/fonts directory.
In your view/html add #font-face rules by using the storage_path method Laravel provides.
#font-face {
font-family: 'Your custom font name';
src: url({{ storage_path('fonts\your-custom-font.ttf') }}) format("truetype");
font-weight: 400; // use the matching font-weight here ( 100, 200, 300, 400, etc).
font-style: normal; // use the matching font-style here
}
Add font-family rules to your css as seen below
body {
font-family: "Your custom font name";
}
Hope this helps.
I was trying to include custom fonts too.
I included the font in the view (using #font-face declaration), but when I tried to generate the pdf, it gave me an ErrorException in AdobeFontMetrics.php.
I resolved by creating a fonts folder in the storage folder of your laravel project.
So now I have:
> storage
> app
> fonts
> framework
> logs
I hope it will help
Set font into html page which is load in Dompdf
<html>
<head>
<style>
#font-face {
font-family: 'Helvetica';
font-weight: normal;
font-style: normal;
font-variant: normal;
src: url("font url");
}
body {
font-family: Helvetica, sans-serif;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
#font-face {
font-family: 'Journal';
src: url('yourwebsite.com/journal.ttf")}}') format('truetype');
}
.typed {
font-family: 'Journal';
}
<p class='typed'>Signature</p>
Make sure to put your font name like this font: Journal; It will work.
Plus add fonts folder under your storage folder.
Place the font in the storage/fonts folder.
In my example OpenSans is used, you can download here https://files.fm/f/sr3wah265 . Unzip and put it in storage/fonts/
Open sans can also be downloaded from GoogleFonts.
then add the following style tag to your html.
<style>
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-Bold.ttf") }}) format("truetype");
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-BoldItalic.ttf") }}) format("truetype");
font-weight: 700;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-ExtraBold.ttf") }}) format("truetype");
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-ExtraBoldItalic.ttf") }}) format("truetype");
font-weight: 800;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-Light.ttf") }}) format("truetype");
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-LightItalic.ttf") }}) format("truetype");
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-Medium.ttf") }}) format("truetype");
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-MediumItalic.ttf") }}) format("truetype");
font-weight: 500;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-Regular.ttf") }}) format("truetype");
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-SemiBold.ttf") }}) format("truetype");
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-SemiBoldItalic.ttf") }}) format("truetype");
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url({{ storage_path("fonts/static/OpenSans/OpenSans-Italic.ttf") }}) format("truetype");
font-weight: 400;
font-style: italic;
}
body {
font-family: 'Open Sans', sans-serif;
}
</style>
I am setting up a font face for internet explorer only in WordPress
All of the fonts are located inside the root directory of child theme.
This is the code in ie-only.css
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#font-face {
font-family: 'open_sansregular';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff2') format('woff2'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
.text-highlight { border: 1px solid red; font-family:open_sansregular; }
}
Do you know what is the proper address to locate the font family in the root directory of the child theme?
Any help is appreciated. Thanks
I think you have not set font path correnctly try this code.
#font-face {
font-family: 'open_sansregular';
src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.eot');
src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.woff2') format('woff2'),
url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.woff') format('woff'),
url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.ttf') format('truetype'),
url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
I was able to solve my issue.
To enable font face in Internet explorer, create a separate css for IE.
Example:
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/ie-only.css" />
get_stylesheet_directory_uri() will get the directory of the child theme
Now in the ie-only.css
#font-face {
font-family: 'open_sansregular';
src: url('fonts/opensans-regular-webfont.eot');
src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans-regular-webfont.woff2') format('woff2'),
url('fonts/opensans-regular-webfont.woff') format('woff'),
url('fonts/opensans-regular-webfont.ttf') format('truetype'),
url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
All of the font files declared above should be available within the directory your are working with.
Thanks.
Error getting in website
#font-face {
font-family: 'icomoon';
src:url('icon-fonts/icomoon.html');
src:url('icon-fonts/icomoond41d.html?#iefix') format('embedded-opentype'),
url('icon-fonts/icomoon-2.html') format('truetype'),
url('icon-fonts/icomoon-3.html') format('woff'),
url('icon-fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
How to over come this error?
EDIT:
I have used this code and it don't shows any icon display even in local system
#font-face {
font-family: 'icomoon';
src:url('icon-fonts/icomoon.eot');
src:url('icon-fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('icon-fonts/icomoon.woff') format('woff'),
url('icon-fonts/icomoon.ttf') format('truetype'),
url('icon-fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Suggest me what to do now?
You're using the wrong syntax.
You're supposed to link to the actual font files...not pages
It should look something like this:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
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