Working on a client project - reskinning their intranet. The way their security is set up, all external media is denied, including any Google Fonts. The tricky part is they're requiring us to restyle with a Google Font.
Prompting users to install the font themselves is, of course, unacceptable. Is there a way I can download a Google Font file and put it locally on the website?
UPDATE: After a bit of legwork, I found that you can download and use the compressed version of a google font to keep your site relatively optimized. Go to the import URL:
http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic
In the src attribute (the themes.googleusercontent.com URL) download the .woff file it links to, rename it as you please, upload it to your website's media directory, then point to that local file instead of Google's URL.
You can download them from Google and host them on your own server
Use the download button in the upper right corner at Google Fonts to download your collection
See https://developers.google.com/fonts/faq#Download_Fonts
As #Mike already mentioned in a comment, there is localfont.com which helps you download all font variants and generates cross-browser CSS for implementation. What you get from Google Fonts itself is ONLY TTF and therefore will not work on all Browsers. What you can manually download by accessing the Google CSS file actually depends on which Browser you use. localfont.com provides TTF, WOFF, WOFF2, EOT and SVG for all fonts available on Google Fonts.
Related
I'm currently using the CDN url and JS to fallback to local copy of the CSS file. In both cases our client isn't able to see the icons, just squares. "Our new firewall does packet inspection" is what the client says.
He is able to, however, go directly to the CSS file via the CDN URL without any issues; yet the icons will not show up. Any thoughts or recommendations?
In terms of site optimization and speed; is it better to include a font locally or use a css #import? (I'm using google's web-fonts)
You will need to do a test on your own. The simplest way to do so is to use a developer tools console in your browser and to check a network section to see how how long it takes for the files to be loaded. It is possible that your web server may dish out files slower or faster than google.
Additionally, some browsers, like Firefox, by default, may not include font files downloaded from a different domain. To make sure your site renders as expected, I would serve font files from within the domain that the user visits.
I am using #font-face to refer new fonts and it works fine.
My question is: are the font files downloaded to the computer from where my website is being visited or just stored temporarily? They do not get stored in Control Panel -> Fonts.
So is it just browser cache or the computer can get to have to font used in other software like Word etc?
Thanks for your help.
The short answer is no. When they're used in a webpage the browser just stores them temporarily. You would have to install the font separately for the other uses you mentioned.
When you have a font installed on your system, but the website you're visiting is using google fonts (in this case Muli), does IE9 load up your installed font file, or the one from Google?
In other words, how does IE9 prioritize which font file to load if there are two available with the same name?
EDIT:
I think the answer is that it uses the downloaded version of the font. I installed Muli and then used fiddler to watch the site and it downloaded the .eot
I'm not 100% sure that's right but it seems like it is. Doesn't explain why my client's fonts look ~ever~ so slightly different than mine, but she has some other issues I can't replicate so it might be a larger issue than just fonts.
Start IE, load the page (either locally or by internet), press the F12 key, click the Network tab, click the Start Capturing button, refresh the page. Does your font file appear within the list? If not then it is probably loaded from the OS and not from Google.
We all know that fonts can be embedded in web pages now with the #font-face CSS directive. In order to do this, the font to be embedded must be placed in a readable directory on the web server. This means that any suitably motivated individual can download the font and use it on their own machine.
Does this mean that embedding a font counts as redistributing it? If I were to purchase a font, can I embed it and use it in a web page?
EDIT
I'm asking all this because I'm considering embedding Helvetica in a web page.
You can only embed a font using #font-face when web-use is allowed in the font's EULA. Some fonts come with a separate license for use on the web.
If you're worried about people stealing your #font-face files, you could use a service such as Typekit which lets you upload your web fonts and embed them using their service.
I think this is a very difficult question - it depends on the country you live in, I think.
You paid for the font, so you're allowed to use it. I never heard that there was a conflict because of that.
The be 100% sure, I suggest to ask the creator of the font.