Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: font-family, if not one font, then none at all

Tags:

css

fonts

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 :)

like image 533
Jacob Deitloff Avatar asked Nov 30 '11 18:11

Jacob Deitloff


People also ask

Can we use multiple font family in CSS?

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.

Why is multiple font family used in CSS propery value?

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.

What font belongs to the generic family that do not have lines at the end of characters?

sans-serif (e.g., Helvetica or Arial) San-serif typefaces have straight letter strokes that do not end in serifs (Figure 18-1, right). monospace (e.g., Courier or New Courier) In monospaced typefaces, all characters take up the same amount of horizontal space on a line (Figure 18-2).


2 Answers

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

like image 158
RiZKiT Avatar answered Sep 24 '22 20:09

RiZKiT


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.

like image 44
animuson Avatar answered Sep 21 '22 20:09

animuson