I'm using Twitter Bootstrap for a site design and I would like all of the display fonts to use serif (rather than the default sans-serif) font faces. Is there some way to do this without having to recompile via LESS? I would really like to avoid learning LESS for something this basic.
If you don't mind changing the bootstrap.css, do a find & replace on:
"Helvetica Neue", Helvetica, Arial, sans-serif;
replace with:
Georgia, "Times New Roman", Times, serif;
If you don't want to do that, add this code to your custom CSS to override Bootstrap's.
body,
input,
button,
select,
textarea,
.navbar-search .search-query {
font-family: Georgia, "Times New Roman", Times, serif;
}
You have to change the LESS variable #baseFontFamily, it's default value is #sansFontFamily you juste have to set it to #serifFontFamily.
If you don't want to use LESS you can still change those variables in the Customize menu in the docs.
May I also recommend adding headers in there too...
body,
h1,h2,h3,h4,h5,h6,
input,
button,
select,
textarea,
.navbar-search .search-query {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2.2em;
}
It depends on whether you use Bootstrap by CDN or you downloaded it.
If you downloaded it, you must be having either boostrap.css or boostrap.min.css
In those, You will find:
/*some element*/{
font-family: /*some font names*/
}
Replace it with the font you want, it's that simple!
Related
The option to toggle between sans-serif and serif using the font-setting button doesn't work when I change the fonts in style.CSS. Any suggestions?
This seems to happen when I change fonts for the main text, such as:
_output.yml
bookdown::gitbook:
css: style.css
style.CSS
p {
font-family: Arial;
}
But not all text changes. For example, if you change just the font for lists, the button still works fine.
style.CSS
li {
font-family: Arial;
}
The button itself seems to work fine, toggling between the class
.font-family-1 = sans-serif and .font-family-0 = serif
Currently, I think what you are observing is the expected behavior of the fontsetting gitbook plugin.
The button itself seems to work fine, toggling between the class .font-family-1 = sans-serif and .font-family-0 = serif
When you click on the button, the html root node of the book change class between .font-family-1 and .font-family-0
If you want to change the default font-family used for the book, you can customize css to override the default which is
.book.font-family-0 {
font-family: Georgia, serif;
}
.book.font-family-1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
The button will change the class to the root not of class .book and apply the correct css to the all book.
I'm working on project where I have to define font-family for the whole project and then I got a question in my mind that Which way is good to define font-family in my stylesheet?
Like this
*{
font-family: sans-serif,Verdana, "Trebuchet MS";
}
or
Like this
body{
font-family: sans-serif,Verdana, "Trebuchet MS";
}
body is better.
I would actually use:
html{
font-family: sans-serif, Verdana, "Trebuchet MS";
}
Whether you use html or body, it does not really matter, but I have seen html more often
The universal selector (*) is extremely slow. It would be like finding every possible type of html tag and giving each of those the rule seperately
Is it possible to overwrite variables in SCSS for print?
I've some variables:
$baseFontSize : 12px;
$defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$defaultSerif : Times, "Times New Roman", serif;
I want to overwrite it for print for example
$baseFontSize : 10pt;
$defaultSansSerif: "Courier New", Courier, monospace;
$defaultSerif : Georgia, Serif;
In font family case we may create different variable $defaultPrintSansSerif and define css again for print. Because font-family might be use in 2 - 3 places in my all CSS. But in case of font-size. It's not possible to declare every class again in print css.
So i'm look for any way to overwrite my $baseFontSize from 12px to 10pt, or whatever size for print is. So font size in my CSS for print will change automatically.
ie.
Calculation SCREEN CSS PRINT CSS
$baseFontSize 12px 10pt
$baseFontSize * 2 24px 20pt
$baseFontSize * 3/2 18px 15pt
I don't see any problem.
Say you have a base/_variables.scss:
$baseFontSize : 12px;
$defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$defaultSerif : Times, "Times New Roman", serif;
$headerBackground: red;
$someOtherStuff : foo;
You begin your screen.scss with:
#import "base/_variables.scss";
And your print.scss with:
#import "base/_variables.scss";
$baseFontSize : 10pt;
$defaultSansSerif: "Courier New", Courier, monospace;
$defaultSerif : Georgia, Serif;
If your problem is that you have your screen styles included in your print stylesheet, there's not much you can do. You either have go through the nuisance of redeclaring all that require modification or separate the screen and print styles (which also requires writing styles again).
But as for the font-size, there's actually a workaround.
It is a good practice to define font-size absolutely for the html element and relatively for the rest, e. g.:
/* Enabling inheritance of everything */
#import "compass/reset";
html {
font-size: 16px; }
html * {
font-size: 1em; }
h1 {
font-size: 2.75em; }
If you follow this pattern, all you need to resize all the fonts on your website is to change the font-size of the html element!
I have the following CSS declaration:
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
It isn't loading on the page. I'm having to add:
<style>
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;}
</style>
To the HTML to get it to work...This is true in chrome and safari...this one is weird, thoughts?
Note that all other CSS is working correctly...
So, !important worked, I'm not sure why. One note, I took out the extra families, it looks like this now:
body, body * {
font-family: Verdana, Tahoma, sans-serif !important;
}
But changing that had nothing to do with fixing it. The !important fixed it. Even though there isn't anything else changing the font-family at any other point in the CSS (refer to the working JS Fiddle). I attached a screenshot of the developer tools to show the inheritance.
have you tried to select following?
body, body * {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element in the body and the body itself */
/* OR just */
* {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element */
here is what you can do with CSS3:
http://www.css3.info/preview/web-fonts-with-font-face/
some font-families have to be enabled using `font-face, usually u do something like this
#font-face {
font-family: 'alex_brushregular';
src: url('alexbrush-regular-otf-webfont.eot');
src: url('alexbrush-regular-otf-webfont.eot?#iefix') format('embedded-opentype'),
url('alexbrush-regular-otf-webfont.woff') format('woff'),
url('alexbrush-regular-otf-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'alex_brushregular', Arial, "sans-serif";
}
This is an old post, but in case people have the same kind of problems and ended up here, I would suggest you make sure no errors in your css file (the easiest way to check is to comment out all settings except the font family or replace the css file with one that has just the font family setting). I just had the same problem and found the cause, after hours of frustration and no solutions from googling (that's why I came to this post; adding important! didn't work for me), was an error in my css file, so the browser skipped some settings including the font family. Although there're no errors in the css text shown in the original post, there might be one in the real css file.
Just try with the following example :
#font-face{font-family:'Arvo';src:url('fonts/Arvo-Regular.ttf')}
#font-face{font-family:'Erasmd';src:url('fonts/ERASMD.TTF')}
body { font-family: Arvo; }
(or)
body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; }
I think this may help you to resolve your problem.
Something like this can also happen if your browser is using a cached version of your CSS file.
A "hard refresh" using CTRL+F5 might help in that case, as suggested e.g. here and here, and e.g. in the Firefox docs.
In my experience I had issues because there was only text within buttons on the page I was testing.
Setting the button font-family to inherit fixed the issue. I'm guessing this might extend to other elements also.
body {
font-family: <your family>;
}
button {
font-family:inherit;
}
It May be due the font you are using is not installed in your browser(even some 'websafe' fonts).Try using generic-font(like sans-serif,cursive,monospace) to see if the you style decalartion is working..
I know that Alt is used for images in HTML, but is there a way to apply it to text via CSS?
Example:
input { color: #62161e; font-size: 25px; font-family: Lintel; }
So say Lintel does not display properly in some browsers. Is there an alt option to display Helvetica or something?
In CSS, you can specify a list of font families to follow and the browser will use the first one that it supports. So if you want to display Helvetica if Lintel is unavailable, you would simply do this:
font-family: Lintel, Helvetica;
Remember that if the font family has a space in it, you need to surround it in double quotes, like with the line I use for my website:
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
You can provide multiple fonts and the browser will pick the first available font.
Yes, you can chain fonts.
font-family: Lintel, Helvetica, Arial, sans-serif;
If you are defining both font-size and font-family I suggest you use the shorthand version:
font: 25px Lintel, Helvetica, Arial, sans-serif;
You can add more to this as well:
font: (weight) (size)/(line-height) (family);
The only two that are required are size and family.
font: bold 30px/25px Lintel, Helvetica, Arial, sans-serif;