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.
Related
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
I feel like this should be an easy one but nothing I'm doing seems to be working. I may be targeting the element wrong or may be inputting the wrong CSS - I'm fairly new to the coding side of things so any help would be appreciated.
This is for a Wordpress site (page in question is here)
For the CSS component I have tried the following
.project.small.effect-1 .details.has-skills .text {
font-family: 'Oswald'}
and
.project.small .title {
font-family: 'Oswald'}
I've also tried adding !important to override any stylings set by the WP theme but that doesn't seem to be doing the trick either.
Is there something that I'm overlooking here?
Just use CSS:hover Selector. See the snippet below:
p{
font-family: Arial;
}
p:hover{
font-family: Courier;
}
<p>The text that will be modified.</p>
More on :hover selector here.
I was wondering if there is a way to give a page title a different color and font in the page tab. Something like:
title{ color: red; font: 12px tahoma;}
Just thought it would be fun to add into sites. I tried the above and it didn't work in my CSS file. Also tried giving it a class="title"giving it a CSS style of .title{ color: red; font: 12px tahoma;} but that didn't work either.
Answer is NO you cannot do that in any way....you cannot apply any styles to page title, btw you can just blink the titles
Blinking Titles
More Info On CSS Which You Are Using:
If you are declaring something like this
title{ color: red; font: 12px tahoma;}
You don't need to define any class as you are targeting specific title tag which is only 1 in your whole document
And if you are using .title than your CSS should be
.title{ color: red; font: 12px tahoma;}
The previous answers are correct, but, you can sort of get different fonts if they are defined in unicode. I don't know how to explore this, but, for example, there's the regularly written word javascript and then there's this title I coped from reddit.com/r/javascript source code: ππππππππππ - notice how they are slightly different.
Regular without code delimiters: javascript
Reddits title without code delimiters: ππππππππππ
You can copy past these characters anywhere and they are going to look different, because they are technically _different characters. There's a and then there's π - I grabbed this from the javascript word I previously pasted.
I don't know where these characters came from. I don't know how to type them. I don't know where one could copy paste them from.
But it proves an interesting point - any emoji can be used in these titles, you can copy paste from https://www.emojicopy.com/
If you are talking about the <title></title> section then no you can't style it.
If you are talking about the title of a page as in a header tag such as h1 or h2 then yes you can style those using normal CSS styling techniques such as
.title { color: #1A1A1A }
<h1 class="title">My Awesome Title</h1>
You can style the <title> tag, just add "display:block" or "display:inline" to it.
title {
display:block;
color:red;
font:12px tahoma, serif;
}
that way it should appear inside your page with the same content of the tab on the browser, for instance.
As for the Page Title, i have seen that it is possible to style it, someway. probably with shadow dom.
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.
Can anyone tell me how to replicate the styling of a <h3> tag using CSS?
From: "Appendix D. Default style sheet for HTML 4" http://www.w3.org/TR/CSS2/sample.html
display: block;
font-size: 1.17em;
margin: .83em 0;
font-weight: bolder;
Of course, Kendrick is right in saying that browsers may use different formatting than suggested by the W3C.
The formatting of the H3 tag is chosen by the browser, so you may be able to replicate it for one browser but it won't necessarily map to another one...
If you want to get Firefox's style for all browser's, you can look in the "computed styles" tab of firebug when inspecting an h3 element with it, and copy what you see in a CSS file.