We Keep Coding

text glyph clip angular material font override

I'm having trouble with text glyphs getting clipped in angular material input lables. I have a custom font override happening that seems to be the source of the issue (if I set the font back to roboto the font no longer clips).
$custom-typography: mat-typography-config(
$font-family: 'Open Sans, sans-serif'
);
For context it was also clipping in the input text fields but I was able to fix that with this rule:
input.mat-input-element {
height:100%;
}
Has anyone come across this problem?

This seems to be an issue with Open Sans itself, see: https://codepen.io/winkerVSbecks/pen/jZKbze
font-family: "Open Sans", sans-serif;
height: 18px;
font-size: 16px;
padding: 0;
When input has padding 0 and the difference between height and font-size is less than 4px it seems to clip the text. I have no idea why it does this, but at least we know that this is not an issue caused by ng-material.

I work at Google on the Google Fonts team, and I've filed this at https://github.com/google/fonts/issues/1457 to track its resolution

CKEditor - my styles in editor.css aren't being applied

I'm trying to change the default font color / size etc in the area of my ckeditor instance, but it's not working for me.
In chrome inspector I can add this style to the header and it works:
.cke_editable {
color: #fff;
font-size: 14px;
font-family: "Calibri";
}
However when I add this to my editor.css it has no effect. I've tried at the start and at the end, with no success. When I reload and check the resources in inspector, the correct css file is being loaded. Why aren't my styles applied?
When I inspect the iframe the style tag in the header doesn't contain the styles either.

Figured it out by removing my config and re-adding it a part at a time.
The very first line was
fullPage: true,
I had copied this from another source which used fullpage. I don't need it so I removed it.
According to the documentation, having fullPage on will stop contentsCss being implemented. From the ckeditor documentation:
Note: This configuration value is ignored by inline editor as it uses the styles that come directly from the page that CKEditor is rendered on. It is also ignored in the full page mode in which developer has a full control over the HTML.
However, what they fail to mention is that having fullPage set to true will also stop any changes to editor.css from being loaded. Once it was removed my custom styles shined through
Handy tip:
contentsCSS does not have to point to a css file. You can put straight css in there instead of a url, like so
contentsCss: '.cke_editable { color: #fff; font-family: Calibri; font-size: 14px; } ',
This will apply these styles directly to the editor. This appears to be undocumented as the documentation only mentions stylesheet urls.

You need to change the content.css in the main ckeditor folder or add the following setting http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss

It sounds like your CSS styles are being overridden - try adding !important to each style like below:
.cke_editable {
color: #fff!important;
font-size: 14px!important;
font-family: "Calibri"!important;
}

changing text font through css for specific text in d3

I am using the d3 framework and I am trying to specify the font the following element using css (I want to use a custom font, that is why I am using css).
var anchorNode = svg.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
anchorNode.append("svg:circle");
anchorNode.append("svg:text").text("test");
I tried using
text {
font: 2px Arial;
pointer-events: none;
}
but this does not work for this specific text. I am assuming it is because the text is appended to the node. What would be the correct syntax to access the text in css?

Do you have a link to the rendered HTML or a jsfiddle?
It looks like your appending a class called anchorNode. You could possibly updating the CSS font for that class:
.anchorNode {
font-family: "Times New Roman", Times, serif;
font-size: 2px;
}

document.execCommand not obeying CSS

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.

JQuery Mobile - Override font-family themes for the whole body

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.