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.
Related
I am digging into an existing reactJS site, and many images are being rendered by using the css content property. I am looking at the css sheet in VSCode, and many classes are appearing with content listed as "". I'm not sure if I need a plugin to view the actual content, but I can't find a way to see it at this point.
I can use alter the content attribute to point to a different image, but want to know where this is being generated so I can alter it at the source. The site is setup to use Contentful, but assets there are called directly on pages, not in css.
.fa-discord:after {
content: "";
}
I'd like to be able to track down where this image is being stored or generated. Any help is appreciated!
That's a Font Awesome icon for Discord, and can be found here. Yes, you need to include Font Awesome on your website if you want to render any of their glyph icons. And you can easily work out whether a website is attempting to use Font Awesome glyph icons or not, as their selectors all start with fa- and replace the content.
Font Awesome icons are generated through an included CSS file, most commonly located in a folder like /fonts/font-awesome/css/font-awesome.min.css.
This file uses unicode characters to generate the corresponding glyph representations, and the specific unicode character for the Discord icon is 392. Thus, content: "\f392" will render the relevant glyph icon.
If a box or square shows up instead of an actual glyph, that means that the font you're using doesn't incorporate that particular unicode glyph. Font Awesome rapidly expands its coverage of unicode glyphs, and you will need to update to at least Font Awesome 5.0.0 in order to use the Discord glyph.
font-display is a new CSS property that allows developers to control how fonts are rendered depending on if they load quickly enough. There's been a few articles on it:
Controlling Font Performance with font-display - Google Developers
font-display for the Masses
None of them mention icon fonts. The specification does have an example that mentions icon fonts for the block value, but to me it doesn't make sense to use that:
'block'
Gives the font face a short block period (3s is recommended in most cases) and an infinite swap period.
If I understand the specification correctly, this means if the icons haven't loaded after the "short block period", the fallback font will be used, resulting in random letters appearing in their place.
If I use the optional value, the random letters will never appear but neither will the icons if they haven't loaded in the "extremely small block period".
There doesn't appear to be a value for giving an infinite block period without swap (so it would show invisible text until and unless the font loads). Is there a reason behind this and is there a workaround?
font-display: block;
As you commented, block still has a swap period; so it's still rendered until it's loaded.
Quoting Chris Coyier:
Wanna hear something quite unfortunate? We already mentioned font-display: block;. Wouldn't you think it, uh, well, blocked the rendering of text until the custom font loads? It doesn't. It's still got a swap period. It would be the perfect thing for something like icon fonts where the icon (probably) has no meaning unless the custom font loads. Alas, there is no font-display solution for that.
Considering alternatives:
I've also been there. If you have the chance, you might need to switch to SVG for icons. It has a few advantages over font-icons: SVG is better at pretty much everything than icon fonts.
Even Zach Leatherman, web fonts expert, has opinions about it on his very famous Comprehensive Guide to Font Loading Strategies.
This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice.
I'm editing the CSS of a WordPress theme in order to make it fit my needs better. I've come across what, as far as I can tell, retrieves the favicon for different social media sites.
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
I follow that it looks for flickr.com in the url I provide, but what's the content property doing? How could I change the content field to support another site, such as StackOverflow?
Like #Paulie_D said, icon fonts.
The content property is pointing to a Unicode character in a icon font set. The CSS selector is prependnig the icon (via pseudo element) to an anchor element <a> that has a link that contains flickr.com.
This might be a coincidence but the current version of FontAwesome uses the same unicode character \f16e for Flickr.
As far as "supporting other sites, such as StackOverflow," you'll be at the mercy of the icon font. What ever the icon font provides is what you can use.
If the site is indeed using FontAweseom then you'll have quite a few icon options available to you, including StackOverflow \f16c. Here is a list of all the FontAwesome Icons.
I'm searching for a method to tell the browser to render each glyph rendered with a specific font, e.g. FreeMono, in a bigger font size than glyphs rendered with other fonts. The reason for that is, that I use characters like ᚠ in a website and these glyphs are rendered using FreeMono in Chrome (see inspect element → computed → rendered fonts) and they look always like they're to small to fit the surrounding text. Is there any way I can do that?
You cannot. CSS has no tools for such font-specific tuning, apart from the font-size-adjust property, which has very limited effect, limited browser support, and buggy support.
If you use a character such as “ᚠ” U+16A0 RUNIC LETTER FEHU FEOH FE F on a web page, then it will be up to each browser in each system which font (if any) is used to render it, at least if you do not explicitly suggest some font(s) that contain it. It may be FreeMono, but most computers in the world do not have it. Besides, in FreeMono, “ᚠ” is rather large—taller than uppercase Latin letters. So if it looks too small, the reason might be a mix of fonts.
To make, say, Runic letters match the style of other text, you should try and find a font that is suitable for both—so that you can use a single font, designer by a typographer to make things fit. You would then probably need to find a suitable free font and use it as a downloadable font (with #font-face). It might be FreeSerif or FreeSans; only in very peculiar circumstances would I consider FreeMono, a monospace font, suitable for rendering computer code in some cases and mostly unsuitable for everything else.
I'm trying to use the MusiSync font to embed a sharp and flat symbol in a line of text. In order to keep these symbols from being tiny I have to make their point size twice the size of the rest of the text. Unfortunately, this messes up the line height in Internet Explorer and I cannot find a way to control it. You can download the MusiSync font at:
http://www.icogitate.com/~ergosum/fonts/musicfonts.htm
My attempt to use this font in a web page can be found at:
http://www.williamsportwebdeveloper.com/MusiSync.htm
I opened up Photoshop and used the font you link to. There is a huge amount of white-space above each glyph in the font itself. The font is poorly designed.
If you set your style to this, you'll see the issue:
.style2 {
font-family: MusiSync;
font-size: 24pt;
border:1px solid #000000;
}
The problem appears in FireFiox 3 as well, its just manifesting itself a little differently.
You may be able to hack your way around this somehow, but it's going to be ugly. Unless you're using a lot of different font sizes, you may be better of using images.
Seeing that you are trying to use a very uncommon font, why not implement sIFR?
It will (possibly) solve some of your line height issues as well.
Read up here.
sIFR is an excellent choice for non-standard fonts.
You embed the font in a flash movie (don't worry most of the work is done for you) and add a bit of code to your page and the sIFR javascript will replace classes/id/tags etc with a flash movie containing the text/font that you're aiming for:
From http://www.mikeindustries.com/blog/sifr/
A normal (X)HTML page is loaded into the browser.
A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.
An excellent cross browser platform indepent solution for non-standard fonts.