I'm working with a form management system provided by an external provider (no support). You can adjust the presentation of the form via CSS. So I would like to use another font.
.CXHeader *,
.XItem.XSelect.XDropDown *,
.CXFooter *,
.CXPage,
.XPage *,
.xm-form.modern * {
font-family: 'AlwynNew';
}
I defined the font using #font-face, like this:
#font-face {
font-family:'AlwynNew';
src: url('ressource?mid=8&name=AlwynNew-Rg.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
The thing is, it works everywhere, expect for the dropdown list. But the code should be right.
What I tried so far
I tested it with color and background-color and these two work fine for the dropdown list. When the list isn't dropped down, it shows the right font. But if it's dropped down, colors are right, font is wrong.
I also tried !important (see mmh4all's Post) like that:
font-family: 'AlwynNew' !important;
It doesn't make a difference.
Answer to Hans Sagita's Post
First I tried:
*:after{
font-family: AlwynNew !important;
}
It didn't work. I tried .dropdown::after and .XDropdown::after, anyway, didn't work as well.
Code inspector
I also used the "code inspector" of the browser or however you call it. The names of the classes are correct and there is nothing overwriting the font.
(Translation: "Keine Schriftarten für das gewählte Element verwendet": "No fonts used for the selected element".)
And these are the fonts used showed by the code inspector when a <select> element is selected.
(Translation: "Verwendete Schriftart": Fonts used;
"Alle Schriftarten der Seite": All fonts of the page.)
But again: When I select an option element, the font tab says: "No fonts used for the selected element".
How do I set the font also for the <option> elements?
Use !important to your font or remove !important from the previous Fonts and make sure the css class is after your general font class
font-family: 'MyFont' !important;
Example:
body {
font-family: 'FirstFont' !important;
}
.dropdown {
font-family: 'SecondFont';
}
in this case SecondFont will not override the first one
body {
font-family: 'FirstFont';
}
.dropdown {
font-family: 'SecondFont';
}
but in this case it will override
or you can use !important for the second one too and it will work as well
#import url("https://fonts.googleapis.com/css2?family=Tajawal:wght#200;300;400;500;700;800;900&display=swap");
import font family like this
after that put the font family name
font-family: 'Tajawal';
can you try like this one first, just to check it is applied to the dropdown ?(this should be applicable to all UI)
*:after{
font-family: AlwynNew !important;
}
if it is work you can try to
.dropdown::after{
font-family: AlwynNew !important;
}
Hope Works, thank you
Related
What's the standard way to selectively define the font-size of one of the fonts among a gamut of font-families in CSS?
For instance, I'm trying to have my_font appear at 25px size via the following short-hand:
body{
font-family:helvetica,'my_font',arial,sans-serif;
font:helvetica,25px 'my_font',arial,sans-serif;
}
Needless to say, this doesn't work.
I believe the answer is no. The idea of a font-family is that it's a family of fonts not a single version or size.
Probably the best you can do is to just add font-size to each class or css selection that uses that font.
I think you should declare a class where you specify your font and your font-size and then use it specifically where you want. For example:
<div class="myclass">
.myclass {
font-family: 'myFont',
font-size: your-size
}
That would be the #font-face property. It's a property where you can define multiple font families and even modify a specific type of font to your preferences. It goes something like this
body {
#font-face {
font-family: 'my-font';
src: url(path-to-font);
font-size: 24px;
}
}
Read more about it here: http://www.font-face.com/#green_content
I realize this sounds absurd, but I'm unable to change the font-family for an input type=submit button.
I've tried referencing it by id and input[type=submit], adding a !important tag in the css, and changing it in the dev tools, but nothing works. However, other css attributes are working (such as width, margins, etc).
Is there a css solution I'm overlooking here or should I change paths and style through jquery?
codepen:
http://codepen.io/blakeface/pen/mEJWQj?editors=1100
#submit-button {
font-family: cursive;
font-size: 10em;
margin-top: 30px;
}
Similar question:
Input password font -family
Perhaps you are looking for something more like this?
font-family: Vivaldi;
The 'cursive' font family for HTML/CSS isn't like conventional cursive handwriting. Your code works and displays 'cursive' font.
In Chrome, the font size and font family of form 'select' fields is not following css rules as expected.
My stylesheets declare the font-family should be 'Open Sans', and font-size should be 14px.
But, it is reverting back to 'Lucida Grande' and 11px.
This screenshot of Chrome's developer tools sums it up - the Country select field is the item in question:
The following didn't fix the issue:
html, body, input, select, textarea, button {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}
Interestingly enough, it is only doing this on my machine (mac mini mavericks); testing on others (windows 7/8) in the same browser results in no error. Has anyone else dealt with this issue? Is there some setting necessary to override default values?
One near-solutionis to use the following to increase the font size to 13px on Mac - but this results in a massive 48px on Windows:
select {
font-size: -webkit-xxx-large;
}
Alternatively, the following would reset everything about the menulist appearance, to build up from scratch (font size/family take CSS rules or inherit):
select {
-moz-appearance: none;
-webkit-appearance: none;
}
Ideally a simple font adjustment wouldn't require resetting everything about the menulist...
Whenever something unexpected happens with the cascading aspect of CSS, and it's clearly not an error introduced by the developer, then there's a good chance it has something to do with the !important command. Someone may have applied !import to a style in some earlier part of the CSS. Try applying it to your styles to see if it has an effect.
How can I set font styles in css for the whole page? I set them for body {...} but it doesn't apply it to the tables in my page.
In Quirks Mode in some browsers, and in very old browsers, tables do not inherit some properties that they should inherit by the spec. So it looks like your pages are treated in Quirks Mode. Changing this by adding <!doctype html> at the start would be easy, but it could cause almost anything else, too.
The simplest way to handle this is to set the font properties on tables, too, e.g.
body, table { font-family: Helvetica, Arial, sans-serif; }
body { font-size: 85%; }
table { font-size: 100%; }
To set font styles for the whole page, on all elements, use the universal selector *, e.g.
* { font-family: Helvetica, Arial, sans-serif; font-size: 100%; }
(Some elements, like input and pre, have their own default font settings as per browser defaults, so inheritance does not apply to them.)
body {
font-family: /*what ever */;
}
Some browsers do not inherit font properties into table cells correctly.
so you can try
body, table, td {
font-family:/*what ever*/;
}
html{font-size:20px;}
you can try this one.
It includes tables automatically, if not set specifically somewhere more precise (for example with another element, class or id).
You can try to use a reset css file to reset all standard fonts and styles. Html5Boilerplate have a really good one, or you can try to be more specific:
body, table, td {
font: san-serif;
}
try
* {font-style:normal;}
Although I think you mean "font-family", since you only have three choices for font-style-- bold, italic, and normal, and having an entire page one style would be tough on the eyes..... If that's the case, here is the font-family example:
try
* {font-family:verdana;}
or
body {font-family:yourstyle;}
You should see changes throughout the whole page.
I have a asp.net link button and i have applied below css on it
.linkbutton
{
font-size:10px;
font-family: Arial,Helvetica,Sans-Serif;
font-style:normal;
}
When i mouse-hover the link button, the font-size grows!. Why it happens that way?
You probably have a rule for the hover or a href (whichever is being generated) that sets a bold or an font size value that is different.
You could try adding a rule like this:
.linkbutton:hover
{
font-weight: normal;
font-size: 1em;
}
It would be better if you could post some sample code as the answer is going to be an issue specific to your page / css files rather than a general piece of advice.
Run the app in your browser and start developertools (in Chrome press shift-ctrl-i, or download 'Firebug' for Firefox).
Then select the button and you can see which classes are inherited by that button and then you can fix the :hover problem.