Is the following true:
I set the font-family on an element to sans-serif. My (Chrome) sans-serif font is Helvetica. There is a chance this web-page, when opened in another browser with a potentially different operating system, will render a different font-family as its sans-serif font-family may be different to mine e.g. cailbri
A font-family like Helvetica is a universal font-family that renders the same (dimensions) in all browsers.
The best way to ensure that the same font is used in all browsers is not by just setting the font-family to a generic value (like sans-serif), but rather using the #import or <link rel="stylesheet" href="font.css" /> in your HTML code. In the href part of the link, and after the #import, you would place the URL to your font. For example, if I want to use the font "Ubuntu" (which is also a name of a Linux distro), and this font is served by Google Fonts, do this:
CSS:
#import url(https://fonts.googleapis.com/css2?family=Ubuntu&display=swap)
HTML:
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
You can then in your CSS (for the "Ubuntu" font) do this:
font-family: "Ubuntu", sans-serif; /* It is always smart to add the type of font at the end. In this case, sans-serif */
This ensures that all browsers that read HTML and CSS can use this font, and that it will not vary across common browsers.
The first one is true. Actually, sans-serif is a large family of fonts. If the user (1) doesn't have the font you wanted in their computer, or (2) the user set their preferred font in their browser settings, the font will be different.
The second one may be true, but an extreme example is, the user deletes the Helvetica font from their computer. Some of the ways to avoid the problem is (1) set a fallback font, or (2) request a font on-line, like font.googleapis.com.
Related
Title isn't accurate but I guess good enough.
Synopsis: Company product uses bootstrap and our default font has been set to a specific free font; so all #site-font, #site-font-bold, etc are all pointing to specific woff files.
We have clients that we customize for. One client wants Arial font for most everything. I cannot seem to set #site-font-bold to Arial Bold - it displays Times New Roman.
How can I set all the #site-font-xxxx variables to various Arial fonts?
I used this for bold:
#site-font-bold: "Arial Bold";
Is it that Arial Bold should be something different? I tried ArialBold - no luck.
You can't specify Arial Bold as a font because the Bold variant comes under the Arial family and will be chosen by the browser when you have a font-weight: bold or similar property. I don't know what generator you are using but try setting Arial as the value for #site-font-bold and see if the bold text is displayed correctly.
For a project I download a template. In its style.css font family was defined as
body {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}
arial , sans-serif, Helvetica Neue are different font families then why font-family in css is defined as above.
Not all browsers support all the fonts.
So, giving multiple font families select the font that is supported by the browser, starting from the first font. If first font is supported then it is used, otherwise it checks if next font is supported and so on. The leftmost font that is supported is used.
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
In this case, Lato is not supported by all browsers. So, next font Helvetica Neue is checked.
You'll also notice that the last fonts are common, that are supported by all browsers Arial and sans-serif in this case.
FROM MDN
The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a #font-face at-rule.
Web authors should always add at least one generic family in a font-family list, since there's no guarantee that a specific font is installed on the computer or can be downloaded using a #font-face at-rule. The generic family lets the browser select an acceptable fallback font when needed.
It is a kinda like a backup if the browser won't support the first font it jumps
to the second
From W3 schools
The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
There are two types of font family names:
family-name - The name of a font-family, like "times", "courier", "arial", etc.
generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
http://www.w3schools.com/cssref/pr_font_font-family.asp
I have created a landing page and needed a headline to be Avenir font. I got this to render properly in Chrome, but it does not work for any other browser. Is there something that I am missing?
CSS
h1,h2,h3,h4,h5, .section h2 {
margin:0;
padding:0;
color:#c41230;
font-family: AvenirLT-Black;
font-weight:normal;
}
HTML
<div class="ten columns title">
<h1 style="font:AvenirLT-Black">Additional Information</h1>
</div>
The font-family value is passed on through to the OS font subsystem.
Windows has two different font subsystems: DirectWrite and GDI. Chrome uses the older GDI; Firefox and IE use DirectWrite.
GDI doesn't have a way to represent more than two different font weights per family, so fonts that are extra-bold or extra-light get mapped to different family names, typically suffixed with "Black" or "Light" or "ExtraLight". DirectWrite, on the other hand, can represent multiple weights per family. So chances are DirectWrite is seeing your font as a font with the family name "AvenirLT" and an extra-bold font weight. So you want to do something like this:
font-family: AvenirLT, AvenirLT-Black;
font-weight: 900;
I've been looking around and can't seem to find a definitive answer to this.
How do I get font weights lighter than 600 to show correctly for textarea fonts?
Fiddle: http://jsfiddle.net/bk53K/
Code:
<textarea rows="7" class="randomText">Never gonna give you up Never gonna let you down Never gonna run around and desert you Never gonna make you cry Never gonna say goodbye Never gonna tell a lie and hurt you
textarea {
border: none;
resize: none;
font-size: 30px;
font-weight: 100;
}
Not all fonts are available in all weights. As the MDN states:
The font-weight CSS property specifies the weight or boldness of the
font. However, some fonts are not available in all weights; some are
available only on normal and bold. Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.
Behavior will also vary by browser, font, and client OS.
You get font weights lighter than 600 (or lighter than 700 for that matter) by declaring a font that has a typeface with such a weight. Most fonts that people normally use on web pages don’t have such typefaces. In your case, no font is declared, so browsers will use their default font for textarea, normally whatever the generic name monospace maps to. It is virtually certain that it does not have any weight smaller than normal (700).
The practical way to get lighter font weights is to use suitable Google fonts. Most Google fonts have just normal and bold, but some have other weights too. The weight 100 is very rare, though.
If you wish to use a light monospace font for textarea, you might consider Source Code Pro, which is a simple sans-serif monospace font with weights 200, 300, 400, 500, 600, 700, and 900. Example:
<link rel='stylesheet' href=
'http://fonts.googleapis.com/css?family=Source+Code+Pro:300'>
<style>
textarea {
font-family: Source Code Pro;
font-weight: 300;
}
</style>
<textarea>Hello world</textarea>
Here's a great article about font-smoothing that might do the trick. I find using -webkit-font-smoothing: antialiased; brings my fonts much closer to their desktop weights than without.
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 !