Code Samples: font

Friday, April 14, 2017

Laravel DOM-PDF include custom font

Laravel is a strong php based framework today. If you have not install dompdf yet, follow this link to install dompdf in your project. After installation of dompdf follow the below steps:

1. Create a folder named "fonts" under root folder.

2. Download your preferred font and put them in "fonts" directory.

3. Now need to add font as font-face in your css file as follows:

@font-face {
    font-family: cedarville-font-family;
    src: url("{{ asset('fonts/Cedarville-Cursive.ttf') }}");
    font-weight: normal;
}

4. Now you need to set font-family to see desired output, below is a full example of view page:

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <title>First Laravel DOM PDF</title>
    <style>
        @font-face {
            font-family: cedarville-font-family;
            src: url("{{ asset('fonts/Cedarville-Cursive.ttf') }}");
            font-weight: normal;
        }
        @font-face {
            font-family: cedarville-font-family;
            src: url("{{ asset('fonts/Cedarville-Cursive.ttf') }}");
            font-weight: bold;
        }
    </style>
</head>
<body>
<div style="font-family: cedarville-font-family;">Test PDF</div>
</body>
</html>

5. And now your pdf would look like:

Thursday, July 18, 2013

Config default and customize Font in CKEDITOR

Selecting the default font name in drop-down.

config.font_defaultLabel = 'Arial'; /* Enter your favorite font name here */

And make your own css file and link it to creditor as following in config.js file:

config.contentsCss = 'css/mine.css';

The fonts in the font menu are configured using CKEDITOR.config.font_names:

config.font_names = CREDITOR.config.font_names + 
    'Arial/Arial, Helvetica, sans-serif;' +
    'Times New Roman/Times New Roman, Times, serif;' +
    'Verdana';

`config.js`

CKEDITOR.editorConfig = function( config )
{

    // Define changes to default configuration here. For example:

    //config.language = 'fr';

    config.uiColor = '#FCFFEB';

    config.enterMode = CKEDITOR.ENTER_BR;

    config.extraPlugins = "imageUploader,tableoperations";

    config.pasteFromWordRemoveFontStyles = false;
    config.disableNativeSpellChecker = false;
    config.font_defaultLabel = "Lucida Sans Unicode";
    config.contentsCss = BASE_URL + 'js/common/ckeditor/mine.css';
};

Pages

Friday, April 14, 2017

Laravel DOM-PDF include custom font

Thursday, July 18, 2013

Config default and customize Font in CKEDITOR

config.js

`config.js`