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;
Related
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.
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 think I have found a web rendering bug for Google Fonts in Mobile (iOS 8) Safari. It seems to me that Mobile Safari adds a tiny bit of letter-spacing to all text that uses Google Fonts, or that it uses another font. It doesn't matter which Google Font I try (Open Sans). It renders correctly on all modern browsers. Tested Android, FF, Chrome, Safari.
Try to load this page on a iOS device to see what I mean. See also see code and screenshot. See this link for live review: https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<h2 style="font-family: 'Roboto'">Roboto: Looks like it gets a bit extra line-spacing in iOS Safari, though this is not possible to find in web inspector</h2>
<h2 style="font-family: 'Arial'">Arial: Works fine in iOS Safari</h2>
</body>
</html>
I found the solution in this question: iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug
Mobile Safari is buggy rendering faux font weights, if you don't set the font-weight (to eg. font-weight: 400 or font-weight: normal) You need to specifically set the css font weight for it to render correctly in mobile safari.
This is the solution.
h2 {
font-weight: 400;
}
Note that Google Web Fonts only exports the regular weight (400) by default, which can lead to Mobile Safari (and other browsers) being forced to impose faux bold.
To explicitly export bolder weights, select "CUSTOMISE" in the Google Web Font font selection pane, manually check each additional weight you require, and use the updated embed code.
)]1
I've just had a similar problem which I resolved. I'm using the Lato font family from Google Fonts and Safari was adding letter spacing even when explicitly using font-weight: 600.
I imported only the font weights 400, 500 & 600, as these were the only weights I was using. After many hours I just decided to try also importing font weight 700 and this fixed my issue... Safari was no longer adding letter spacing when using font-weight: 600!
So even though I explicitly use font-weight: 600, Safari seemed to need the 700 variant as well to render the 600-weighted font properly. Very odd.
Need to specify font-weight
#font-face {
font-family: 'Din';
src: url('./DinRoundRegular.otf');
font-size: 16px;
font-style: normal;
font-display: swap;
font-weight: 400;
}
#font-face {
font-family: 'Din';
src: url('./DINRoundPro-Medi.ttf');
font-size: 16px;
font-style: bold;
font-weight: 700;
}
Looks like firefox have a troubles in understanding what i want from him. Chrome understands me very well.But firefox is declines to understand that want "normal" fonts when i write (font-face:normal) to a property.It makes my block "ligter" like font in parent block.WHY!?!?!?
#font-face{
font-family:Myriad;
src:url('../fonts/MyriadPro-R.ttf');
font-weight:normal;
font-style:normal;
}
#font-face{
font-family:Myriad;
src:url('../fonts/MyriadPro-B.ttf');
font-weight:bold;
font-style:normal;
}
#font-face{
font-family:Myriad;
src:url('../fonts/MyriadPro-L.ttf');
font-weight:lighter;
font-style:normal;
}
It is best to use the numerical weights of the font faces i.e font-weight:200 etc since each browser renders fonts differently, therefore you will see a bigger difference when loading bold/lighter as compared to 600/400 etc.
Find out which weights each fonts supports and use the numerical value.
Change the font family names to represent the different font weights eg Myriad Light, Myriad Bold, Myriad for more readable css and less confusion.
The value lighter is invalid for the font-weight property inside a #font-face rule (as the W3C CSS Validator would tell you). Use a numeric weight instead. The proper value should be found in the information provided by the font vendor.
I'm trying to use the Avenir Next Condensed font at a weight 100 (so very light). It works fine on all browsers I've tried apart from iOS where it shows up as italics. Any ideas how to fix this?
Here's a test page, when viewed on an iPad (or the iPad simulator) the text is in italics.
<html>
<style>
div {
font-family: 'Avenir Next Condensed';
font-weight: 100;
font-style: normal;
}
</style>
<div>Why is this italic?</div>
</html>
There's no font on iOS called "Avenir Next Condensed", there are however fonts named "AvenirNextCondensed-Italic" and "AvenirNextCondensed-UltraLight" amongst others. When you specify a font that doesn't exist it tries to fuzzy match against the fonts it has but it doesn't always get it right. Easy fix is just to specify the correct font: "AvenirNextCondensed-UltraLight" in this case.
There's a list of fonts available on iOS here: http://iosfonts.com/