I'm using a custom font (Mank Sans) for a website and it should look like that:
http://i.imgur.com/llwuwRn.png
(Google Chrome, correct behaviour)
However, when using Safari, it displays weirdly:
http://i.imgur.com/3QJA87w.png
How can i fix this problem ?
Thanks.
Edit: Here how i'm including my custom font:
#font-face {
font-family:'MankSans';
src: url('#{$font-path}/MankSans.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-stretch: normal;
unicode-range: U+000D-25CA;
}
Try something with this:
letter-spacing: 2px;
Not sure how it would look in chrome though. If it does look weird try detecting safari and then setting the letter-spacing.
var isSafari = /Safari/.test(navigator.userAgent) && /AppleComputer/.test(navigator.vendor);
if(isSafari) {
//set letter spacing using jQuery or JS DOM
}
http://www.w3schools.com/cssref/pr_text_letter-spacing.asp
Looking at a few other options as you mentioned my previous didn't work.
Option A:
Font-format could be wrong. .ttf is the standard for Safari and Android devices. You can check the details in this question: Safari font rendering issues
Option B:
This answer to the question above has a few more options incase it's a text-rendering issue: https://stackoverflow.com/a/31218373/4314753
Option C:
A few people have said that there is a problem with safari's rendering and what fixed their problems was to define the font-weight: font-weight: 400
Option D:
If it ultimately is a rendering issue and can't find another solution, a hack could be to have an image replace the text even if it isn't as friendly as it could be.
Related
Only sometimes, I get a PDF rendered from Puppeter without any content:
On the picture above, we are missing all the content inside the table element, as well as the content beside NIF and Número D-U-N-S.
It is an inconsistent error, because most of the times it works properly, but sometimes not.
Here you can see the way we launch Puppeteer:
const launchParams = {
args: ['--no-sandbox', '--disable-setuid-sandbox', 'displayHeaderFooter', 'preferCSSPageSize', 'printBackground']
};
// Launch the browser and create a page
browser = await puppeteer.launch(launchParams);
const page = await browser.newPage();
requestOptions.timeout = 0;
requestOptions.waitUntil = 'networkidle2';
await page.goto(urlOrHtml, requestOptions);
await page.emulateMedia('print');
The font color is black (as I said, most of the times it works well and you can see the text).
I'm seeing the same issue. I am not sure (came here for an answer), but I have an hypothesis.
In my case, I am using web fonts, and I explicitly chose https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&family=Roboto:ital,wght#1,400&display=block, meaning I get font faces like
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
font-display: block;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
Using font-display: block. See mdn.
Also, there is no fall-back font:
body {
…
font-family: Roboto;
…
}
I really want that font, consistently, and not some fall-back.
font-display: block "Gives the font face a short block period and an infinite swap period.".
Font block period
If the font face is not loaded, any element attempting to use it must
render an invisible fallback font face. If the font face
successfully loads during this period, it is used normally.
So, the hypothesis is that, sometimes the web font loads in time, and sometimes it does not. When it does not, the invisible font is used.
I added ttf fonts to my lambda, in the hope this would force their use, as they are always available, avoiding this timing issue. But, that doesn't work.
Next, I'll try to remove the web fonts from the CSS. Will that force using the TTF fonts?
Facing issues while downloading the font for the first time(after clearing cache), post reloading for 2/3 times error is not there and font loaded properly.
Failed to decode downloaded font: /Roboto-Regular-webfont.ttf /Roboto-Bold-webfont.ttf
As per research tried few workarounds but still facing the issue
tried updating the format('woff') to format('font-woff')
tried with absolute url : https://example.com/Roboto-Regular-webfont.ttf
I assume you want to host the font yourself.
The easiest thing to do is to use the google webfonts helper: https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin
In your case something like this should be sufficient:
/* roboto-regular - latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
url('roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
You can download the files from the google-webfonts-helper or directly from google fonts.
I have an arbitrary ttf font that I want to use in my web application.
How can I tell which characteristics like "bold", "italic" are available in this font?
Background: I want to avoid that I have to try out all the different settings like:
font-weight: bold;
font-style: italic;
in order to see which one has an effect on the appearance of the font on my web site.
Let me cut that thought short: that's not how ttf (or in fact, any) font resources work. Bold, Italic, etc are separate "physical" files on your harddisk, and the kind of style toggling you see in Office applications, text editors, etc. come from the OS showing you an abstraction: it only shows you the font family name, rather than the list of individual ttf or otf files, and then shows you style/weight UI controls, which trigger an actual font resource switch from one file to another without you ever noticing.
So: if you have a single ttf file, that file represents only one, specific , font face expression (regular, bold, italic, bold-italic, or even something more detailed based on OpenType metadata properties).
To make things even more fun: if you want to use fonts in CSS, CSS doesn't even care about what a particular font resource is. It completely relies on you to tell it what it is, and you get to lie: CSS will believe you. If you use an #font-face rule you get to say which font file to use for a particular combination of font-* properties, so you're in the driving seat:
#font-face {
font-family: MyFont;
/* CSS has no idea, nor does it care, what this font "really" is */
src: url('myfont-Bold-Italic.ttf') format("truetype");
/* so we tell it this font is applicable to weight:100, or ultra-thin */
font-weight: 100;
/* and we also tell it that this font is applicable in "normal" style */
font-style: normal;
}
And presto, as far as the page styling you just defined, using MyFont with normal style and weight 100 will load whatever ttf resource you said it should use. The CSS engine does not care or even know that the resource you told it to use is "actually" a bold italic expression of the font family. All it knows is that you said this font had to be used for weight:100/style:normal so that's what it's going to use in something like this:
body {
font-family: MyFont, sans-serif /* weight mismatch, so this will probably fall through */
}
h1 {
weight: 100; /* weight/style match: this will use myfont-Bold-Italic.ttf! */
}
2019 edit
OpenType introduced font variations (FVAR) which allows a single font to encode an infinite spectrum of variable vector graphics, which means that if the browser you're targeting supports FVAR OpenType, you can now load a single font as your #font-face instruction, with a new format string that indicates it's variable, and instead in your normal CSS indicate which specific variation you need by specifying the font-variation-settings property:
#font-face {
font-family: MyFont;
src: url('myfont-Bold-Italic.ttf') format("truetype-variation");
/* no weight or style information here anymore */
}
body {
font-family: MyFont;
font-variation-settings: 'wght' 435;
}
h1 {
font-variation-settings: 'wght' 116;
}
While "plain" CSS only supports 9 font weights (100 through 900 in steps of 100), variations can use values from 1 to 1000 in steps of 1.
Each and every font (if weights available) comes in a separate true type format file for each and every weight of the font.
e.g.
Roboto.ttf
Roboto-Italic.ttf
Roboto-Bold.ttf
Therefore, you need to specify which is which in Your CSS file like so:
#font-face {
font-family: 'Roboto';
font-weight: normal;
url('fonts/Roboto.ttf') format('truetype')/*ttf*/;
}
#font-face {
font-family: 'Roboto';
font-weight: bold;
url('fonts/Roboto-Bold.ttf') format('truetype')/*ttf*/;
}
#font-face {
font-family: 'Roboto';
font-weight: lighter;
font-style: italic;
url('fonts/Roboto-Italic.ttf') format('truetype')/*ttf*/;
}
In your case, you can view the particular file directly by clicking on it twice in the Windows/MacOS/Linux explorers.
If you want to use a third-party software solution, I suggest that you give opentype.js a look.
I have a contentEditable <div> which I'm turning into a very simple text editor. When 'tab' is pressed, a bullet point is created using document.execCommand('insertUnorderedList'); which works great. Here's the problem though:
HTML:
<div id="wysiwyg">
</div>
CSS:
#wysiwyg{
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-weight: normal;
font-size: 0.9em;
color: rgb(70,70,70);
}
#wysiwyg ul li {
font-family: 'Calendas Regular', serif !important;
font-size: 1em;
}
When I create a bullet point using the document.execCommand('insertUnorderedList'); though, it gets styled as if it were just any old text inside my #wysiwyg, not as if it were a bullet point, but if I insert some initial text (via HTML, not via using the contentEditable-ness) in the #wysiwyg then it styles bullet points correctly.
Any ideas what's up?
Thanks
Unfortunately, it seems like this is caused by a bug in WebKit-based browsers (see this answer). I tried Safari, Chrome, and Firefox, and the issue only appeared on Chrome and Firefox. Unfortunately, there is not much you can do besides not adding styles, waiting for a fix, or removing the extra HTML. If you would like to remove the extra HTML, you may find Working around Chrome's contenteditable span bug helpful.
Note: This was copied from my comment.
I recently added jQuery mobile to my website.
However, the jQuery theme broke my previous fonts. While most of my page works great, especially the nice jQuery Mobile sliders, I am having a real problem with the fonts.
I have custom fonts set and they work correctly without the jquery mobile css. However, once I include the jquery mobile css it overrides my fonts.
I have tried adding data-role= "none" to the body and the divs but that did not help.
I have also tried adding data-theme = "none" but that also does not help.
Is there a way to disable jQuery custom font-family theming on the body of my page?
Thanks for the help.
Here is my CSS for replacing the entire applications font with Roboto, the Android 4.0 ICS font.
#font-face {
font-family: 'RobotoRegular';
src: url('../font/roboto/RobotoRegular.eot');
src: url('../font/roboto/RobotoRegular.eot?#iefix') format('embedded-opentype'),
url('../font/roboto/RobotoRegular.woff') format('woff'),
url('../font/roboto/RobotoRegular.ttf') format('truetype'),
url('../font/roboto/RobotoRegular.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Android jQM Font Style Overrides */
body * {
font-family: "RobotoRegular" !important;
font-weight: normal !important;
}
You may have to target specific elements too if the above is not enough. I had to also include the following:
.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-bar-a,.ui-body-a,.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a$
font-family: "RobotoRegular";
}
I hope you come right. Good luck.
I would inspect the element and find out exactly where the fonts are being specified for example I just found that font's are specified here:
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button
So you can override that in your own stylesheet by specifying the same selector and presenting your own fonts :)
From what I understand... jQuery mobile might just send his own css fonts into your mix. If you have a css file with the font set :
Try some testing by adding !important for your font styles.
Hope this will help you figure out a solution :)
Thanks to the help by agrublev and darryn.ten the following worked for me:
Here are examples to change the shadow of the body and fonts:
.ui-body-c,.ui-dialog.ui-overlay-c{
text-shadow: 0pt 0px 0pt rgb(0, 0, 0);
}
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button{
font-family: Helvetica, Arial, sans-serif, Verdana;
font-size: 12px;
text-shadow: none;
color:black;
}
creat your own css for jquery mobile and override font family give your own font family
jquery mobile uses themes. Hit http://themeroller.jquerymobile.com/
set the font in the "global" tab (for me: Raleway, Verdana, etc), download and install the theme and you're set.
For jqmobile, you need to use your theme css, jqm icons, and jqm structure INSTEAD of the usual single jqm css.
overriding stuff in css may get you in different trouble with different browsers... And that's NOT the point with jquerymobile.