I'm hoping to confirm that if I purchase an open type font from a foundry that I can then use it on the web by using the #font-face command.
Is this true?
That is correct, for more read this. But the client browsers need to support #font-face.
Related
Due to some concerns with GDPR I want to host all the google fonts myself
For background, I am building a text editor in which the user can pick any google font. The chosen font is then loaded on the fly.
This is not a problem, I downloaded them all from the official Git repository. However, in the zip they only give you ttf files not woff. I have read for max compatibility/performance woff is the preferred choice.
I have found sites like this that let you get individual fonts as woff but I want them all.
Does it really matter if I just use the ttf ? I can load them dynamically using font face api but is that OK cross browser?
If answer to 1 is that I should use woff (or something else), then how can I get the entire Google Fonts library as woff
Unless you want to support IE, it's well supported across all other modern browsers.
TTF/OTF - TrueType and OpenType font support
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 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.
I have a web-app (Java/HTML based) on cloud. Client will be accessing it in IE/Chrome or Mozilla.
I want to use Helvetica or any similar fonts but they are, by default, not available in systems (windows/IE/Chrome/Mozilla). Is there a way I can ship these fonts with my project?
Secondly are there any good free similar ones, which dont require licensing?
But most importantly, how is it possible technically? Do I put that as resource in my web-app? If yes, how? and would it then prompt users to download or install it - because thats a no (we cant ship installables with this product).
Thanks
Unless you have a license for the font, you can't include it with your project.
You can use something like
Google Fonts - free
Font Squirrel - free. Option to include fonts that you have licenses for.
Type Kit - different licensing options.
Font Squirrel is a good way to "package" it because it is just CSS + files for the fonts, as the others are cloud-based. You can filter by "web fonts" and then download the "Web Font Kit" which has everything you need. Easy!
To complement MikeSmithDev’s answer with a technical point: You can use the #font-face technique (described on many pages also frequently asked about at SO) just as you would on a web page, but you need not refer to font files in a server. You can simply include the .wof, .eot etc. files in the application package and refer to them with relative URLs, as in
#font-face {
font-family: 'Source Sans Pro';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
}
body { font-family: Source Sans Pro }
Although expressions like “downloadable fonts” and “web fonts” are often used, the technique works fine this way, too, without needing any download (apart from getting the application of course) or Internet connection when using the application.
So the user will not be prompted for allowing download, and he does not need to install the fonts; they are directly used by the browser.
I downloaded the Franchise Bold Font. I know how to use it in my code, but where do I put the font files in my webserver root so that they get found and used?
the URL is: http://www.derekweathersbee.com/franchise/
To use a font on a web page it needs to be a WebFont - you can't just put a TTF file onto a webserver.
Font Squirrel offer a service to create/convert WebFonts - there's a fair bit of info on how it works there and a Google for webfonts will bring up a tonne more.
Obviously you need to rights to do convert and use the font - the font you're using appears to be free but if I were you I'd credit the creator/throw them a link somewhere!!