I would like to use a common Google Web Font so I added this link to my page:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700" />
How can I find out how likely it is that this font will already be in my browser. Is anyone aware of any published statistics?
You can find some stats for the font here (statistics tab):
http://www.google.com/fonts/specimen/Open+Sans
Incidentally, I can't actually figure out how to get to that from the Google font page itself, so just change the URL to find the stats for other fonts.
It shows how many times the font has been requested from Google's servers, but I highly doubt any stats exist for what fonts people have cached, nor would anybody go to the effort of trying to establish that. People's caches change all the time.
You are possibly worrying too much about the caching of the font. It's a tiny asset to load once if not already cached.
Related
I'm using Adobe Brackets editor and I want to know how I can install common fonts such as Arial and Helvetica. I want to directly install them into my system and not just link them into my projects every time. How can I get this done?
I think you might be looking for Google Fonts. Google hosts hundreds of high-quality, free, fonts that you can use in your web project. GoogleFonts acts as a CDN, allowing your project to download the required fonts as the page is being rendered, similar to how jQuery etc operate when referenced from a CDN.
HOWEVER, you can also download and install Google's FREE, OPEN-SOURCE fonts on your local system and use them locally in your apps, including Brackets. Here is a tutorial for doing that.
How To Install Google Fonts on your Own Computer
To be complete, here are a couple of decent resources for learning how to use Google Fonts CDN-Style (not what you requested, but for future purposes):
CSS Reset - How To Use Google Fonts
W3 Schools - Use the Try It beside the font you desire
CodeCourse 3-Min Video Tutorial (if you prefer video demo)
The second reference is probably most helpful as it shows you (in their typeface) the fonts that are available, and the Try It button shows you a code example for using that font. Straight-forward and simple.
Recently I’ve enabled a Content Security Policy for my web app. Based on my own testing in Safari and Chrome, everything works fine. I’m using report-uri.com to get error reports.
So far, the only reports I received are a number of blocked requests from Chrome browsers to Google Fonts for the Open Sans font. However, we don’t use Google Fonts or Open Sans in this project at all. I’ve searched through the whole source code (including libraries) for related terms, which confirmed that we don’t do anything with Google Fonts or Open Sans.
The reports don’t include useful information to find where the request to Google Fonts was made from, so I don’t know where to look any more. Because the reports only come in at some times during the day, but our app is used by a number of users throughout the whole day, I suspect it’s just one user. Maybe some kind of browser extension is causing this?
Does anyone have an idea how these requests could be caused? I’d like to make sure it’s not something on our end.
It's possible that a poorly made Browser Extension is attempting to load content in an un-kosher way. I haven't experienced it myself but there's at least one article out there on the phenomenon discussing how to avoid it from the perspective of an extension dev. Unfortunately there would be basically no way to be sure without finding the actual user(s) in question and asking them or testing from their machine.
It's also possible that user-side malware taking over the browser could load external elements on your page much like a browser extension; it's rather unlikely they'd bother loading Open Sans and nothing else, though.
As usual be sure to test your site in a variety of configurations and browsers (a favorite of mine is incognito mode in both Chrome and Firefox to ensure my cache/service worker aren't deceiving me). I would say if you don't find anything it's highly likely that it's in fact a user-side issue.
My code has this:
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
But I am sometimes finding that the googleapis is slow in my region. Can I host these fonts from my own server?
Yes you can. But doing it is a bit more complicated than saving CSS and the font files on your server.
The thing is, different Browsers use different font formats. Google solved this by delivering CSS rules with different font files depending on the user agent.
To support all browsers you will need the font files in TTF, WOFF, WOFF2, EOT and SVG format. But Google makes it unnecessarily hard to download the fonts files. From the google fonts site you can only download the fonts as TTF.
Also you will need cross browser CSS rules since you probably can not easily implement the user agent detection on your side.
To retrieve all formats you need to request the CSS file from Google with different user agents. Here is an outdated blog article listing some of the user agent strings to use. In the meantime WOFF2 was added and to actually get EOT you now need to send an IE6 user agent. IE7+ now will result in WOFF.
You can use the tool http://www.localfont.com/ to easily download all font formats and the corresponding X-Browser CSS.
Quick answer: YES
A quick googling revealed me these information.
Info Pages:
http://www.google.com/fonts/specimen/Source+Sans+Pro
https://www.google.com/fonts/specimen/Source+Code+Pro
They both are under the SIL Open Font License, 1.1
And this license do not impose much restrictions and allows you to host the font on your website.
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=ofl-faq_web#23261834
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=ofl-faq_web#c26665c2
you have to host the css files on your server , and also you have to write the code is it fails to load from the server then it pick up from some local storage or you have provide another server link .
yes you can.
marked in red in the top right corner of google fonts there is a download link.
source:
https://code.google.com/p/googlefontdirectory/
I downloaded a font from dafont.com and then added it to the stylesheet for a html file that's currently just on my computer. I changed most of the buttons to use that font, but now it seems to load way slower (it used to render almost instantly in my browser) because of the custom font. Is there a way I can fix this for the files local to my computer, and will it also cause the pages to render slowly once it's actually uploaded to a website?
You can try different approaches to improve performance:
Use a local reference before checking for an online version: this will work on your computer, but you never know if a user may have installed a different font with the same name (it's improbable, but that could break your expected look-and-feel).
Use lazy load to download the font after the page has been rendered: this may not be really useful is the font that you are using is the main font on your page.
Don't include #font-face for fonts that you are not going to use: some browsers will download the fonts whether they are used or not.
If possible, use fonts hosted externally (e.g.: in Google Fonts): this would make your page faster if the font is cached from previous visits, and it takes one connection away from your host.
This may sound a bit off but: choose the fonts wisely. If you pick a beautiful font but the files are 10MB, there will be a performance impact like it or not. And related to the file size,
If possible, gzip your font files: they will weigh less, they will take less time to download.
Read more about this topic on the links:
Preventing the performance hit from custom fonts.
#font-face and performance
I am trying to use Helvetica Neue 55 Light, I have it installed on my computer.
However, it is not showing up on other people's PC's.
So I tried font-facing it from my computer, but I was told there was an issue with the url, that I was using a relative url (to the folder in which the site is contained, I am using Neocities so that folder is not* in my computer, and I don't know how to add the font to such online folder if there are any?) and that I must use an absolute url.
Help? :s
You need to create a font kit.
This site will do it for you: http://www.fontsquirrel.com/tools/webfont-generator
However, it will not let you use a copyrighted font. Not all the font files on your computer are authorized for web use, but you can buy the license from the creater (these typically have a high price tag).
If your font is installed locally, specifying where it is on your computer will not allow people to access it from your website. You're going to need to either upload the font files to your hosting server (in this case, Neocities); or, failing that, upload it to another static hosting service, such as dropbox, and specifying the URL of where the file is stored then.
EDIT: You're probably better off not using Helvetica Neue or any Adobe font, unless you're willing to fork out hundreds of pounds for it.
Fonts are licensed differently for desktop use and for web use. If you have it installed on your computer you probably have a desktop license, but likely not a web license. The formats are also different in many cases, so if you have the desktop font it won't work to just put it on your server, and like others have said, you also can't just convert it in some cases without violating the copyright.
MyFonts is one vendor that sells Helvetica Neue Light. If you go to the buying choices page, you'll see that there are lots of licensing options. Make sure you buy the Webfont option if you want to deliver it online. After you purchase, there should be some instructions on how to use it.
There's actually a really good discussion going on right now about some of the different methods of delivering web fonts. That might be worth checking out too.