I'm currently fighting with an issue of styling. I am creating a PDF using IronPDF and generating the new PDF from HTML.
I have an instance where my fonts are being overridden. The style is the following:
.bbBlankPage {
font-size: 20px; /*14 pt*/
text-align: center;
font-family: Arial !important;
font-weight: bold;
padding-top: 55%;
text-indent: 40px;
}
When the HTML is generated and spit out into the PDF, the PDF shows the font as ArialBold. This is causing an issue with the font looking smaller and scrunched up in comparison to the original. I'm trying to overcompensate by enlarging the font size but the change in font family has me stumped. If I remove font-weight, it becomes ArialRegular, which isn't right either. I just want normal Arial font.
I work for IronSoftware as a support engineer.
Try using a local font by importing it from a folder instead of using the system font installed on the system. This isn't perfect though gives a better result.
Code example below references Arial:
<style type="text/css">
#font-face {
font-family: 'Arial';
src: url('./Arial.eot');
src: local('Arial'), url('./Arial.woff') format('woff'), url('./Arial.ttf') format('truetype');
}
.fontsforweb_fontid_1080 {
font-family: 'Arial' !important;
}
</style>
This issue will be resolved with a new rendering engine we are building for release in the first half of 2021.
Kerning is working for me well after the 2021.9 update of IronPDF
I propose the solution. is to download IronPdf 2021.9.3737 or greater from nuget and use the new IronPdf.ChromePdfRenderer Class which is functionally identical to desktop Chrome browser in 2021.
This fixed all of our rendering issues with HTML to PDF in C#, including kerning of the Arial typeface.
PM> Install-Package IronPdf -Version 2021.9.3737
Nuget.Org: https://www.nuget.org/packages/IronPdf/
Tutorial: https://ironpdf.com/docs/questions/ironpdf-2021-chrome-rendering-engine-eap/
MSDN Style Docs: https://ironpdf.com/object-reference/api/IronPdf.ChromePdfRenderer.html
I am using 2 #font-face on my index.css file with the purpose of using a font in regular weight and in bold weight as my default font in my entire application:
index.css file:
body {
padding: 0px;
margin:0px;
font-family: "LucidaGrande";
}
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrande.ttf) format('truetype');
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrandeBold.ttf) format('truetype');
}
Now, the regular weight seems to be working for the entire application, however, on an other part of my application I am trying to use the font in bold weight like this:
#presentation-text em{
font-size: 35px;
color: rgb(139, 59, 28);
font-style: normal;
font-weight: 900;
}
However the 900 i.e the bold weight is not being applied, still regular.
Am I using this correctly?
If you're using #font-face, never use local(...). The whole reason you're using #font-face is to ensure that you control exactly which font resource gets loaded for which (set of) font properties. The last thing you want is for the OS to black-box fetch you what it thinks the font is for the name you specified. Even if it really does find Lucida Grande for some user, there is zero guarantee it's going to be the same version you have installed on your development machine.
Interestingly that actually tangential to the real problem here: the way you've written your CSS right now means that, because you have the font installed locally, whatever follows local(...) will never even be looked at by the browser, similar to what happens when you're using font-family: serif, Times. The browser knows how to resolve the first thing, so it immediately stops: it already found what it needed to find.
Effectively your current CSS, running in a browser on your own machine, says this, as far as the browser is concerned:
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande);
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande);
}
So you're loading the exact same thing in both declarations. As CSS weights for the text shaper in the browser are entirely independent from the system text engine, the result is exactly what you're seeing: both rules declare the same font resource as the one to use when you say font-family: LucidaGrande, both with or without font-weight: 900.
Drop local(...) and it'll instead work exactly as you need it to.
Also, you'll want to turn those .ttf files into WOFF2 and then load those, because they're much smaller, as well as a promise to the browser that these are indeed unencumbered webfonts.
I am having problems getting my Icomoon custom fonts to load within my website.
Screenshot of Inspected Icon
I'm assuming that the greyed out "returnflight" reference indicates that my font files are not sourced correctly. I do not understand why that would be the case considering my /css/ and my /fonts/ folders sit at the same level.
My File Structure
My Styles Within global.css
#font-face {
font-family: "returnflight";
src: url("../fonts/returnflight.woff?5h0ljc") format('woff');
}
.fa {
font-family: 'returnflight' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-auto-intelligence-01:before {
content: "\e900";
}
Any help would be greatly appreciated
EDIT
I have removed all src's within #font-face except for .woff as suggested, but still experiencing the issue.
Net Tab Error
Upon enabling the Net tab within firebug I am seeing the following error which could be unrelated but I'm not sure. I was just brought in on this project and it is a robust piece of software. This seems to be related to bootstrap.
That 403 error will do it. Looks like you are either loading fonts from a different server (sometimes even www -> no www will do it, depending on server configs), the font files/folder don't have the right permissions, or you have something in .htaccess that is blocking access to certain file types.
I am working on a website that needs embedded fonts.
Everything looks great, except, if I delete the local Prelo fonts from my machine (backed them up) the fonts stop working in the browser. Of COURSE this is because there is an error in my code and I fix it and it works again.
(so the problem is... is there a work-around for "disabling" the local fonts or telling the browser not to look locally for fonts other than needed system fonts?)
Is there a way other than deleting the fonts locally to test in the browser? It seems that Chrome and FF default to my system fonts if they can't find the embedded fonts.
Thanks in advance!
Just rename the font you want to test, make sure its not a name you have locally.
i.e:
change:
#font-face {
font-family: System;
font-style: normal;
src: url(system.eot);
}
div {
font-family: System;
}
to
#font-face {
font-family: WebTest;
font-style: normal;
src: url(system.eot);
}
div {
font-family: WebTest;
}
Type Wonder will let you type in a URL and select a web font. Then it will show you what your page would look like with the new font. Pretty slick.
http://typewonder.com
I am using Google Web Font's PT-sans
font-family: 'PT Sans',Arial,serif;
but it looks different in Chrome and Firefox
Is there anything that I need to add so that it looks same in all browsers?
For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.
For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:
#font-face {
font-family: 'source_sans_proregular';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:
function setBrowserClasses() {
if (true == $.browser.mozilla) {
$('body').addClass('firefox');
}
}
Then in my CSS, I can say
body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:
body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
There are a few fixes. But usually it can be fixed with:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Sometimes it can be due to font-weight. If you are using a custom font with #font-face make sure your font-weight syntax is correct. In #font-face the idea of the font-weight/font-style properties are to keep your font-family name across different #font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").
I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.
css reset may fix the problem, I am not sure .
http://yuilibrary.com/yui/docs/cssreset/
I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother.
There is nothing you can do about it. good luck
To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.
i found this to be working great :
-webkit-text-stroke: 0.7px;
or
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
experiment with the "0,7" value to adjust to your needs.
The lines are added where you define the bodys font.
here is an example:
body {
font-size: 100%;
background-color: #FFF;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
font-weight: lighter;
-webkit-text-stroke: 0.7px;
As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.
To fix this, you can do the following:
First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:
https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js
Now that you can target a Browser/OS, create the following 'new' font:
#font-face {
font-family: 'Custom PT Sans';
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
font-weight: normal;
font-style: normal;
}
The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.
Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext
You may also rename your #font-face custom font-family alias.
Create a simple CSS rule to use that font targeting Browser/OS or both:
.mac .navigation a {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Or
.mac.webkit p {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Done. Just apply the font-family rule wherever you need to.
Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).
I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.
Set "Accelerated 2D Canvas" to "Disabled"
(In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)
Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.
On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.
The new fix (for me) appears to be:
Settings -> Show advanced settings... -> System
UNCHECK "Use hardware acceleration when available"
https://superuser.com/questions/821092/chromes-fonts-look-off
The issue might be more what we don't set in our CSS than what we do set.
In my case, FF is showing text in the default Times New Roman, while Chrome uses Montserrat as expected.
This happens to be because in Chrome I set Montserrat as the default, while FF has no default.
So, I think that some browser differences are rooted in the browser's configuration rather than in my CSS.