I have a font in .otf format (I've converted it to .ttf too). My source for the PDF to be generated is ImportFromUrl. When I request this URL directly from a browser, the font works with the following CSS...
#font-face {
font-family: DINPro;
src: url("http://myhost.com/css/fonts/DINPro.otf") format("opentype");
}
body{
font-family: DINPro;
}
This has no effect on the generated PDF though. How can I use this font? I've tried converting the font to Cufon but the text was blurry.
I added the following code when creating the ASPPdf object...
Doc.Fonts.LoadFromFile Server.MapPath("/") & "\css\fonts\DINPro.ttf"
Epic... it works!
Related
I am using OpenHTMLToPDF C# library to generate PDF from HTML.
Few words in my PDF generated doesn't have space in between letters. For example And Certificate.
There is no space between letters A & n, r & t
Below is my sample code and the styles I have applied to my HTML.
I had the same problem, I solved it by using a different font for my html
use this property:
font-family: Arial, Helvetica, sans-serif !important;
in your body to change the whole font, hopefully this will help you out.
I'm trying to set a Roboto font variant in CSS - not working.
font-family: 'sans-serif-condensed'
I tried 'Roboto-Black' - not working also.
If I set the font-family to a font name that's in my /app/fonts folder - that works.
To apply font variant use either css properties like font-weight (bold, normal) and font-style (italic, normal) or provide the different font variants usually created by the authors of the fonts in separate font files.
With Roboto you have 12 different made font variants like Roboto-Bold, Roboto-THin, Roboto-Medium and others. You can use them with the file name as you mentioned in your post.
e.g.
app.css
.rb-black {
font-family: "Roboto-Black"
}
.rb-black-italic {
font-family: "Roboto-BlackItalic"
}
.rb-bold {
font-family: "Roboto-Bold"
}
.rb-medium {
font-family: "Roboto-Medium"
}
Will produce the following results:
Sample project can be found here
font-family in NativeScript supports three generic families as follows:
serif (ex. Times New Roman)
sans-serif (ex. Helvetica)
monospace (ex. Courier New)
So using sans-serif-condensed won't produce the expected results.
I've included OpenSans-Light.ttf in source. If I added either font-weight: lighter or font-weight: 200 it is not getting applied on PDF. Always the regular font style is getting applied.
Any solution/workaround would be much appreciated.
mPDF does not support multiple weights for a font face - just normal and bold
http://www.mpdf1.com/forum/discussion/1369/open-sans-problems-with-bold-font-weight/p1
One workaround is to use .light {font-family:Open Sans Light}
Here's an example of what you get:
Another solution, which gives the same result is to use font-faces like this:
#font-face {
font-family: 'Open Sans';
src: url("font/OpenSans-Regular.ttf");
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
#font-face {
font-family: 'Open Sans';
src: url("font/OpenSans-Light.ttf");
font-weight:200;
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
.normal{font-family:Open Sans;}
.lighter{font-family:Open Sans;font-weight:200}
As said by #Lyuba Evdokimova pdf generation engine might not support all properties related to the given font.
I believe all of them works fine with web_safe fonts.
You can find more about them here.
This is not the best solution, but it's a workaround.
You may use this CSS to replace for lighter font-weight:
text-shadow: -0.06ex 0 currentColor, 0.06ex 0 currentColor!important
I have uploaded the font onto my computer and I will upload it to the server but I don't know how to write it in my code. I want to use "Interstate" but only "Interstate Black Condensed."
I tried changing the weights or adding that in the name but it just goes to a default font. The only way Interstate works is if I just write "Interstate," but the bold works but it does not give me the black category.
.numbers {
font-family:Interstate;
font-weight: 300;
font-size:30pt;
text-align:center;
color:#3baa4d;
}
If you want to use the Interstate Black Condensed version of the font I would recommend using a tool to generate a font face declaration for it, while converting the file for web use. This generator should do the trick:
http://www.fontsquirrel.com/tools/webfont-generator
All you have to do is upload the Interstate Black Condensed file to that site, then include the font files it gives you in your project, then paste the font-face code at the top of your css file.
I have such problem: in all browsers font is what I want - "Helvetica Neue", but Firefox use second font in font-family list.
I checked it in Firebug:
/rule from Bootstrap.scss/
p → "Helvetica Neue",Helvetica,Arial,sans-serif
parent matched//
Here is screenshot of what I have in Firefox:
And in Chrome:
or my font is not valid for Firefox ?
The whole reason for font-family list of font types is that if the client machine/browser doesn't have the first font on the list available, it will use the second, and if the second is not available it will use the third.
EDIT:
If you really must use the font family you want, you will need to get the font file for it and load it. here is a link to the thread that discusses this:
How do I load external fonts into an HTML document?