Let's say the font is a .fon or .fnt, could I embed these in a webpage? Is there a particular format for embedding a raster font?
Unfortunately, there's no way to do this today. But while the technology is still in its infancy, multicolor fonts are coming to browsers. This would allow you to convert those bitmap formats to plain OpenType TTFs. All but Microsoft's proposal would allow for bitmap/raster fonts to be used.
This technology already works in current versions Firefox on all platforms. Support in other browsers is coming.
Support to font embedding via #font-face covers EOT (IE only), WOFF, SVG, and TTF/OTF. So the font files would need to be converted to at least one of these formats (and, for best browser coverage, all of them).
Related
I'm packing FA as part of my Angular 7 widget and web application using the approach Hosting Font Awesome Yourself. The thing is they explain to pack the whole /webfonts/ folder and it contains repeated fonts in each format.
Isn't it better to stick to one format e.g. svg and leave the others out?
What are the cons/pros, if any, of going for one specific format only?
If you need your web application that support in older browser too then you must host every font formats.
Unfortunately, there isn't a single format that works in all browsers, which means that we need to deliver multiple formats to provide a consistent experience.
Serve WOFF variant to the majority of browsers.
Serve WOFF 2.0 variant to browsers that support it.
Serve TTF variant to old Android (below 4.4) browsers.
Serve EOT variant to old IE (below IE9) browsers.
if you use only SVG font formats and leave the others out then it will support in Chrome(4.0 +), Safari(3.2 +) and Opera(9.0 +). you can check here the browser support for font formats.
The WOFF is the only format that support the majority of browsers. so
if you can ignore the older browser then I suggest you to use WOFF
font formats.
I have just noticed Google Fonts stopped serving their fonts in tff. Instead they do in woff2. Woff2 is not supported on iOS. And my layout gets all funny because of it.
Is there any way I can request the fonts in tff instead of woff2?
Thank you
You have to download the font using different browsers and watching the web inspector, thats because google detects which font type needs your browser.
i use icons for labels, but i saw this website: www.fontello.com where you can create font with icons.
But when i create font with icons it is bigger than all my icons, becouse there is svg, ttf, woff and eot, all that 4 fonts are bigger that all png icons.
#font-face {
font-family: 'fonticons';
src: url("../font/fonticons.eot");
src: url("../font/fonticons.eot?#iefix") format('embedded-opentype'), url("../font/fonticons.woff") format('woff'), url("../font/fonticons.ttf") format('truetype'), url("../font/fonticons.svg#fonticons") format('svg');
font-weight: normal;
font-style: normal;
}
All my icons are optipng compressed .png images.
Does this work on all browsers ?
So why should i use this font method ?
And any alternative for fontello.com ?
Good question. I am currently experimenting with Fontello and font icons to see if it's a viable approach.
It's a viable approach. I have used font-based icons in production applications and tested on nearly every popular browser/device (Fontello has examples which even support IE7). I have only good things to say about Fontello, but you can use any tool that you want.
Font icons can scale to any whatever (proportionate) dimensions are desired and work on any pixel density. If you look at your site on a high density display (such as Apple Retina, and increasingly popular on all mobile devices) there is an enormous difference between a raster format (like PNG) and a vector format.
You can define all icons in a single file (like a sprite), but unlike a sprite you don't have to worry about the dimensions of the items within the file. Furthermore, you can scale each item independent of other items in the file.
Considerations
You will need to manage the font file. These are not human-readable, so you will need to use a tool.
There are associated CSS selectors to maintain (usually one selector per icon).
Extra markup is occasionally needed to achieve a particular effect/fix a problem.
Minor sizing issues; not all icons fill a box uniformly and they are subject to the text rendering idiosyncrasies of each browser.
These considerations are probably less work than using sprites or creating both PNGs/SVGs for every icon.
Keep in mind that a font icon does not contain any color information. However, you can style it as you would any other text. This includes using ARGB colors and applying more advanced CSS effects as pointed out in the comments.
Regarding file size, keep in mind that a browser will almost never download all 4 font formats. Done correctly, usually only one will be downloaded.
An alternative approach is to use SVGs (not SVG fonts) for icons. Browser support for SVGs is less than that of #font-face, so you will need a raster fallback.
This handy site shows you with CSS features are supported by which browser. In this case < IE9 can give you problems.
http://caniuse.com/#feat=fontface
Personally, I prefer to use CSS sprites for my UI elements to ensure consistency acroass browsers.
quick disclaimer: i've been working on an icon font library called pictonic.
when i create font with icons it is bigger than all my icons,
because there is svg, ttf, woff and eot, all that 4 fonts are bigger
that all png icons.
in terms of filesize, you might find the following comparison of pngs vs icon fonts interesting:
http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14
you should verify that the icons are being converted to vector format using tracing. since many vector formats like svg also support bitmaps, if your icons are being imported as bitmaps you won't experience any of the filesize related benefits of converting them to a vectorized font.
in my experience, even at 16x16px, a ttf font should be much smaller than the combined filesize of 20 or so icons. as the image size increases this gap widens as vectors have the same filesize at every scale.
Does this work on all browsers ?
depends on what methods you use. pictonic is tested on all browsers back to ie5 but requires a bit of js for old ie versions (5-7). So in theory its possible to get icon fonts working in all browsers.
So why should i use this font method ?
icon fonts are really versatile, you can manipulate them with css in ways that make image icons seem quite inflexible. Here is a demo: https://pictonic.co/#main-demo
so for example, you can experiment with your layout and change the color, size, and shadow of all your icons with just a few lines of css. this is pretty handy.
also, since they are vector based, they are retina ready out of the box, so they look amazing on retina screens like those on apple retina displays (retina macbook, iphone 4+, ipad3+), whereas images require media queries to swap in double resolution versions which take up even more space.
i believe they're pretty efficient if you use the right format.
And any alternative for fontello.com ?
pictonic doesn't have the ability to import user generated icons yet, but it does allow you to generate custom icon fonts from over 2000 stunning icons, including a fairly large free iconset. and we're always adding more, so do have a look
Another alternative for you could be:
http://fontastic.me/
;)
With font icons you include font file that are of the extension .woff, .ttf, .eot, .svg and the css file for that font. They are less in size and and you can change the size of the icon when required, with image files png/jpeg it distorts the image file, where as font icons scale properly.
With multiple images you have to make multiple http request to the server, which can be avoided here.
The font icon files are also available on cdn hence you don't have to request it from the server if some earlier website has it already cached it in your browser.
With fontello you can customize and use only the icons that are required.
There is also fontawesome current version 4.2 where you can get the font icons, if you need support for older version of browsers you can opt for old version no 3.
You can also customize it using LESS/SASS.
Another option is using css sprites you can optimize it using traditional methods or using online services.
Using it in html is pretty simple, once you make sure the css files and font files are loaded in the browser you just need to add class name to the html element and you are good to go, you can then customize the font size, color, background color as per your wish.
Font awesome
Fontello
You can find the CDN here
I've been displaying Chinese fonts on my Chrome browser on my Mac and I liked it. However the font is rendered differently in Firefox or when I use Chrome on Windows. Is there a way to standardize the font that the browser chooses for Chinese characters?
You have various options:
As Art of FITZ says, specify an #font-face and have the font downloaded to the user (which will, indeed, take up a lot of bandwidth if the font is large)
As Jukka says, provide a list of font names in the font property and hope one of these is installed on the user's computer
The legacy method: render the text on your own computer in the font of your choice, upload this as an image file. If you don't have much text to display, this may be even more efficient than having an #font-face clause that downloads a multi-megabyte font file.
Tailor the #font-face to your needs: Depending on the amount of text to display, you may be able to create a font with only the subset of characters you need (with an online utility such as Font Squirrel), reducing the size of the font file to download.
Here is a quick reference to how this line of code is used.
http://www.css3.info/preview/web-fonts-with-font-face/
Different browsers have different default fonts, but can can override this by setting font-family in CSS. Just remember that different computers have different sets of fonts available, so you should normally use a list of fonts, hopefully covering most browsing situations.
Maybe you have done so but see different results on different browsers. Please post a relevant part of the code and/or a URL then.
I'm helping my sister convert a website that somebody did for her in flash into html.
They use fancy fonts in the flash that I am trying to define in a css file through #font-face. I tried opening the page in firefox, IE and chrome, but nowhere do I see the proper font.
The declaration that I am using is:
#font-face {
font-family: "VAG Rounded";
src: url("http://judith.huinink.net/chilax/VAGROUNL.OTF");
}
http://judith.huinink.net/chilax/index.htm contains the html.
http://judith.huinink.net/chilax/chilax.css contains the full css.
I checked that I can download the font file, but it simply doesn't use the font when I open the page in a browser. I must be overlooking something. Does anybody have any suggestions?
font-face goes mainstream
As of January 2010 all major new browsers support font-face
Safari 3.1
IE - all versions
Firefox 3.6
Chrome 4
Opera 10
See http://webfonts.info/wiki/index.php?title=#font-face_browser_support
Update
In the last year, browser support for fonts has improved rather dramatically. I'd suggest reading Tim Brown's excellent article on the subject, which describes in detail how to get web fonts working in most modern browsers.
Original answer
In realistic terms, #font-face is completely unusable right now. Only two browsers support it — Internet Explorer for Windows, version 5 or better, and Safari 3.1.
Worse, IE and Safari do not support the same font formats. IE supports only EOT, while Safari instead supports the more common TrueType (.ttf) and OpenType (.otf) formats.
Almost no browsers support #font-face: When can I use...
http://www.css3.info/preview/web-fonts-with-font-face/
How to use #font-face in all browsers that support it: at Jon Tangerine's blog
ttf2eot is a nice font converter for Unix and Windows so you don't have to use the horrible old Microsoft WEFT. It converts the whole font, not just some characters.
Here's a javascript to use with sIFR that disables sIFR for #font-face enabled browsers.
Flash needs to die, so here's another alternative to sIFR: facelift. It's a serverside script that generates images.
The problem with afaik all sIFR replacements is that selecting and copying text doesn't really work -- you either don't see the selection, or it's impossible to select less than a word or line. There's also Cufón which uses <canvas>, so it only works on newer browsers, most of which have #font-face anyway.
Do the right thing, use the state-of-the-art technology now: #font-face with TTF or OTF, and fallbacks for IE and old browsers. Preferably keep your HTML clean and implement those fallbacks in separate javascript and CSS files. For IE you might need to use "conditional comments" as explained in my first link above. For browsers with javascript disabled, always specify a list of replacement fonts with the web-safe fonts at the end.
Check out the ever popular sIFR or with no flash dependency, typeface.js
I've come across situations where WWW must be included in the domain. Without it, it wouldnt work.