Laravel DomPdf Add Custom Font - php

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>

Related

How to use font awesome 5 icon in laravel blade?

I want to use font awesome icon using #fontface rule. HOw can write styles inside in internal styles inside tag.
How can can I write the code?
Internal styles written inside head tag
#font-face {
font-family: "FontAwesomeRegular";
font-weight: normal;
font-style : normal;
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/webfonts/fa-regular-400.ttf") format("truetype");
}
#font-face {
font-family: "FontAwesomeBrands";
font-weight: normal;
font-style : normal;
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/webfonts/fa-brands-400.ttf") format("truetype");
}
#font-face {
font-family: "FontAwesomeSolid";
font-weight: bold;
font-style : normal;
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/webfonts/fa-solid-900.ttf") format("truetype");
}
.fas{
font-weight: bold !important;
font-family: FontAwesomeSolid !important;
}
.fas::before{
font-weight: bold !important;
font-family: FontAwesomeSolid !important;
}
.fab{
font-weight: normal !important;
font-family: FontAwesomeBrands !important;
}
.fab::before{
font-weight: normal !important;
font-family: FontAwesomeBrands !important;
}
.far{
font-weight: normal !important;
font-family: FontAwesomeRegular !important;
}
.far::before{
font-weight: normal !important;
font-family: FontAwesomeRegular !important;
}
inside blade used <i class="fab fa-accessible-icon"></i>

Using PHP to automate #font-face path

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.

about Google fonts after Facebook redirects

I am using uploaded google fonts on my website. When I open url on browsers it works but when I share it on facebook . It works on desktops but it doesnt work on mobilephones
redirect: https://l.facebook.com/l.php?u=http://website
/* latin-ext */
#font-face {
font-family: 'Grand Hotel';
font-style: normal;
font-weight: 400;
src: local('Grand Hotel'), local('GrandHotel-Regular'), url(../fonts/grandhotel-regular.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Grand Hotel';
font-style: normal;
font-weight: 400;
src: local('Grand Hotel'), local('GrandHotel-Regular'), url(../fonts/grandhotel-regular-II.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
I couldnt find the issue. What should I do?

laravel - linking to custom fonts

I have already asked and played around with this question on Laravel discussions here (https://laracasts.com/discuss/channels/code-review/linking-to-custom-font-file-from-a-stylesheet-inside-a-blade-template). moving the file back to the stylesheet and removing the asset in the link the did not. I am trying to import custom fonts into my website, but because of Laravel's router, I can't directly link to the font files in my CSS. how can I get my custom fonts to display in the browser? So far, this dosent work:
#font-face { font-family: NexaBold; src: url('{!! asset('build/fonts/NexaBold.otf') !!}'); }
#font-face { font-family: NexaLight; src: url('{!! asset('build/fonts/NexaLight.otf') !!}'); }
#font-face { font-family: OpenSans; src: url('{!! asset('build/fontsOpenSans-Regular.ttf') !!}'); }
I tried replacing asset with public_path but that didn't work either. How do I get my fonts to display using the Laravel blade engine?

You can put your fonts in this directory /storage/app/public/fonts, so they can be accessible from the frontend:
This is how you can import them:
#font-face {
font-family:'NexaBold';
src: url('/fonts/NexaBold.otf') format('otf');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family:'NexaLight';
src: url('/fonts/NexaLight.otf') format('otf');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family:'OpenSans';
src: url('/fonts/OpenSans-Regular.ttf') format('ttf');
font-style: normal;
font-weight: normal;
}
Than to style some elements:
body{
font-family: NexaLight,Arial,Helvetica,sans-serif;
}
h1, h2{
font-family: NexaBold,Arial,Helvetica,sans-serif;
}

Wordpress: Custom font dont work

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

Categories