I've Googled and searched, but I haven't been able to find much documentation on this. I'm aware that you can change the font size, but I'm wondering how to change the font itself. I believe the default is Times New Roman or something similar, but I want it to be the same font as the regular .btn class.
Does anyone know of a way to do this?
Thanks.
Override Bootstrap's css in your own custom CSS stylesheet:
.dropdown-menu li{
font-family:'my-awesome-font';
font-size:16px
}
If needed, add the '!important' keyword, to be sure that the style takes priority.
Like user doniyor said, sans-serif is the default
//Bootstrap default font
font-family: sans-serif;
Related
I've downloaded a big webtemplate with many different css and js files. Now my website looks good but there still some little things I want to change. Like the font-style, colors and other things.
Now my problem is that I'm not able to overwrite the css from another files.
I want to change the font-family of my webpage. Now the normal content inside my tags, the navbar and and and... they all got the new font-family. But every tag still got the old font family. I tried it with:
font-family: 'Roboto', sans-serif !important;
but this haven't changed a thing and I don't really want to overwrite the css files that came from the template.
is there a way that my custom.css gets more important then the other files? Or any other trick?
Change your selector to
* {font-family: 'Roboto', sans-serif !important;}
If you do not want to overwrite the css file, you have to find the class or the id of the elements you want to change in the css file of the template that you downloaded, then you can change it.
I've got this html:
<p>
<span class="fancify">Parting is such sweet sorrow!</span><span> - Bill Rattleandrollspeer</span>
</p>
...and this css (added to the bottom of Site.css):
.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
}
So, I would expect the quote ("Parting is such sweet sorrow!") to be italicized, and of a different font than the name of the quotee (Bill Rattleandrollspeer), since its span tag has the class "fancify" attached to it. The class should certainly be seen, as the file in which it appears references the layout file which uses the Site.css file.
What rookie mistake am I making now?
UPDATE
I thought maybe the problem was that I had added the new class in Site.css following this section in that file:
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
...but I moved it above there, and it is still not working, and not seen via F12 | Inspect element for the label in question.
I moved the reference to Site.css below the bootstrap.css file, which does indeed change the appearance of that text, but still not italicized, and still not seen in the element inspector...
UPDATE 2
Here's how the HTML is coming down:
<p>
<span>
<label class="fancify">Parting is such sweet sorrow!</label>
...and here's my css rule in Site.css:
p span label .fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
display: inline;
}
...but it's not being recognized. I consider this a breech of css/html protocol, and should be adjudicated by some world body. Then again, I could be making some silly mistake somewhere.
There could be an error earlier in the CSS file that is causing your (correct) CSS to not work.
Have you tried forcing the selectors to be in the front of the class?
p span label.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
}
Usually it will add more weight to your CSS declaration.
My mistake ... There should be no space between the selector and the class.
The same goes for the ID. If you have for example:
<div id="first">
<p id="myParagraph">Hello <span class="bolder">World</span></p>
</div>
You would style it like this:
div#first p#myParagraph {
color : #ff0000;
}
Just to make a complete example using a class:
div#first p#myParagraph span.bolder{
font-weight:900;
}
For more information about pseudo-selectors and child selectors : http://www.w3.org/TR/CSS2/selector.html
CSS is a whole science :) Beware that some browsers can have incompatibilities and will not show you the proper results. For more information check this site: http://www.caniuse.com/
Posting, since it might be useful for someone in the future:
For me, when I got here, the solution was browser cache. Had to hard refresh Chrome (cmd/ctrl+shift+R) to get the new styles applied, it seems the old ones got cached really "deep".
This question/answer might come in handy for someone. And hard refresh tips for different browsers for those who don't use Chrome.
I was going out of my mind when a rule was being ignored while others weren't. Run your CSS through a validator and look for parsing errors.
I accidentally used // for a comment instead of /* */ causing odd behavior. My IDE said nothing about it. I hope it helps someone.
Maybe your span is inheriting a style that forces its text to be normal instead of italic as you would like it. If you just can't get it to work as you want it to you might try marking your font-style as important.
.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic !important;
}
However try not to overuse important because it's easy to fall into CSS-hell with it.
For me, the problem was incorrect content type of the served .css file (if it included certain unicode characters).
Changing the content-type to text/css solved the problem.
I know this is an old post but I thought I might add a thought for people who come across a similar problem. I'm assuming that you are using ASP.NET MVC since you mentioned site.css. Check your Bundles.config file to see if you have BundleTable.EnableOptimizations = true; If you don't, then it can be your problem since this allows the program to be bundles and "minified". Depending on if you run in debug mode or not this could have an effect.
In addition to the solutions posted above, having gone through the exact same problem, make sure you check your HTML. More specifically whether you've properly labelled your elements, as well as class and id selectors. You can do this either manually or through a validator (https://validator.w3.org/).
For me, I missed the equal sign next to the class (<div class someDiv> vs <div class = "someDiv">, hence why no CSS property was applied.
I had a similar problem which was caused by a simple mistake in CSS comments.
I had written a comment using the JavaScript // way instead of /* */ which made the subsequent css-class to break but all other CSS work as expected.
Reasoning for my CSS styles not being applied, even though they were being loaded:
The media attribute on the link tag which was loading the stylesheet had an incorrect value. I had inadvertently set it to 1 instead of all. This meant the browser was ignoring those styles in that linked stylesheet.
Broken:
<link rel="stylesheet" type="text/css" href="css/style.css" media="1" />
Corrected:
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
For me, it was the local overrides in Sources -> Overrides.
A file gets saved locally whenever you change the styling of a page and chrome uses that file to override the server's css.
Clear the cache and cookies and restart the browser .As the style is not suppose to change frequently for a website browser kinda store it .
I also faced this issue. And this how it got resolved!
My css filename was gt.css. I was working on Visual Studio (eg.2017).
I went to solution explorer (press Ctrl+Alt+L) and searched gt.css
(enter your css filename). Right click on your css filename and then
on Bundler and Minifier (4th option curently) and then Re-Bundle file
(or directly press Shift+Alt+F).
Save any unsaved file, then empty cache and hard reload your web browser.
You can learn more about Bundler and Minifier here.
I had custom styling applied only on some elements (rows of table). I use Bootstrap. This was caused by having "table-striped" class. Once removed, all required rows had the custom class applied correctly.
A key point, here, may be the way the CSS rules propagate. Some rules are more important than others, so CSS rules do not always "cascade" in the way you might imagine that they ought to. This precedence of CSS rules is known as specificity - see (for example) description at w3schools.com
So, if you have a P element inside a DIV, you can control the font color with, say,
DIV P.highlight { color: red; }
If you have a later CSS instruction, like
.highlight { color: green; }
then it will NOT override the earlier instruction. This has confused me greatly, especially when loading multiple CSS files and naively thinking that I could override the earlier CSS.
I'm too used to setting the className attribute in JSX with React, but not too used to setting the class attribute in plain old HTML. So my mistake when spinning up a quick CodePen was setting a classname attribute, which sets no actual class whatsoever in plain HTML. The correction was, of course, to give the element a class instead.
Hard reload your chorome Shift+F5
Look at the spacing between selectors.
p span selects all span in p
span label selects all label in span
p span label selects all label in span in p
so label .fancify selects all .fancify in label
there is nothing of class fancify in label. label is on the same level, not above
so label.fancify
I want to use a single font named "Algerian" across my whole website. So, I need to change all HTML tags and I don't want to write different code for different tags like:
button{font-family:Algerian;}
div{font-family:Algerian;}
The method written below is also highly discouraged:
div,button,span,strong{font-family:Algerian;}
Put the font-family declaration into a body selector:
body {
font-family: Algerian;
}
All the elements on your page will inherit this font-family then (unless, of course you override it later).
*{font-family:Algerian;}
better solution below
Applying a single font to an entire website with CSS
The universal selector * refers to all elements,
this css will do it for you:
*{
font-family:Algerian;
}
But unfortunately if you are using FontAwesome icons, or any Icons that require their own font family, this will simply destroy the icons and they will not show the required view.
To avoid this you can use the :not selector, a sample of fontawesome icon is <i class="fa fa-bluetooth"></i>, so simply you can use:
*:not(i){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the tag name <i>, you can also do it for classes:
*:not(.fa){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the class "fa" which refers to fontawesome default class,
you can also target more than one class like this:
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
* { font-family: Algerian; }
The universal selector * refers to any element.
Ensure that mobile devices won't change the font with their default font by using important along with the universal selector * :
* { font-family: Algerian !important;}
As a different font is likely to be already defined by the browser for form elements, here are 2 ways to use this font everywhere:
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}
There'll still have a monospace font on elements like pre/code, kbd, etc but, in case you use these elements, you'd better use a monospace font there.
Important note: if very few people has this font installed on their OS, then the second font in the list will be used. Here you defined no second font so the default serif font will be used, and it'll be Times, Times New Roman except maybe on Linux.
Two options there: use #font-face if your font is free of use as a downloadable font or add fallback(s): a second, a third, etc and finally a default family (sans-serif, cursive (*), monospace or serif). The first of the list that exists on the OS of the user will be used.
(*) default cursive on Windows is Comic Sans. Except if you want to troll Windows users, don't do that :) This font is terrible except for your children birthdays where it's welcome.
Please place this in the head of your Page(s) if the "body" needs the use of 1 and the same font:
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
Everything between the tags <body> and </body>will have the same font
Ok so I was having this issue where I tried several different options.
The font i'm using is Ubuntu-LI , I created a font folder in my working directory. under the folder fonts
I was able to apply it... eventually here is my working code
I wanted this to apply to my entire website so I put it at the top of the css doc. above all of the Div tags (not that it matters, just know that any individual fonts you assign post your script will take precedence)
#font-face{
font-family: "Ubuntu-LI";
src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}
*{
font-family:"Ubuntu-LI";
}
If i then wanted all of my H1 tags to be something else lets say sans sarif I would do something like
h1{
font-family: Sans-sarif;
}
From which case only my H1 tags would be the sans-sarif font and the rest of my page would be the Ubuntu-LI font
in Bootstrap,
web inspector says the Headings are set to 'inherit'
all i needed to set my page to the new font was
div, p {font-family: Algerian}
that's in .scss
*{font-family:Algerian;}
this html worked for me. Added to canvas settings in wordpress.
Looks cool - thanks !
I'm new to CSS and maybe this question is trivial, but I have googled a little and I didn't find what I'm looking for.
I have declared a font-family for all my site. Now, I want to override the font family for some sections. I need the browser's default font family. How can I specify the browser's default font family in a css?
.browser-defatults {
font-family: ?????
}
Maybe I need to ignore all styles, how could I do this?
From what I know CSS doesn't offer an option to ignore all previous user styles for a property.
A work-around to your problem may be to use a generic font-family,
font-family: serif;
and let the browser choose.
i am using this css.
.text_style3{
font:normal 8px Helvetica;
color:#f7922c;
}
i want to it more small but after 10px this is not working. i have used 7px, 6px, 5px etc. but this is not working.
so how can i decrease size. this css is not working in mozilla.
That is a rule specified by the browser, usually 10px is the minimum font size allowed in a default Firefox installation.
Try it by going to Preferences -> Content -> Fonts & Colors -> Advanced -> Minimum font size.
Any font size smaller than 10px will be almost non-readable. The rule is there to ensure better accessibility.
Hope that helps.
You most likely have a CSS Specificity issue, where another style is overriding the style you were expeceting to see.
You can use tools like Firebug for Firefox to see what style the browser is using and where in your code it has come from.
You may need to make your font size declaration more specific, by changing the selector, or even methods like using the !important operator or making the style inline in your HTML.
See these links for more information on ways to handle this:
http://htmldog.com/guides/cssadvanced/specificity/
http://www.w3.org/TR/CSS2/cascade.html
are you sure you arent resetting text_style3 after this to have a normal style? it may be that you are styling div p or span (or any other containing tag) after you do this one.
if you are not, break the font style down to the following:
.text_style3{
font-weight:normal;
font-size: 8px;
font-family: Helvetica;
color:#f7922c;
}
You have some really good answers here, and they are probably correct (min-font size, use !important to override other CSS). I would add to try to use em's, once you get use to them, they seem to work alot better than straight px, and they resize better (my opinion) for users who need to increase the font size for readability.
Also worth noting is that Cascading Style Sheets are just that: Cascading
Levels:
stylesheet
style tag in file
style in code
1 will be overwritten by definitions in 2.
Both 1 and 2 will be overwritten by definitions in 3.
The closer the CSS is to the actuall item/text being displaied, the more important it is.
As Mauro wrote, if the tag you are doing class="text_style3" on has some other definition of text size this may also affect the display.
It may be that you have a minimum font size set in your browser, check Tools > Options > Content and choose Advanced in the fonts and colours section and change the minimum font size to None.
It is likely your minimum font size is set to 10px (smaller sizes are unreadable)