I've learnt that Google automatically serves TTF, EOT, WOFF, or SVG font files depending on the browser / device it's accessed from.
Now I am planning to host and serve the font files from my server itself, for which I would first have to download all the file formats of the web font(s).
How or where can I download the 4 file formats for a web font that I would like to use?
PS: By using different browsers -- Chrome, IE9 and Safari (dev - iPhone UA), I was able to get the WOFF, EOT and TTF formats. No luck with the SVG format though. It would be awesome if there's an even simpler way.
EDIT: Oh, and by the way, I do know that I can download various formats from online web fonts, but I am talking about downloading from the official repo here.
You can download all the Google Fonts directly from the Github repository (google/fonts), but as you know, only the ttf/otf format. So with those fonts, you can generate a web font kit using Fontprep or with the generator of FontSquirrel.
I hope it will help !
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
Having a difficult time trying to get the proper .ttf file from the font family and set-up into my website.
https://freefontsdownload.net/free-futura_bk_bt-font-73014.htm
body {
font-family: Algerian ;
}
can i know what is the font-family for the link i provided ? ( does not wanted to download and save it into my server )
You can directly import fonts that can be found on Google Fonts
with tags without needed to download and serves the font files locally. However, there are also fonts that are not available on Google Fonts. For those fonts, you can only download and serve it locally on server there's no way to escape. Or you may try to search and see is there anyone who have the font files on their server and then directly use theirs', but I can say most probably you wont be able to use as you will be blocked by CORS (Cross-Origin Resource Sharing).
It's actually quite simple to setup fonts. After you downloaded the font files, normally there will be font files (eot, ttf, svg, woff...) and a CSS file, just put the font files somewhere on your server (prefer on root folder named "fonts"). Then open the CSS and edit the source to the directory that you store your font files ealier. url("../fonts/your-font.ttf")
simply go onsite of google font choose font then copy meta tag then use font family.
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.
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 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!!