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.
Related
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.
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