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.
Related
I'm trying to build a web page and need some kind of fairly distinct cursive font (not too crazy, but still distinguishable from standard print). However, when I look at this page in Firefox: https://www.w3.org/Style/Examples/007/fonts.en.html
My browser renders all of them in an approximately standard font--none of them look nearly cursive enough. Since this is just an out-of-the-box installation of Firefox, I imagine this is how it will render on most users' screen if they're using the same.
Is there any way to force render a more cursive font for someone using standard Firefox?
As was mentioned earlier, the font in that example varies depending on device, not browser.
When you set a non-specific font-family in your stylesheets, e.g. font-family:sans-serif; or font-family:cursive; what font that actually gets used will depend entirely on that visitors operating system and what fonts are installed there.
In that link it shows you various system fonts that may or may not be installed, with system defaults as a fallback, with a picture next to each showing what it should look like if your system has that font. This will differ from person to person. It gets quite complicated when you consider that sometimes the fallback fonts can even vary between OS versions.
So for more complete control, many developers turn to webfonts. I use a lot of Google fonts for my websites; https://fonts.google.com/
There are different ways of using a webfont, but I find this way simplest;
/*put imports at the top of your stylesheet*/
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
h2 {font-family:"Lobster", cursive;}
<h2>I'm A Webfont</h2>
I have a webfont that doesn't support Cyrillic. The font only has latin chars. If I try and display some Cyrillic chars, instead of displaying blank or corrupt chars (as I would expect it) it bypasses the webfont and displays them in a system font instead. Whilst this is a good thing I don't know why or how. As I understand it, if a font specified in the CSS isn't supported by a browser or the browser doesn't support webfonts it is then that a substitute font is put in place. However this is happening if the characters used aren't supported. Is my understanding of this correct?
it can be difficult when using a font that is not supported in your language.
It varies from font to font and browser to browser.
So there is no hard and fast rule sorry.
I would recommend making sure you HTML is set to support Unicode fonts.
<meta charset="utf-8">
I would also programme your font so it is in a stack,(has a default to full back on if unsupported)
And give it and test in all browsers to see if it defaults or doesn't show.
You may wish to find a font that is suited to that language.
Most browsers do missing character fallback by default, so you never see blank characters when something's missing. If the developer uses a font family stack like font-family: MyCyrillicFont, Arial, sans-serif your browser will use the next available font. Otherwise, the browser itself has a default font setting (that the user can typically choose).
In short, browsers have fallbacks on the characters level.
My site has thumbs up images that I want to render these as HTML entities. The decimal and hex codes are:
đź‘Ť
đź‘Ť
respectively.
In FF, both codes are rendered as a thumbs up but in Chrome neither is (nothing is displayed at all).
Here is the rendering (in white) on a dark background.
Why is this happening?
In general, for emoji entities like this, you can't rely on the end user's font including it. This is especially true of Chrome (as of December 2014), which is the last major remaining browser where rendering emoji doesn't work by default.
You're best off using an image here.
A custom font is also a good solution (hat tip to #Vucko).
The font support to THUMBS UP SIGN (U+1F44D) is very limited, as usual for any characters added to Unicode recently (during the last few years). A large number of users’ system have none of the fonts, so the only way to make almost all browsers render the character is to use a downloadable font (web font) via #font-face; in practice, you would use Quivira or Symbola for this. As they are rather large fonts, using an image may be a better option.
What happens when you use the character and do not specify the font at all, or specify a font or list of fonts not containing that character, is that browsers will use some backup fonts. They may do this in different ways, so that browsers in the same system render it differently, since they scan thru the list of fonts in a different order. Moreover, browsers have bugs in this respect. They are expected (according to CSS specifications) to render the character if any of the fonts in the system contains it, but they often fail to do that. Sometimes this is caused by a faulty font: a font contains information according to which it has a certain character, so the browser uses that font, but in fact the character is missing and some generic symbol appears. Sometimes we just don’t know why it fails.
You can avoid such bugs by explicitly listing fonts that are known to contain the character. But this is of course ineffective when the user’s system has none of the fonts.
<style>
.emoji {
font-family: Segoe UI Emoji, Segoe UI Symbol, Quivira, Symbola;
}
</style>
<span class=emoji>đź‘Ť</span>
I mean this font collection: https://www.google.com/fonts
I want to use some maybe non standart fonts on my page. If I use Google Web Fonts on my site, will fonts be displayed properly? Or fonts from user's browser will be displayed? Or nothing will be displayed? Thank you.
caniuse # fontface – yes, you can, all modern browsers supports fontface.
The font you load will be used on all clients as long as the file from Google is available and the client understands this technology. Therefore you should not load too many fonts, because it dramatically slows down the page loading, as font files are pretty large.
Since you can specify multiple fonts in css, if the file is not available the second specification will be used. This should be something like "Arial", which is mainly available. The third specification can be something generic like "sans-serif". This assures that at least any font you want is used.
Nevertheless, the client will use any font if nothing appropriate was found. It will never silently display no text, just because your CSS does not specify something usable.
yes it will displayed properly and perfectly on web
so no need to worry, use it freely
I know not every platform contains the same font faces. What would happen if a font face that is not known is used? Is it possible to be downloaded or would it choose a different font face?
The browser will use a default font. You can control your styling by coding backup fonts to use if your first pref isn't supported.
Below is an example of styling backup fonts in CSS.
P { font-family: Cambria, Georgia, Serif }
Hope this helps!
Generally, a browser will default to a font that the computer has installed, usually Arial (windows) or Helvetica (mac). There are several solutions, my favorite resource for web fonts is Google Web Fonts, absolutely free. If you have to have a particular font, Typekit has the largest selection, but be prepared to pay!
With Google Web Fonts, literally just google: Google Web font similar to (The Font you want).
Hope this helps!
If the name of font not installed in the user’s system is mentioned in a font-family declaration (or in a <font> tag), then that name is simply ignored. No automatic download takes place. (Downloadable fonts, aka. web fonts, are a different story, but for them, you really specify font URLs and assign names to them.)
The font used is then determined by other factors. If other fonts are listed in the font-family list, they are tried. Failing that, the font of the parent element is used. Ultimately, if we then come to the top level, the document as a whole, without finding any font name known in the system, then the browser’s default font is used. This font is typically changeable by the user, though few people change it. Typically it is Times New Roman in Windows systems.