Im implementing a language plugin on a site, you know the sort click and it changes all the content into Arabic, Russian.. ect (im aware that modern browsers have built in features for this, but we've chosen to go this way.)
What i was wandering is how we deal with fonts, if our normal site is running using
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
Would it just fall back to the browser defaults if it couldn't render the new text in the above fonts?
Or is there a way of specifying fonts after the translation has taken place?
When characters on a page cannot be found in the font listed first in the applicable font-family list, then browsers are expected to scan the list further and eventually, when needed, fall back to scanning other fonts in the system, in browser-dependent manner. However, browsers (especially IE) are known to fail here and, moreover, the process may result in a mix fonts, even characters from different fonts in a single word.
Thus, you should make a reasonable effort to ensure that any font listed in your font-family list is as such sufficient for the text of the page, at least for letters (special symbols may often be picked up from different fonts without stylistic mess). This is virtually impossible for a widget that translates into “any” language.
I suppose you are referring to the use of a service like Google Website Translator. In addition to producing generally bad translations for business purposes, it may mess up the markup of the page, possibly affecting font issues too. For example, it seems to insert rather pointless font markup which may prevent your font settings from working. Moreover, it does not properly set the lang attribute in the translation result (but leaves the original lang attribute!), so you cannot even expect browsers to use their language-specific defaults for fonts right.
I'm not sure what do you refer to when you say "im aware that modern browsers have built in features for this, but we've chosen to go this way" - browsers don't really provide language selection.
There is, however, a reusable JavaScript library that my team developed, that does this, and it takes care of fonts, too:
https://github.com/wikimedia/jquery.uls
https://github.com/wikimedia/jquery.webfonts
You can use it, or take ideas from it to your implementation.
Related
A web design company design website for me. However, it largely uses Google font Montserrat and Lato, which lead to totally 40 font files(about 1.4MB) to be loaded when users open my website. And based on GTMatrix, 82% data transfer and 56.1% requests are for font files, which slow down my website greatly.
Therefore, I want to find some web safe fonts to replace Montserrat and Lato, so that:
The replacement fonts should look similar to the original fonts.
The replacement fonts should be available in most of the visitors' systems.
It is better to use a font stack so that there will be fallback fonts if these new fonts are not available on the visitors' systems.
In this way, the browser does not need to load additional fonts when user visit my website.
So, firstly, I try to find fonts similar to Montserrat and Lato, I use the following website:
http://www.identifont.com/
It does bring out 30 fonts similar to Montserrat. I call it set A.
Based in the following references, there are no standard list of web safe fonts:
Web Safe fonts - What exactly does that mean?
https://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts
What I use is a list at https://www.w3schools.com/cssref/css_websafe_fonts.asp, this list seems looks fine. I call it set B.
Now I try to find a font in both set A and B, with Excel. I can find nothing.
So my question is:
Is there a better way to find web safe font alternative to a given font?
Since there are no font appear in both set A and B, I plan to use my eye to check the similar fonts manually, I wonder if there is an easier way to do that?
The list of "web safe" fonts is really small and none look like Montserrat or Lato.
I'd advise you to stick with the fonts your designer picked. You don't have to load all weights (maybe only regular?) and you can host them yourself and use font-display: swap; so the impact on load time is minimized. If that still isn't acceptable you'd have to pick something like Arial or Verdana for a sans-serif that works on both Mac & Windows.
You probably don't need to change the fonts entirely, but you should only be loading the font styles and weights you are using on your website rather than loading all weights and styles. For example, if you are only using 400 and 700 weights in Lato, untick all of the other weights in Google Fonts.
You could also look at font loaders to help with those initial load times, for example: https://github.com/typekit/webfontloader
During development, and until clients have signed off on fonts, I use the external embed links Google Fonts provides. This combined with a SASS variable for the font face declaration in CSS makes it really easy to change fonts project wide if necessary.
As part of the final process for putting a site live once everything has been approved, I will investigate those external embeds and download the actual .woff2 files (plus related CSS) and add them to my own site files. This reduces the site's reliance on external links and makes the whole project more self contained.
I've just checked the project I'm currently working on (which uses three fonts in a variety of weights). All of the font files combined only add up to ~160k - nowhere near your quoted 1.4mb. At this size, and given modern network speeds and browser caching, I see no issue using web fonts.
My advice would be to optimise how your site pulls in the fonts you want to use, rather than looking for system based alternatives. If you are not comfortable doing the optimisation work yourself, I would get back in touch with the developers and ask them to fix the issue.
A web site I'm developing needs two custom font families using. There are close matches to these fonts on Google Fonts, but they aren't exact matches.
I have the ttf files for the two fonts, so can create them easily enough as my own custom web fonts, but I am wondering if using my own custom web fonts (ie, rather than Google Fonts) may have an adverse affect on SEO - as there is far less chance a browser would have my custom fonts cached, which would increase the average page load time.
Although my concern seems valid, I'm wondering if it is significant enough to actually be taken into account by search engines and, therefore, have an adverse effect on the site rankings?
Yes, custom fonts affects loading speed, which in offers lower page ranking. Refer below
http://www.webilogy.com/2013/11/tips-uploading-custom-fonts-website/
http://blog.futtta.be/2011/01/07/website-performance-impact-of-web-fonts/
Well if you look at the top 10k sites from Alexa, you can see how many of them use web fonts. It's an overwhelming majority, including not just copy fonts, but icon fonts like FontAwesome, which is THE most popular web font, pretty much, excluding OS fonts like Arial, Helvetica, Georgia. See the data for yourself here:
http://bonfx.com/fonts-of-the-world/
If there were penalties, which translate into lost revenue, we would not see widespread adoption. I would look for performance gains everywhere else to offset any potential slow down from using web fonts, but definitely keep your web fonts.
Short answer is : No well for the more description
In a web app I work with from time to time the issue of text readability has come up. The reason is that it involves passwords which will be read off of the web page or written down. One of my co-workers pointed out the Crystal font as one that is designed to be unambiguous ("l" and "1" aren't confused, "0" and "O", etc), but I'm pretty sure its not useful on the web. I realize that I will probably have to use a fallback strategy, but am looking for advice on what fonts are good for this purpose and specifically those fonts that users may have available. Also, links to resources on the topic would be great as well. Thanks!
Edit: People have suggested monospace as a readable web font. Can anyone provide additional info on possible fonts that users might have that may be better than monospace so that I can chain fonts together to get the best possible result?
A great start is font-family: monospace. These fonts are designed to be unambiguous.
If you're really desperate to get it exactly right, you can render a little image in your chosen font on the server, then send that.
If readability is the most important thing for the password and you are required to have a specific font you can draw the text on an image on the server using your specific font then serve it to the browser.
The generic monospace font will be somewhat good at this, but not perfect. iIl10oO
However, the best solution is to make sure that the passwords do not contain ambiguous characters.
Try this font stack
font-family: "Lucida Console","Courier New",Monaco,"Nimbus Mono L",monospace;
99% of Windows has Lucida Console and courier new
91% of Mac has Courier New
31% of Linux has Nimbus Mono L
http://www.codestyle.org/servlets/FontStack?stack=Lucida%2BConsole%252CCourier%2BNew%252CMonaco%252CNimbus%2BMono%2BL&generic=monospace&x=5&y=8
As you describe it is intended for people at your work, there's possibly a bit more control on which browser they use. If this browser is modern enough, you can consider using #font-face to explicitly use the Crystal font in your interface.
You can read this article by Paul Irish to learn more about implementing #font-face.
Have a look at #font-face browser support to see which browsers support this feature yet.
Can anyone provide additional info on
possible fonts that users might have
that may be better than monospace so
that I can chain fonts together to get
the best possible result?
On Linux, I like Bitstream Vera Sans Mono (or its more extensive variant DejaVu Sans Mono), on Windows I think Consolas is great (but only if Cleartype is on). Mac users might be fond of Monaco. You could name them all in your font declaration, before mentioning the fallback option "monospace" (which probably is Courier New on Windows machines).
I distributed serial keys before using Courier New and it was a bad idea. We regularly had calls about people who didn't read the key right.
We fixed the issue by using VerdanaMono, but Verdana is very similar (we wanted the keys to all take the same horizontal space). We also provided a list of possible characters so people could compare. (It looked like this : "The available characters are : ABCD... abcde... 1234...").
I work on a collaboration web app, built with Flex 3, that needs to support multiple languages.
Does anyone know which fonts are best for creating embedded font libraries for Chinese, Korean, Japanese, and Russian languages? I know Arial Unicode MS will do the job, but I don't know if it will do the job best.
Localization alone won't solve the entire problem: chat input and display, for example, need to support multiple languages in the same textfield - anything typed in Chinese needs to display in Chinese; anything typed in English needs to display in English.
Using _sans is an option, but is far from preferred.
Thanks.
Went with an approach that switches TextFormat of characters based on unicode value. So, characters in the primary language display in the preferred (embedded) font, while characters in other languages display in _sans.
This works out really nicely, but requires that you inspect every character that is added to a field, and requires you to inspect everything when a deletion occurs. Kind of a lot of inspecting and I'm sure a textfield with a lot of content would start running into performance issues, but this is for a chat tool, so that isn't too critical of a use case.
I have a requirement to be able to provide a flex component in English and several asian languages. I have looked at the flex documentation and it seems that I have to build several swf's, which feels wrong.
Does anyone know of a straightforward and practical way of bundling string resources in different languages and handling the fonts?
I guess you know the basics of how to localize a Flex application, but if you would like to know more there's a good and thorough description here: Runtime Localization.
In Flex 3 you have three options on how to solve your problem:
compile all languages into the SWF and switch language at runtime
compile a separate SWF for each language
compile no, or a default, language into the SWF and load additional languages at runtime
The first option is probably the most common, the least complex and doesn't have many drawbacks. The other two can be used if you have special needs, like having to keep down the size of the SWF at all cost, or need to load all strings from a database at runtime.
To implement the first option you create a resource bundle for each language (basically a number of .properties files that lives in a directory named after the locale, for example en_US for US English or sv_SE for Swedish). In the code you refer to strings by calling the resource manager:
<Label text="{resourceManager.getString('mybundle', 'mystring")'}/>
That will retrieve a string called "mystring" in the resource bundle compiled from "mybundle.properties" in the current locale.
To make sure each locale is actually compiled into the application you add -locale=en_US,sv_SE to the compiler flags (but change the en_US,sv_SE part to the languages you have resource bundles for). You also need to add the location of the directories to the source path: -source-path+=locale/{locale} (the "{locale}" part will automatically be replaced by the values of the -locale flag).
Now you have compiled all your languages into the SWF and can change languages at runtime. The way to do that is to modify the localeChain property of the resource manager:
resourceManager.localeChain = ["sv_SE", "en_US"];
With the settings shown above the resource manager will first look in the Swedish resource bundle, and secondly in the one for US English. You can set another order at any time, and doing so will change all texts in the application then and there.
I encourage you to read the description I referred to above, it explains this in greater detail, and most likely in a more understandable way. It also explains how to do some preparations you need to do before you can compile applications with locales other than en_US.
The other problem you have is with fonts. That one is trickier. The best thing would be to have a font that had the full Unicode range of characters, that way you would only need to embed that and any text could be displayed. However, that means that your options are a bit more limited. I know that there is at least one version of Aria in Windows that has an enourmous number of characters, and on the Mac there is a Helvetica (I think, or it might be Lucida Grande, or both) that also has most of the ones you need to display many asian languages.
Embedding all languages into the same SWF usually does very little to increase the file size, because text is very lightweight, but fonts are definitely not. Embedding a the whole Unicode version of Arial can increase the file size of a SWF by several megabyte, which kind of sucks for web applications. Depending on the situation you may have to compile one SWF per language, just because the font data would otherwise make the SWF unwieldy.
Beware of fonts. System fonts aren't the prettiest but Asian fonts are too large to embed. We resorted to embedding Latin fonts for English and switching to system fonts for Chinese.
Be careful about rotating system fonts - your text will disappear. I think Flash 10 might have fixed this.
Also, be very careful with the font string you specify for Chinese.
Most OSes have nifty fall-back logic - if you specify Trebuchet and try to render a Chinese character, your OS might decide to use some Asian font instead. Flash seems to mess up this fall-back logic and switch between two or more Asian fonts dynamically. We had cases where mousing over a text block would switch the font.
To fix this, specify a font which includes all the characters you need (without falling back to some other font). You will need to test this across OSes, etc.
We use Flex for the client part of our application and support I18N via ResourceBundles.
In Flex 2.01 the language has to be built into the SWF - you can't change it at runtime. In Flex 3 you can switch language at runtime.
http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Runtime_Localization
An important step left out above is to run the command:
copylocale.exe en_US sv_SE
from the bin folder of the sdk. This is in the article though.