Are Google Fonts as reliable as the standard fonts shipped with PCs, in terms of browser compatibility? Right now we upload a lot of custom fonts for our site, but we have some issues with various browsers (even across web standards). Some say just go with Helvetica, Arial and the usual suspects for across the board rendering accuracy. But do Google Fonts offer creative solutions without sacrificing rendering accuracy?
In short, yes.
Web fonts are great, but you need to remember that if the content delivery network is down then users will not get the font, so make sure you include fallbacks in your font-family all the way down to either serif or san-serif.
The other option is to package the fonts you want to use so that users can download them if they are missing, but the packaging and delivery process is pretty cumbersome. Also you might run into licensing issues.
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 am developing the frontend of a web application and the design requires the use of the Segoe UI font. I used this font for a few text areas but in non Windows systems (Mac OS borwsers, Android, etc) those texts don't render with the Segoe UI font.
After googling this I found that this font is used by Microsoft. My question is. Can just use the font files in the frontend an use #face-font to include the font in the frontend? Or do I need some licence or something like that?
You can't license Segoe UI from Microsoft without direct contact, you can license the mono font from Ascender Corp who are linked to from Microsoft webpage for Segoe UI, however it is not the same as Segoe UI.
I would suggest Open Sans as an alternative to the Segoe UI font, it is quite similar and has much more open licensing for using as webfont (that link is actually to Google's hosted version of the font) - So you could have Segoe as the main font then fall back to Open Sans on non Windows 7+ Systems.
Technically you can embed the font through css, but I don't think the license will allow you do do that legally. Couldn't find out right off the bat though - msft's licensing is as always a maze to navigate.
Could you find an alternative font on Google web fonts or Typekit and use instad? They all have permissive licenses? (Open Sans is quite similar, for example)
If you are using CSS simply call the font in a font stack. It can be the first font or listed second or third. Each device or browser will use the fonts in your list as they are found on the system. If you put a Mac-only font first, Windows systems will default to the second or third font it finds installed.
If you want to host the font yourself, be mindful that some devices will not support certain fonts and you'll still need to list alternative fonts no matter what. Check your analytics to see what types of devices and browsers are visiting. Pick the most popular as your main font and then add fonts for the others in descending order.
There's no guarantee that any font will actually load. There are too many variables and the users can always uninstall fonts or shut off javascript and other nonsense that can drive a web designer crazy.
I use a combination of hosted and installed fonts in most of my sites, especially when design is more critical.
I'm curious which one would be better or more standard to use in websites. I'm leaning toward Google Web Fonts, but I'm apprehensive about needing an additional CSS file.
Well, I would use #font-face, simply because I had some bad experience with Google Fonts. Especially in IE, Google font just wont work correctly.
Also, I've used Google Fonts directly from their servers, so the load time could be a little longer.
I wold recommed you something like FontSquirrel because they have type formats for allmost all browsers in whenever I've used them, they just worked.
Cheers
Google web fonts API uses #font-face under the hood, so there isn't a real technical difference. Google just provide a wrapper around font-face which handles some cross browser differences and gives you some convenience functions, kind of like what jQuery does for JavaScript.
https://developers.google.com/webfonts/docs/technical_considerations
Sure, it is some extra resources for your project and that's a valid concern. And it's some extra complexity that you have to maintain, and anyone new to the project has to learn. But maybe the trade-off is worth it for your project.
I know I've had times spent converting fonts to various formats so #font-face would work for multiple browsers, and Google web fonts would get rid of this work for you.
I use some fonts in my new website that do not exist by default on normal user computers.
After some search I got that there are some tools that might help, like Google web-fonts.
Fonts that I used are : Bebas , Sansation and Quicksand
But I couldn't find them on Google web fonts.
How do I do use these fonts ?
And what are other cross browser solutions?
Different fonts are created by different font foundries. Not all fonts will be found in the same place. And not all fonts are available to be used as web fonts because of font-licensing.
Fonts are not always free and good fonts are rarely free.
You can usually find out if a font is available as a web font, and who owns the font by googling the font name plus "#font-face".
You absolutely should know where you'll be getting the fonts you'll be working with in advance. If you have three fonts that come from three different font-services then that's bad. Firefox especially wont like it much and you'll have some pretty bad fout problems.
Fortunately for you, all those fonts are available through font-squirrel
Bebas
http://www.fontsquirrel.com/fontfacedemo/Bebas
Sansation
http://www.fontsquirrel.com/fonts/Sansation
Quicksand
http://www.fontsquirrel.com/fonts/Quicksand
What you will want to do is download all those fonts, them run them through the #font-face generator
http://www.fontsquirrel.com/fontface/generator
HOWEVER It reads to me like you don't really understand what #font-face is, or how it works. So I'd recommend reading up on it some more.
I am not sure what exactly you mean, but if you want to convert your website's font into a custom font which is viewable for the visitor, you could try use the curfon solution.
I'm launching a new site soon and would like to use a nice font (for headings etc). I've experimented with scripts like cufon and found them very disappointing. The way I see it, I have two legal options:
Create my own font stacks using fonts that are licensed for #font-face (like fontsquirrel)
Subscribe to typekit
Use standard font stacks including some of MS Office's nicer fonts (not keen on!)
I'm looking for comments from someone with experience here, not speculation please (I can do that myself!).
Has anyone used typekit? Have you noticed any performance issues?
I used the typekit free trial, and loaded it using Google's webfont loader (which works with Typekit, Google fonts, and Ascender. I've never used Ascender, but found Typekit and Google fonts to be of about equal speed. This speed was not enough to deter me from using it. I have a very lightweight website, so one large item didn't impact it too much, but given what broadband penetration is and how much processing power it seems to use I wouldn't dissuade you from using this. These font files are all smaller than most small .swf files and people don't balk at using those.
Also, in regards to Safari on Mac, I've noticed no issue with Google fonts and I'm curious if the javascript that #rvlanen references is the javascript in the typekit font loader. Google's webfont loader doesn't seem to have this issue.
Hope this helps
P.S. Link to Google Webfont loader: http://code.google.com/apis/webfonts/docs/webfont_loader.html
If you're concerned about performance, you could do testing with TypeKit's free preview account. They also have public uptime and response stats.
There is also the option of licencing fonts for hosting on your own server. FontShop will sell you a set of WOFF+EOT fonts for a one-off price, but that will only work in IE and FF 3.6+ at the moment. You can also transfer the purchase to a free TypeKit account, which will cover Chrome + Safari too.
Typekit doesn't work in Chrome for Mac when using HTML5 markup. Apparently this has to do with the way their JavaScript works. Read more about it here.