The width of the space character (char code 32) varies in my text. This occurs in Firefox and Chrome. You can see the difference between the fullstops and C's in the below screenshot.
Relevant CSS:
#font-face {
font-family: "NewsGothDmBTWXX-Demi";
src: url('/wp-content/themes/bluedot/fonts/NewsGothDmBTWXXDemi/font.woff2') format('woff2'),
url('/wp-content/themes/bluedot/fonts/NewsGothDmBTWXXDemi/font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p {
font-family: "NewsGothDmBTWXX-Demi", helvetica, arial, sans-serif;
font-size: 20px;
text-align: left;
}
What I've tried:
Checked that I don't have the custom font installed on my machine.
The spaces are even when using the fall back sans-serif font
The spaces are definitely the same characters (asci 32)
Changing various properties like letter-spacing, font-kerning and text-rendering
The issue was due to being displayed wider than a regular space.
This was difficult to pick up on as viewing the source in both Firefox and Chrome didn't display the - I only picked up on this when copy and pasting from view-source to an IDE.
Related
I'm hosting my own fonts, but I've also created a fiddle linking to Google fonts and the problem remains.
All browsers change the weight of the font in the H tags.
I find this a bit disconcerting particularly when in my case I'm specifying the font file that should be used.
If for example I set, both <h3> and <p>, with font-family: 'robotoregular'; and use the same exact font-size in both cases, I would expect the same exact result in both of them. Instead, what the browsers produce is a bold version of the font in the <h3>, and the only way to set it right is to specify the font-weight, which shouldn't be necessary if I'm already indicating a specific font file.
Is this behavior to be expected, and why does this happen?
Here's a Fiddle
#font-face {
font-family: 'robotoregular';
src: local('robotoregular'), url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
local('robotoregular'), url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'robotoregular';
font-size: 27px;
}
h3 {
font-family: 'robotoregular';
font-size: 27px;
font-weight: normal; /*IF NOT INCLUDED, THE BROWSER WILL MAKE IT BOLD*/
}
Browsers apply a wide variety of defaults. Headers get font-weight: bold, among other things (like margins).
If you want complete, total control, consider a reset stylesheet.
After googling several hours, I still cannot have custom fonts displayed in PDF generated by Odoo. Help much appreciated, please! Here is the complete story.
I created a custom report inheriting account.report_invoice_document. This is needed as invoices are customized to display extra information (like a Harmonized System Codes summary, for example). I was also asked to use a custom font to customize the layout of our invoices.
In this template, I added an inline style sheet and applied a font-face to the whole document:
<style>
#font-face {
font-family: 'My Font';
font-weight: normal;
font-style: normal;
src: url(data:font/opentype;charset=utf-8;base64,d09GRg<!--[ LONG BASE64 STRING ]-->DN6ag4) format('woff'),
url(data:font/truetype;charset=utf-8;base64,AAEAAA<!--[ LONG BASE64 STRING ]-->moOA==) format('truetype');
}
html, body
{
font-size: 8;
font-family: 'My Font';
}
</style>
Tuning the Invoices report to produce HTML, I'm able to get the expected results on screen in my browser (given the font is not installed on my computer running the browser). Pressing the Print button export the same report as a PDF file through wkhtmltopdf I get my invoice with the correct data, but not the right font family nor size.
Things I tested, without success:
use only WOFF
use only TTF
use both WOFF and TTF
direct PDF generation without primarily HTML display on screen
add a .mytest class in style an apply it to specific html tags
Still the same: OK on screen, not as expected as PDF file.
For experimentation, also tried to include Material Icon as follow:
<style>
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('data:font/truetype;charset=utf-8;base64,AAEA<!--[ LONG BASE64 STRING ]-->ABc=') format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
</style>
and later adding this somewhere in the template.
<span>TEST <i class="material-icons"></i></span>
Same as above: works well on screen and displays "TEST" + a smiling face icon, works partially on PDF and only displays TEST without the face icon.
I'm stuck there. Could someone help?
Thanks.
I created a font with icomoon
and I wanted to use ligatures. Currently all my ligatures have hyphens in the ligature code.
For example: my-ligature
So when I use
<i>my-ligature</i>
It works as expected in Firefox and IE but not Chrome.
When I add a or any other character like
<i>my-ligature </i>
<i>my-ligature </li>
It also works in Chrome.
As soon as I replace the hyphen in the ligature code with something else like an underscore it works in Chrome as expected (no whitespace etc. necessary)
Is this a Chrome Bug or are hyphens not allowed here?
You'll find a demo of the whole thing here (made with a standard icomoon icon)
http://www.swisscocktailblog.ch/icomoon/demo.html
EDIT:
As requested the css for the ligatures (it's the one used in the demo)
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?6mfq3a');
src:url('fonts/icomoon.eot?#iefix6mfq3a') format('embedded-opentype'),
url('fonts/icomoon.ttf?6mfq3a') format('truetype'),
url('fonts/icomoon.woff?6mfq3a') format('woff'),
url('fonts/icomoon.svg?6mfq3a#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
i, .icomoon-liga {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Enable Ligatures ================ */
letter-spacing: 0;
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-wifi-full:before {
content: "\e600";
}
This bug has been identified elsewhere in Chromium, and more specifically affects ligatures named with non-alphabetical characters:
https://bugs.chromium.org/p/chromium/issues/detail?id=277677
It was marked fixed on that thread, but that doesn't seem to be the case.
On a hunch I checked whether the character was there but not visible by adjusting letter-spacing, and that worked. Something as negligible as the following will allow the icon to render:
i {
letter-spacing: .001em;
}
If you apply this style to your demo page via devtools and inspect the two i elements, you'll see that the second is rendered as a sliver as compared with the first. If you add text after each you'll see that the text begins at a different point. To avoid this you could write more CSS, something like this:
i {
display: inline-block;
letter-spacing: .001em;
width: 1.2em;
}
This should ensure that all of your icons render consistently in spite of the bug, and will scale properly with the font-size. But at this point it's probably best to accept as best practice that ligatures should avoid non-alphabetical characters.
While the bug's cause is still unclear, the above should provide a workable solution. The reason the additional characters allow the icon to render is that they provide the missing character spacing made up for here by the additional CSS.
We too have the same issue in Angular 4 when creating our own icon in chrome 59.0. using css property
{
white-space : pre;
}
does solve this.
Mozilla 54.0.1 its working fine.
I'm using #font-face to load the web fonts which is loading correctly:
#font-face {
font-family: 'HelveticaNeueLight';
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot');
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot') format('embedded-opentype'),
url('fonts/HelveticaNeueLight/helveticaneuelight.woff') format('woff'),
url('fonts/HelveticaNeueLight/helveticaneuelight.ttf') format('truetype'),
url('fonts/HelveticaNeueLight/helveticaneuelight.svg#HelveticaNeueLight') format('svg');
font-weight: normal;
font-style: normal;
font-variant:normal;
}
I also have another class to style and bold the text:
.BusinessLeftHeader{
font-family: HelveticaNeueLight;
font-size: 32px;
padding: 30px 0 5px;
text-align: center;
line-height: 1;
font-variant: normal;
}
Now, the problem is that font is not looking bold on iPad 2. It looks like text is showing with blurry effect or something like this.
I also have use this code to fix this problem.
-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
But again, still getting same problem. Text is not looking good on iPad 2. When I zoom in, it looks fine.
There are a few considerations here, firstly you have conflicting style settings:
-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
They should all be set to either antialiased or none.
You also state you wish to have a bold font, however you have not set the font-weight style and are using a font called HelveticaNeueLight which I imagine by its very name, is not bold nor include a bold version. At the least you will need to set:
font-weight:bold
Additionally, the issue is likely that the custom font you are using is not packaged with a bold version. In such instances a browser will typically 'interpret' how it should render a bold version using the available typeface, producing unexpected results. You may want to either include a bold version of the font or reference a specific weight if one is included.
When I apply a font-weight:bold style, the look of the font is too bold in Safari when compared to other browsers. I tried below css as suggested in some site but its still the same.
text-shadow: #000000 0 0 0px;
Screenshots of text rendering:
Chrome
Safari
Here's my css declaration:
p {
margin: 8px 5px 0 15px;
color:#D8D2CE;
font-size:11pt;
letter-spacing:-1px;
font-weight: bold;
font-family: LektonRegular;
}
#font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-regular-webfont.eot');
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('myfonts/lekton-regular-webfont.woff') format('woff'),
url(myfonts/lekton-regular-webfont.ttf) format('truetype'),
url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg');
font-weight: normal;
font-style: normal;
}
How can this be fixed?
Use -webkit-font-smoothing: antialiased;
The text-shadow trick doesn't work anymore.
For rendering bold text consistently across browsers, your font should explicitly contain bold characters. Otherwise, browsers probably try to make bold variants of characters based on their normal variants, and results are inconsistent across browsers since they likely have different algorithms for such conversion.
Also note that text rendering may be different on different platforms on system level (e.g. Windows, Mac OS). Such differences are OK and do not typically need to be fixed.
See also topic about -webkit-font-smoothing property.
The -webkit solutions won't work for the strong issue for many google fonts, custom fonts and fonts that don't have preset values.
The problem is that you need to specify the value of bold in the strong tags.
This can be done by two ways:
You can either include from Google Fonts or wherever your font is from in your header; it needs both the regular font and the bold font each should have a different font-weight number like 400 regular and 600 bold for example:
<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet">
Or use the aboves source code and paste into your own css like below:
#font-face {
font-family: 'XXX';
font-style: normal;
font-weight: 600;
src: local('XXX SemiBold'), local('XXX-SemiBold'),
url...
}
Use whatever your font is instead of XXX.
Then also in strong {font-weight:600;}
None of the answers here worked for me. Possibly because I am using the windows version of Safari for testing. I had to include the bold font in my CSS to fix the problem. In the case of the original question he would need to add the following (notice it uses the same font-family name)
#font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-bold-webfont.eot');
src: url('myfonts/lekton-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('myfonts/lekton-bold-webfont.woff') format('woff'),
url(myfonts/lekton-bold-webfont.ttf) format('truetype'),
url('myfonts/lekton-bold-webfont.svg#LektonRegular') format('svg');
font-weight: bold;
font-style: normal;
}
This worked in all browsers for me.
I found a solution for this particular issue. Actually any of above solutions dint work for me. So started checking the default webkit styles added by safari and found that -webkit-text-stroke-width was applied to body having value 0.5px. I set it to 0!important and solved the issue for me.