using font-face #24

rivkawaxman · 2018-01-25T17:40:49Z

I am trying to include a font from a ttf file.
I put the ttf file in the wwwroot folder of my project and i have this in my css in my html file:
@font-face {
font-family: 'MICR';
src: url("micrenc.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
and this on the line that needs the font:
style="font-family: 'MICR'; font-size: 30px;

The pdf file does that is created does even not include the text that is supposed to be in that font.
(when i render this file in my browser, i do see the text and in the specified font)

rdvojmoc · 2018-01-26T06:27:17Z

Can you try with other font format than .ttf, for example ,woff? Look at this issue

rivkawaxman · 2018-01-26T14:10:33Z

Thanks. However that did not work for me. Am I putting the font file in the right place?

rdvojmoc · 2018-01-29T07:26:40Z

Please prepare reproducible project and I could take a look.

rivkawaxman · 2018-01-29T15:14:27Z

Ok here is a test project which resembles my project
https://github.com/rivkawaxman/pdf_convert
Thank you.

rdvojmoc · 2018-01-29T21:05:59Z

Replace your Get method with this one:

public async Task<IActionResult> Get()
        {
            await Task.CompletedTask;

            string cssPath = @"file:///" + _hostingEnvironment.ContentRootPath + @"\wwwroot\fonts.css";

            string html = "<!DOCTYPE html>" +
                          "<html lang = \"en\">" +
                               "<head>" +
                                    "<meta charset = \"UTF-8\">" +
                                    "<title> Check </title>" +
                                    "<link href='" + cssPath + "' rel='stylesheet' type='text/css' media='screen'>" +
                               "</head>" +
                              "<body>" +
                                    "<div style = \"text-align: center; margin-top:16px;\">" +
                                        "<p style=\"font-family: 'MICR Encoding', sans-serif; font-size: 30px;\"> 235 384756  13425346 9877</p>" +
                                    "</div>" +
                                    "<div style = \"text-align: center; margin-top:16px;\">" +
                                        "<p style=\"font-size: 30px;\"> This line doesn not have a font specified</p>" +
                                    "</div>" +
                              "</body>" +
                          "</html>";
            

            var pdf = new HtmlToPdfConverterService(_converter).Convert(html);
            var path = Path.Combine(_hostingEnvironment.WebRootPath, "micr.pdf");
            using (var fs = new FileStream(path, FileMode.Create, FileAccess.Write))
            {
                fs.Write(pdf, 0, pdf.Length);
            }
            return Ok();
        }

As far I know wkhtmltopdf doesn't support relative paths for that reason I added cssPath variable to tell where to look for css file.

In wwwroot create fonts.css and paste this code:

@font-face {
    font-family: 'MICR Encoding';
    font-style: normal;
    font-weight: normal;
    src: url(./micrenc.woff) format('woff');
}

Here is the result of the conversion.

rivkawaxman · 2018-01-30T14:36:20Z

Thank you so much! It's working!

kgrosvenor · 2018-11-21T01:15:21Z

Is this a cross platform solution @rivkawaxman i.e linux, mac?

ghost · 2020-01-22T11:40:13Z

I tried the solution, using external css, but it's not working for me.
I have a method that generates the html with internal css(tried it with external css too).
If I create a basic html page using the html content generated, the font is used.
The problem is that the pdf doesn't generate using the customFont(as the HTML does), it uses the next one, Arial.

@font-face{
                  font-family: 'customFont';
                  font-style: normal;
                  font-weight: normal;
                  src:url("C:/Users/user/Path/SometOtherPath/customFont.woff"); 
                  // Absolute path for internal css
                  // Relative path for external css 
}
body{
        font-family: 'customFont', Arial, Helvetica, sans-serif;
        font-size: 18px;
}

Is there anything I am missing?

EDIT:
Weirdly enough, if I use a link reference to a css file, it works. That means I am not doing something right with the local css.

hamedapp · 2020-08-05T13:14:54Z

Replace your Get method with this one:

public async Task<IActionResult> Get()
        {
            await Task.CompletedTask;

            string cssPath = @"file:///" + _hostingEnvironment.ContentRootPath + @"\wwwroot\fonts.css";

            string html = "<!DOCTYPE html>" +
                          "<html lang = \"en\">" +
                               "<head>" +
                                    "<meta charset = \"UTF-8\">" +
                                    "<title> Check </title>" +
                                    "<link href='" + cssPath + "' rel='stylesheet' type='text/css' media='screen'>" +
                               "</head>" +
                              "<body>" +
                                    "<div style = \"text-align: center; margin-top:16px;\">" +
                                        "<p style=\"font-family: 'MICR Encoding', sans-serif; font-size: 30px;\"> 235 384756  13425346 9877</p>" +
                                    "</div>" +
                                    "<div style = \"text-align: center; margin-top:16px;\">" +
                                        "<p style=\"font-size: 30px;\"> This line doesn not have a font specified</p>" +
                                    "</div>" +
                              "</body>" +
                          "</html>";
            

            var pdf = new HtmlToPdfConverterService(_converter).Convert(html);
            var path = Path.Combine(_hostingEnvironment.WebRootPath, "micr.pdf");
            using (var fs = new FileStream(path, FileMode.Create, FileAccess.Write))
            {
                fs.Write(pdf, 0, pdf.Length);
            }
            return Ok();
        }

As far I know wkhtmltopdf doesn't support relative paths for that reason I added cssPath variable to tell where to look for css file.

In wwwroot create fonts.css and paste this code:

@font-face {
    font-family: 'MICR Encoding';
    font-style: normal;
    font-weight: normal;
    src: url(./micrenc.woff) format('woff');
}

Here is the result of the conversion.

Works for me

sangib58 · 2022-10-31T18:11:02Z

In my case i am not able to use font family. Tried in possible all ways(internal css, external css, internal css) but nothing worked.Other css properties are working perfectly.I am using a method to get html. Thanks in advance.

public ActionResult CreatePDF(int id)
{
try
{
string host=Request.Scheme+"://"+Request.Host;
var objGenerator=new CertificateGenerator(_context);

            var globalSettings = new GlobalSettings
            {
                ColorMode = ColorMode.Color,
                Orientation = Orientation.Landscape,
                PaperSize = PaperKind.A4Small,
                Margins = new MarginSettings { Top = 10 },
                DocumentTitle = "",
            };
            var objectSettings = new ObjectSettings
            {
                PagesCount = true,
                HtmlContent =objGenerator.GetHTMLString(id,host),
                //WebSettings = { DefaultEncoding = "utf-8"},
                //WebSettings = { DefaultEncoding = "utf-8",LoadImages=true, UserStyleSheet =  Path.Combine(Directory.GetCurrentDirectory(), @"Resources","Assests", "styles.css") },
                //HeaderSettings = { FontName = FontName, FontSize = 9, Right = "Page [page] of [toPage]", Line = true },
                //FooterSettings = { FontName = FontName, FontSize = 9, Line = true, Center = "This is report footer for testing." },    
            };
            var pdf = new HtmlToPdfDocument()
            {
                GlobalSettings = globalSettings,
                Objects = { objectSettings }
            };
            var file = _converter.Convert(pdf);
            return File(file, "application/pdf");
        }
        catch (System.Exception)
        {        
            throw;
        }
    }

public string GetHTMLString(int id,string host)
{
var cssPath=Path.Combine(Directory.GetCurrentDirectory(), @"Resources","Assests", "styles.css");
var objCertificate=_context.CertificateTemplates.FirstOrDefault(q=>q.CertificateTemplateId==id);
var sb = new StringBuilder();
sb.Append(@"

<title>Certificate</title>
<style>
body {background-image: url("
+host+objCertificate.BackgroundImagePath+")};background-repeat: no-repeat;</style>");
if(objCertificate.TopLeftImagePath.Length>10 || objCertificate.TopRightImagePath.Length>10)
{
sb.Append(@"

");
if(objCertificate.TopLeftImagePath.Length>10)
{
sb.Append(@"

");
}
if(objCertificate.TopRightImagePath.Length>10)
{
sb.Append(@"

");
}
sb.Append(@"

"+objCertificate.Title+"

"+objCertificate.Heading+"

"+objCertificate.MainText+"

");
if(objCertificate.LeftSignatureImagePath.Length>10 || objCertificate.RightSignatureImagePath.Length>10)
{
sb.Append(@"

");
if(objCertificate.LeftSignatureImagePath.Length>10)
{
sb.Append(@"

");
}
if(objCertificate.RightSignatureImagePath.Length>10)
{
sb.Append(@"

");
}
sb.Append(@"

");
}
if(objCertificate.LeftSignatureText.Length>5 || objCertificate.RightSignatureText.Length>5)
{
sb.Append(@"

");
if(objCertificate.LeftSignatureText.Length>5)
{
sb.Append(@"

");
}
if(objCertificate.RightSignatureText.Length>5)
{
sb.Append(@"

");
}
sb.Append(@"

");
}
if(objCertificate.LeftSignatureText.Length>5 || objCertificate.RightSignatureText.Length>5)
{
sb.Append(@"

");
if(objCertificate.LeftSignatureText.Length>5)
{
sb.Append(@""+objCertificate.LeftSignatureText+"");
}
if(objCertificate.RightSignatureText.Length>5)
{
sb.Append(@""+objCertificate.RightSignatureText+"");
}
sb.Append(@"

");
}
sb.Append(@"

");
if(objCertificate.BottomMiddleImagePath.Length>10)
{
sb.Append(@"

");
}
sb.Append(@"TAPAS"+(objCertificate.CertificateTemplateId<10?('0'+objCertificate.CertificateTemplateId):objCertificate.CertificateTemplateId)+"");
sb.Append(@"Printed on "+DateTime.Now+"");
sb.Append(@"

");

        sb.Append(@"      
                        </body>
                    </html>");
        return sb.ToString();
    }

body{
font-family: 'Courier New', Courier, monospace;
}
.title {
text-align: center;
font-size: 40px;
color: black;
padding-bottom: 35px;
}
.heading {
text-align: center;
color: black;
padding-bottom: 25px;
}
.mainText {
/* font-variant: small-caps; */
font-style: oblique;
font-size: 25px;
text-align: center;
color: black;
padding-bottom: 35px;
}
.topImages{
padding-bottom: 120px;
}
.imgTopLeft{
float:left;
max-width: 150px;
max-height: 150px;
}
.imgTopRight{
float:right;
max-width: 150px;
max-height: 150px;
}
.signatureImages{
padding-top: 120px;
}
.hrLeft{
float:left;
width: 300px;
}
.hrRight{
float:right;
width: 300px;
}
.signatureHrTag{
padding-top: 80px;
}
.signatureText{
padding-top: 20px;
}
.textLeft{
float: left;
}
.textRight{
float: right;
}
.bottomText{
padding-top: 250px;
}
.imgBottomLeft{
float:left;
max-width: 150px;
max-height: 150px;
}
.textBottomMiddle{
padding-left: 400px;
}
.textBottomRight{
padding-left: 400px;
}

rivkawaxman closed this as completed Jan 30, 2018

c0deflow mentioned this issue Mar 21, 2018

PDF font size growing up after creating the pdf [.NET CORE 2.0] #32

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

using font-face #24

using font-face #24

rivkawaxman commented Jan 25, 2018 •

edited

Loading

rdvojmoc commented Jan 26, 2018

rivkawaxman commented Jan 26, 2018

rdvojmoc commented Jan 29, 2018 •

edited

Loading

rivkawaxman commented Jan 29, 2018

rdvojmoc commented Jan 29, 2018

rivkawaxman commented Jan 30, 2018

kgrosvenor commented Nov 21, 2018 •

edited

Loading

ghost commented Jan 22, 2020 •

edited by ghost

Loading

hamedapp commented Aug 5, 2020

sangib58 commented Oct 31, 2022

using font-face #24

using font-face #24

Comments

rivkawaxman commented Jan 25, 2018 • edited Loading

rdvojmoc commented Jan 26, 2018

rivkawaxman commented Jan 26, 2018

rdvojmoc commented Jan 29, 2018 • edited Loading

rivkawaxman commented Jan 29, 2018

rdvojmoc commented Jan 29, 2018

rivkawaxman commented Jan 30, 2018

kgrosvenor commented Nov 21, 2018 • edited Loading

ghost commented Jan 22, 2020 • edited by ghost Loading

hamedapp commented Aug 5, 2020

sangib58 commented Oct 31, 2022

rivkawaxman commented Jan 25, 2018 •

edited

Loading

rdvojmoc commented Jan 29, 2018 •

edited

Loading

kgrosvenor commented Nov 21, 2018 •

edited

Loading

ghost commented Jan 22, 2020 •

edited by ghost

Loading