I'm using icomoon.io to convert some SVG files to fonts. The SVGs are graphics, not letters. I know this can be accomplished with JavaScript, but I'm wondering if there is a simpler way to avoid FOUT (flash of unstyled text which occurs before the #font-face file is completely loaded).
Are there character codes I can assign to my symbols that will be rendered as blank in case the browser temporarily uses a fallback font?.
About avoiding FOUT have you tried using a DATA-URI approach for loading the font:
http://pagesofinterest.net/blog/2012/08/css-only-fout-prevention/
Also have you tried separating the #font-face embedding it in another css file and load it before the rest of the CSS in which you actually use the custom font?
Ps. For converting SVG to font-icons I usually use Glyphs. http://www.glyphsapp.com/
It allows you to map each single char with your own SVGs and position / rescale them etc.
Related
I cannot get Chrome on OSX to print emoji, is there any css trick or other?
Here are 2 emoji: 👍🇦🇹
When I try to print this page, the emoji space is preserved, but it's white. In Safari printing the emoji works just fine.
Here is a screenshot of the print preview of this page on Chrome:
After a lot of dialog in the question's comments, it seems you have a font rendering issue (perhaps a Chrome bug). I do not think this can be solved with any combination of HTML, CSS, or Javascript.
There is, however, the option to work around the issue by not using a font.
You can use a vector image like SVG to have the same kind of scaling capabilities as a font:
SVG for 👍THUMBS UP SIGN Unicode character
SVG for 🇦 REGIONAL INDICATOR SYMBOL LETTER A Unicode character
SVG for 🇹 REGIONAL INDICATOR SYMBOL LETTER T Unicode character
SVG for Thumbs up sign
SVG for Austrian flag
Just link to the SVG as an image and specify its dimensions either in HTML or in CSS as needed.
With a little work, you could automate conversion of user-generated emojis to images by using a dictionary of known images and supplement the misses with the either the SVG or the emoji PNG at FileFormat.Info. They have a list of emojis you could scrape (assuming it's not a violation of their terms of service) for PNGs as well as an SVG for every character (emoji or otherwise) which can be obtained from from just the character code. For example, here's U+1f44d (👍):
http://www.fileformat.info/info/unicode/char/1f44d
It'll be the only SVG link on the page, so you could do this in JS:
var svg_src = fileformat_info.querySelector('a[href$=".svg"]').href;
That said, it'd be vastly preferable to have this ready-made rather than creating from scratch. #pandawan's answer suggesting twemoji looks promising.
Perhaps there is a CSS-only workaround: I've also read elsewhere that you can properly print these characters by avoiding bold (and perhaps all font and text manipulation? perhaps just make the font size bigger?). This may depend on the fonts installed on the client system.
This is due to a rendering difference between Chrome and Safari, I would not named it a bug since I do not believe that the expect behavior is defined anywhere (Firefox has issues rendering your emojis too by the way).
If you want a full and simple emoji support across all platforms you can use twemoji, a small library developed by Twitter for this specific need.
I've never become fluent with CSS but I don't think I had this situation before.
I'm thinking of using stylish to add CSS to a third-party site over which I have no direct control. So the HTML and CSS is not really set up for the kind of customizations I want to do.
The site I wish to tweak doesn't allow good control over fonts but some of its pages (user created) make a lot of use of some exotic Unicode ranges (eg. Khmer) that my OS/browser combination choose a terrible font for:
Can I make a CSS rule that will apply to all text in a page that falls within a certain Unicode range to set it to a known good font, without delving into the structure of the page HTML/DOM?
(Or is unicode-range only for doing something different with webfonts?
The answer is yes in most browsers
MDN - Unicode Range
The unicode-range CSS descriptor sets the specific range of characters
to be downloaded from a font defined by #font-face and made available
for use on the current page.
Example:
#font-face {
font-family: 'Ampersand';
src: local('Times New Roman');
unicode-range: U+26;
}
Support: CanIUse.com
Also see this Article
unicode-range(s) can be used to specify which specific set (or range) of characters you want to be downloaded from a font in an attempt to save bandwidth. See here: Mozilla unicode-range info
Without seeing the actual CSS you could attempt to just force a different font to be used completely by doing something such as declaring
body{font-family: arial,sans-serif;}
or adding !important (which I would avoid under any normal circumstance) if the other fonts refuse to give way e.g.
body{font-family: arial,sans-serif !important;}
If you can bypass using the original font faces then the unicode-ranges will cease to be important. Watch out for things like icon-fonts though as removing those may make certain symbols/graphics disappear.
Hope that helps.
Sorry I rather misunderstood your question - thought you wanted rid of the existing unicode fonts altogether.
When using #font-face in css, the browser loads my page's text before the font, which results in the font jumping from one style to another (from Arial to myfont). When using condensed fonts, for example, the problem is very pronounced visually.
I only want to display the one font that I have chosen with #font-face. What is the best way to do this?
It's called FOUT the best way to handle it in my experience is by using Google's font loader:
https://developers.google.com/webfonts/docs/webfont_loader
Essentially what you do is let the page load normally (during which the body is hidden or styled font blocks are hidden, your choice), once they are loaded a class is added to the body of the page, this triggers the display of the styled fonts.
The script adds these classes so you can style appropriately:
.wf-inactive - failed to load
.wf-loading - during load
.wf-active - loaded fine
The only downfall is that it requires Javascript..
This is a pretty well-known issue in some browsers (Firefox 3.5/3.6, IE 7-9). WebINK has a JavaScript file available which will allow you to work around the problem.
This is known as a Flash Of Unstyled Text and is due, as you mentioned, to the font files loading in tandem with the rest of the page, whose text will be styled with default or fallback fonts until the new font face is loaded and can be applied.
It appears that the best way to minimize the occurrence of this effect is to minimize the time the client spends loading your custom fonts. Two measures you can take to accomplish this are compressing your font files via gZip and specifying your font files for long-term caching by a viewer's browser for subsequent views via a far-future expires header.
If the FOUT is still pretty jarring for your users, you can specify a similarly-shaped font which is likely to be installed on most viewers' machines as a fallback to keep your page size relatively consistent as the custom font loads. For example, for your condensed font, most viewers already have Impact as an available font, or Arial Narrow, both of which adhere to a 'condensed' style.
And if all else fails, you can always style the entire text of your document with color: rgba(0,0,0,0) and use JavaScript to remove that rule at the end of a timer.
Maybe somebody did do this:
I have several files for one font for each style (regular,bold, italic, italc-bold)
font-italic.ttf
font-bold.ttf
font-regular.ttf
How can I merge it to one file, to use in one font-face in CSS?
You cannot. A single font file describes the glyphs used for a particular font in a particular style.
While you could probably merge them and use Stylistic Sets to refer to the different fonts that is something you cannot do in CSS (and most other applications neither). Apart from that (and things like Arabic) there is (as far as I know) no straightforward way to have different glyphs for the same code points in a font file.
So, I know that this isn't something that is normally a good idea for a website, but I have a special purpose/intent for such a use:
I have a multilingual dictionary that I'm working with online, where I need one of the languages to be in a specific font, from a file that I specify locally. However, I want this language to be rendered ONLY in this font, as if it is rendered using any other font, it will render incorrectly. That's all fine and dandy, and I can load the file in CSS and whatnot.
But I want to make it so that if it can't load that file, either for one reason or another, or something goes wrong, it can't go to another font. Basically, render this text using this font, and if you can't do that, don't just try and render it with Arial or whatever is the default -- show me blocks, show me a stark something.
I've spent a bit looking around, but am not sure what in CSS I would be using for this. Suggestions/help? Thanks :)
As an update to this question, since April 2013 there exists the Adobe Blank Font, which can be used for that purpose.
You may build a cross-browser css with FontQuirrel WebfontGenerator and the Adobe Blank font files.
If you just need the font in OpenType format you can use this single css file with the already embedded font
You can't do this. Text is text and text has to have a font that it is to be rendered in. If you really want, there's probably some weird JavaScript function that can detect the actual font being used for the text and if it doesn't match the one you want, then you can hide it or something. But in the end, your only option is to have the text displayed in some obscure font, or completely hide the text. If the text is visible, it has to be rendered using some font.
You could also theoretically create your own font where all the characters are just blank, but that seems highly illogical and such a waste of resources to make people download a font just so it can display meaningless emptiness.
There is no "don't render fonts" option. It's a font, it needs to be rendered, or else it's hidden visually in the DOM.
You could use Javascript to find out the font being applied to a certain block, and if it's not the font you want, just hide it. Or display a message.
Another solution is somehow specify the content to be empty. For example, I'm trying to override the +/- character that a Webix tree displays using Font Awesome:
#lhn-tree-container .webix_tree_open:before {
content: '';
}
This only works with the :before and :after pseudo-elements though.