I want to use a font for my website, I got the overall research and found variety of formats for fonts, Now i want to know that what is the standard format?
Or What are the standard formats?
.TTF (True Type Font)
.EOT (Embedded OpenType)
.OTF (open type font)
.SVG (Scalable Vector Graphics)
.WOFF (Web Open Font Format)
So far, I've used all of these formats, something like this:
#font-face {
font-family: 'Font';
src: url('Font.eot'); /* IE9 Compat Modes */
src: url('Font.eot?#') format('eot'), /* IE6–8 */
url('Font.ttf') format('truetype'), /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
url('Font.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('Font.otf') format('opentype'),
url('Font.svg') format('svg');
}
But in this case, the site is too heavy (size of all formats is almost 1MB) , So what should i do to be more optimized ?
Understanding Font File Types
WOFF / WOFF2
WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts.
SVG / SVGZ
ideal for mobile use
EOT
supported only by IE
OTF / TTF
The WOFF format was initially created as a reaction to OTF and TTF, in part, because these formats could easily (and illegally) be copied
ON THE OTHER SIDE:
Google Fonts offers this as a way to use their fonts.
SOME PERFORMANCE TIPS
Watch the file size
Fonts can be surprisingly heavy, so lean towards options that offer lighter versions. For example, favor a font set that is 50KB versus one that weighs 400KB.
Limit the character set, if possible
Do you really need the bold and black weights for one font? Limiting your font sets to load only what is used is a good idea and there are some good tips on that here.
Consider system fonts for small screens
Many devices are stuck on crappy connections. One trick might be to target larger screens when loading the custom font using #media.
In this example, screens smaller than 1000px will be served a system font instead and screens that wide and above will be served the custom font.
CONCLUSION:
Use OTF/TTF(all browsers) & EOT(I.E) for Desktop screens and use system fonts for small screens as they render faster.
And do consider google fonts. Best choice so far.
I just tested chrome (43) and firefox (37) and ie (10) - in all cases only one font format (respectively: woff, woff and eot) of the five was downloaded. Based on that small sampling, it seems* that including the various file types in your #font-face declaration doesn't have a negative impact on the user.
*If you happen to know how other browsers behave, let us know.
Related
I should use the font family Nunito [»] from the Google font library.
Due to some improvements such as site speed performance and concerns like independence, I need to run this technology locally.
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
I used this tool for this: google-webfonts-helper [»]
My minimum browser support (Modern Browsers) will be IE9+. In this case, when I select that option from the tool, it gives the following #font-face block.
/* nunito-regular - latin-ext_latin_cyrillic */
#font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: local('Nunito Regular'), local('Nunito-Regular'),
url('../fonts/nunito-v12-latin-ext_latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/nunito-v12-latin-ext_latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
Since the opening speed of the project was our primary goal, some questions were kept in mind.
As you can see, this code tries to load both woff and woff2 fonts.
The thing that comes to my mind is that since I included woff, why should I try to include woff2?
Wouldn't it be enough to include the woff type font set for all modern browsers (IE9+)?
Finally, I learned that IOS operating system based devices use ttf type font. As a matter of fact, when I use only woff, what is my minimum IOS support?
woff2 is the modern "standard font" and is supported on modern browsers. Woff2 is a more compressed font, so the woff2 files are smaller then the woff files. To support modern and some older browsers, both the woff2 and woff files has to be there. The priority is to ask if the font is present on the device, if not then present Woff2, and if woff2 fails, load the woff font.
If you look at the performance, the woff2 is the best choice. The woff is a fallback for older browsers.
Note that not both woff2 and woff are loaded. If woff2 is supported, the browser will only load woff2. On the other hand, if woff2 is not supported, then only the woff is loaded. Presenting both is the best option.
WOFF2 : modern browsers
WOFF : fallback if woff2 is not supported
TTF : Android-browser on Android 4.3 or older
EOT : Internet Explorer 8 or older
SVG : iOS-Safari 3.2-4.1. SVG webfonts are not supported anymore in most browsers
Note that svg files are huge files and bad practice if you're working on performance optimization.
So for best performance, and for very good cross browser presentation, woff2 and woff are enough. Your css looks fine, first check local, then try woff2 and then, if woff2 fails, a fallback to woff.
RE: your comment
To test the performance, I uploaded a Bootstrap page with Font-Awsome and Open-Sans. These webfont files are located in a subfolder on my domain. Each font has this priority:
src: local('Open Sans Italic'),
local('OpenSans-Italic'),
url('../webfonts/OpenSans/OpenSans-Italic.woff2') format('woff2'),
url('../webfonts/OpenSans/OpenSans-Italic.woff') format('woff'),
url('../webfonts/OpenSans/OpenSans-Italic.ttf') format('truetype');
The waterfall diagram shows that from each webfont only the woff2 is loaded. If you do not have to support the old 'Android-browser' on Android 4.3 or older then remove the TTF line from this css example.
I'm using Materialize CSS coming with the Roboto 2.0 font. Font looks horrible in Chrome 43 and Firefox 37. Surprisingly with IE it looks very good (full resulution):
Same happens with other fonts like Lato and Open Sans and also on my work computer (same videocard and OS, if matters). Is there something wrong in my setup (Windows 7 x64 + NVIDIA GTX 780 1920x1080 display)?
Nope, nothing wrong. There are a few things at play here that could impact how things are rendered.
The state of Web Fonts and #font-face is that browsers have varying support of various file types and those file types may render differently inside of the browser.
Commonly, you'll see these types:
.eot
.woff
.woff2
.svg
.ttf
Browsers don't typically just support one of these types, they'll support a few and so the order in which they're listed in the #font-face rule determines which file type is used. To add to that, these files have varying sizes for the same fonts so that has to be considered.
Chrome in particular renders .woff poorly it seems and if you're linking directly to fonts.googleapis.com css to use web fonts you're at Google's discretion as far as which font is used/loaded and the service seems to prefer .woff/.woff2 for file size reasons.
You can read a lot more about this in detail at places like CSS Tricks, MDN, and other Blogs. Using custom web fonts still isn't as easy as it should be but services like TypeKit help with some of the heavy lifting.
Now all that is just dealing with varying file types for fonts. There are still plenty of CSS properties that can impact how a particular font displays in a browser, both vendor specific and general use.
Finally, we can't take the Operating System out of the equation, as operating systems have their own Font rendering engines. Here's a good article from TypeKit about some of those differences.
TL;DR - No, it's not likely your Graphics Card (although that can obviously play a part in it). It's most likely the font file type being used in the browser. Seems that opting for .woff2 then falling back to .eot (IE) and .ttf will produce better quality than .woff or .svg.
Hope that helps!
Have you tried specifying font smoothing/rendering?
It generally makes a big difference in my experience.
body {
/* Better Font Rendering */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
It's font OS rendering issue. The simple solution is to use google font like:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
Or the complex solution, but often the best, is to use #font-face with every type of file format for every browser.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
In case anyone stumbles across this, it's a problem with the version of Roboto bundled with Materialize. A solution has been posted here https://stackoverflow.com/a/36803177/906360
Paul Irish suggests that the 'bullet proof' way to load fonts is to render EOT first, followed by WOFF, TTF, and lastly SVG.
#font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.eot'); /* IE 5-8 */
src: local('☺'), /* sneakily trick IE */
url('tagesschrift.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
url('tagesschrift.svg#font') format('svg'); /* iOS */
}
Source: http://www.html5rocks.com/en/tutorials/webfonts/quick/
However, he doesn't explain why this is the correct order (I assume performance). Can anyone elaborate? Also, what are the quality differences? E.g. SVG appears to produce better scaling/antialiasing in Chrome.
There is no “correct order”, and it’s not a loading order but a list from which each browser is expected to pick up one font resource to load – namely this first one they support (and it works that way).
EOT comes first because it is the only one that old versions of IE support, but its position is really not important.
WOFF is generally said to the optimal for web fonts. Whether that is true may depend on opinions, rendering routines, and fonts, but it’s anyway the conventional wisdom behind the order
TTF and SVG are listed last because some browsers support only such formats. If they were placed earlier, those formats might get used by some browsers that support WOFF as well.
I am trying to understand why Font Awesome comes with various font formats and was wondering if it is no harm for use if I had to keep only one or two.
I want to identify things that I won't need for downsizing.
I have yet to come across with documentation that explains this.
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
The reason why you have those different file formats is crossbrowser compatibility. There are many font file types, but I will tell you about the most common ones.
EOT
Internet Explorer pioneered support for webfonts since IE4, I believe; older versions, however, only accept .eot files: so, if you want to support IE<9, you have to include that. But .eot is a proprietary file type and is exclusively supported by Internet Explorer, also is very compact and has a kind of digital rights protection to avoid usage without license (the file can have an URL-binding, tying it to a specific domain).
SVG
When Safari implemented webfonts (version 3), they decided to go for the .svg, and Opera followed. Being Webkit Chrome also supports .svg. As you know, SVG is basically graphics in XML format: this made them convenient since the browser wanted to start supporting vector graphics, but it's not the best solutions as fonts in this format can be pretty large.
TTF and OTF
The more common .ttf and .otf are supported by all the modern browsers. These formats have been around since forever: TrueType replaced the bitmap fonts in the 1980s with an outline format, and OpenType is basically built on that standard with added typographical features (such as ligatures, variations and so on). These features are really important for a serious web-typography, but are still in the process of being supported:
See:
http://caniuse.com/font-feature
http://helpme.webink.com/customer/portal/articles/310119-what-browsers-support-opentype-features
https://www.typotheque.com/articles/opentype_features_in_web_browsers (2012)
WOFF
Lastly, .woff is basically .ttf/.otf with added compression (has a ~40% better compression than those) and metadata (for example, the license). It was specifically developed for the web by W3C for the web performance (bandwidth constraints) and has a suprisingly good support.
In conclusion, I don't think not putting them in the CSS will save you a few bytes, browsers are presumably smart on the fonts they download when encountering the #font-face property.
See: What fonts do browsers download when using #font-face
This all boils down to browser support.
For instance, woff doesn't work on IE8 or various mobile browsers, whereas eot does; eot only works on IE. svg doesn't work in IE8 or old versions of Android Browser.
If you don't need to support IE8 then you can probably get away with dropping the eot file altogether. Equally if you don't need to support various mobile browsers then you can probably drop the svg version too.
Different font formats are for different operating systems and browsers. I would suggest reading this article: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
I'm using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.
It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: http://www.google.com/webfonts
It's especially clear for the lower case g.
Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?
line-height and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.
Edit: By the way, I am aware of a similar question here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.
Edit 2: An example that at least for now shows the problem (left hand column, under the slideshow, Il Cerca Viaggi).
Edit 3: The problem seems to be limited to Windows although I'm not sure which versions.
Edit 4: I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.
Although it is not the solution I am looking for, I have found a possible solution that might work for others:
In my original style-sheet I have specified the font as follows:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
font-weight: normal;
font-style: normal;
}
This is causing webkit browsers to use the woff file / format.
Changing the order of the font specifications and removing the hash-tag after the svg specification (why is that there anyway?), causes webkit browsers to use the svg file / format:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.svg') format('svg'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This solves the problem, all characters are displayed correctly.
However, at least in Windows 7 64bit, the svg font is not as sharp as the woff font, it's kind of blurry so I will not be using this solution and am hoping for a better one.
To a similar question, one answer suggested that, while this appears to be a Windows font rendering issue specifically, hosting svg, eot and otf versions of a TrueType font (TTF) containing the font, which was not optimized for the web, had fixed the problem for its provider. If possible, get a clean, un-optimized version of the DroidSans font and export the web fonts yourself.
EDIT: Sorry all, I was out for the holiday and didn't have access to SO. Since I've been back, I've done a little research into exactly what's causing this problem on Windows machines...
It appears that the issue lies with the way the OpenType format is rendered on Windows machines. The issue with truncated descenders seems to transcend software type to affect multiple Windows programs attempting to render OpenType. Currently, you have the Embedded OpenType format (EOT) version of the font listed first in your CSS document under #font-face. Since Chrome and Opera both recognize this format, they'll disregard the subsequent source declarations and use EOT to display the font. Unfortunately, there doesn't seem to be a quick fix that you could apply to an OpenType font itself to force the software rendering it to allow adequate line-spacing for the lowest of its descenders on Windows machines...
However, you can be choosy about which fonts you feed to your viewers' browsers. Personally, I would recommend placing the SVG version first in your CSS, and for browsers that don't recognize this format, suggest TrueType (TTF) second, then WOFF, then EOT for browsers that don't support any of the aforementioned (some older versions of IE appear to support OpenType exculsively). If the SVG rendering isn't much to your liking, try TrueType first instead.
Alternatively, although I'm no longer really that confident that it will help, you can download a TTF of DroidSans at FontSquirrel and use a software package like Typograf to export web fonts (EOT, WOFF, SVG). Try rearranging the sources in your CSS as outlined above first, though.
ANOTHER EDIT: My erroneous use of TIFF instead of TTF has been redacted to avoid confusion in the future. Apologies for the mix-up, guys...
I am not sure but try to add this for padding to work
display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;
Set the line height to normal, it is a firefox bug and use the line height in %
I think this might do the trick
It all boils down to the font itself.
Look here
http://jsfiddle.net/DdMej/2/
The first row uses Drod Sans by Google fonts.
The second row uses the font you have on your site.
edit 1
Screenshot
http://imageshack.us/photo/my-images/811/screeniy.png/
I too was seeing my Google Font 'Lato' cut off at the bottom portion of the rendered text. In my case, I needed to serve the font files locally instead of using Google Fonts. To do this I:
Converted the font from .ttf to webfont files with Font2Web
Served the font files locally as static file assets from the localhost
Included fonts in my css with the bulletproof #font-face implementation
This eliminated my cut off rendered text issue.