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.
Related
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
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.
A client needs to have Malgun as the font whenever hangul characters are present. I'm trying to find something to use in CSS that is close to it. I was thinking Verdana. Anyone else have a suggestion?
Verdana is also looking closer to Malgun, I think you should try google fonts http://www.google.com/webfonts
There are no "standard web-based fonts", only fonts that are more or less probable to be installed on the computer, where the browser is running. You may try to build a font-stack, that comes close to the one you want, e.g. the Verdana based font stack from this Sitepoint article, and then use font-loading methods like Google Webfonts to load your defined font for browsers that support loading fonts.
Do not try to give each visitor the same experience, but the best experience possible. Tell your customer, that a website is not a application that looks the same everywhere, but more like a TV program, that must be viewable from a black and white TV also, see this video.
Have you thought about using Fontsquirrel #font-face generator ? Also, for hangul, you might be interested in reading this.
Is there a way to load typekit fonts dynamically, much like the Google Font API?
That is, how can I declare dynamically on each page the font name in a css link and load just the font(s) that are required for that page, instead of adding fonts into a kit and the loading the whole kit.
I have found a solution, posting it here in case it is useful for someone else:
I will use the Typekit API to dynamically create a new 'kit' (i.e. javascript file) for every different combination that my app requires, instead of including all of them in one big 'kit'.
See: https://typekit.com/docs/api/kits
Thanks anyway for your answers!
You could write a server side script that, depending on the page, will generate a different css file with the font-family rule(s) you wish.
Then you could use #import to bring this rule into your main css file.
TypeKit has recently introduced a way that users may find useful to perform functionality similar to what you are looking for but doing it in a very easy way without having to use the API. They call it Dynamic Subsetting.
As I write this it is only available for East Asian Fonts, however, there is a workaround to use it with other TypeKit fonts. The workaround comes from this site.
Add a East Asian Font such as Source Han Sans Japanese. This will automatically convert the kit to a dynamic kit.
Select each font and under the Character Set options choose Dynamic Subsetting for each font.
Remove the East Asian Font.
Publish Kit.
Even if you remove the East Asian Font, the kit will remain a Dynamic Kit.
It seems as though the use of custom fonts on webpages is becoming increasingly common. With services like TypeKit, there is a also an increasing selection of high-quality fonts to work with.
I'm wondering: Has anyone started building sites that use #font-face fonts exclusively? (Can I finally get rid of Verdana / arial and swap in Myriad?) Or is it still too soon?
Thnx,
I just recently built a website for a client that uses custom fonts (I can't show you because it's not public yet). There is really no reason not to, honestly. #font-face degrades gracefully for browsers/devices that don't support it, and there are very few real downsides to it.
However, the problem with #font-face is that you can't just slap any font onto your website. To build on your example, you would not be able to use Myriad Pro with #font-face because its license does not allow it. Fonts have to specifically allow direct linking in their licenses in order for you to be able to use them on your website. So it isn't as simple as picking any font and using it.
There are still some good free fonts out there, though--check out Font Squirrel and the Google Font API. If you'd specifically like to use a commercial font such as Myriad Pro on your website, you can use another tool such as sIFR.