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

CSS: How to tell the features a certain ttf font has?

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.

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;
}

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.

TinyMCE default font size

How can I set the default font size of tinyMCE , I've a tinyMCE editor and I tried all the things to change the text-size to 14px and it always shows 10px. I'm using rails 3.1 and tinymce
major Version: '3', and minor Version: '4.4'.
I changed tinymce/themes/advanced/skins/default/content.css font-size to 14px
I even add
tinyMCE.init({
theme_advanced_font_sizes: "10px,12px,13px,14px,16px,18px,20px",
font_size_style_values: "12px,13px,14px,16px,18px,20px",
});
and
body, td, pre { color: #000; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px; margin: 8px; }

You can load a custom stylsheet for the textarea:
tinyMCE.init({
content_css : "custom_content.css"
});
In there you can style your fonts like on a normal page.

You need to empty you browser's cache. Sometimes you have to do that to ensure TinyMCE is not using an older file.
[As #Jona and #Nikola said, please make sure you are referencing a new CSS flle].