I have an element (e.g. tag). A have set a font-face rule at the root of the document, let's say Noto Sans. Then I have another component which needs another font name, setting it to Proxima.
1st scenario.
Within the component's shadow dom
#font-face{
font-family: 'Proxima';
src: url(path/to/font.woff2) format('woff2')
}
:host{
display: block;
font-family: 'Proxima';
}
Does not work. I even tried adding !important but still won't work. Noto Sans overides it.
2nd. I added two font-face, Noto Sans and Proxima,rules at the root document, tried using them both but gets overridden by the former.
Any tips or am I having mistakes in handling my component
Related
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 am working with an internal administration tool that runs on Javascript that has the following in its core CSS file:
* {
font-family: Helvetica, Verdana, Arial, sans-serif;
}
Based on my research, this would be the lowest level of specificity. Anything would override that setting.
My goal is to change the font on the entire page to improve legibility. I am using Python / Selenium webdriver with Firefox to modify the tag's style setting with this Javascript, which results in the following inline HTML:
document.getElementsByTagName("body")[0].style = "font-family:Lucida Fax;";
<body style="font-family:Lucida Fax;" >
The change is propagating to the sheet. However, the font doesn't change. Under the "Computed" view, I see the following:
font-family: Helvetica,Verdana,Arial,sans-serif;
------------------------------------------------
* > Helvetica,Verdana,Arial,sans-serif core.css;
BODY[1].style > Lucida Fax element;
When I disable the * CSS property in the Firefox Inspector after making the change, the font change will occur. So something is overriding my inline style change.
I am in a blackbox environment as an end user, so I can't account for everything happening.Could this be caused by an actively-running Javascript that is forcing the stylesheet to take precedent over inline styles?
The "style" property on the <body> tag only affects content that's in the body directly. All the various <div> and <span> and etc. tags in your HTML are matched by the CSS rule. (Without that * rule then the natural behavior is for font information to be inherited; inheritance doesn't happen for all CSS properties however.)
What I've seen recommended instead is to set everything to "inherit" and then apply the setting to the <body>:
body { font-family: Whatever; }
*, *::before, *::after { font-family: inherit; }
That allows you to have overrides for some elements (like various sorts of form widgets or whatever).
I need to implement dynamic css styles for certain elements based on a user's role or group identity.
My idea is to fetch the required dynamic values (hex colors, background image urls) from my database, write them to the page, then use jQuery to add styles with these values to the elements that are to be dynamic. Seems straightforward. Has anyone done it this way?
Another way is to somehow override external style sheet styles with styles defined in a header style block. Would this work? Can you share css styles between a style block and an external sheet? Can the shared styles cascade?
You can mix internal and external styles. Internal, external, and inline styles all cascade, with inline styles taking precedence over internal styles, which themselves take precedence over external styles.
If you want to dynamically change styles based on user permissions, why not add the relevant classes and id in the body tag, e.g.
<body id="admin" class="group-1">
And then use CSS to separate the roles and groups out, e.g.
#admin{
background-color: rgb(255,155,105);
}
.group-1{
font-family: sans-serif;
}
.group-2{
font-family: Roboto;
}
You could go one step further and use a CSS pre-processor like LESS to style several groups for individual roles, e.g.
#admin {
background-color: rgb(255, 155, 105);
.group-1 {
font-family: sans-serif;
}
.group-2 {
font-family: Roboto;
}
}
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;
}
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.