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
Related
Say I have 2 versions of font customFont1.woff2 and customFont1.woff. I put the woff 2 version first and then the woff version 2nd in font declaration file. The browser supports both font formats. Does both of the fonts get downloaded or does it only download woff2 and then ignore the woff version or it downloads the other version of fonts too, to check the best format font to avoid FOIT?
according to https://drafts.csswg.org/css-fonts-3/#descdef-src:
This descriptor specifies the resource containing font data. It is required for the #font-face rule to be valid. Its value is a prioritized, comma-separated list of external references or locally-installed font face names. When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate.
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 !
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 use google webfonts in my website. Unfortunately, it's Korean language and the font files are bigger than English. It's just one font-family but 3 files are downloaded (normal, bold, extra-bold). Each file is about 9MB.
When you first visit the site, it takes about 20 seconds to download the fonts and you can't see the letters. Second page is ok as the fonts are already available.
I want to workaround this problem. Is there a way to detect if the font files are already downloaded. I'd like to use a non-webfonts if the webfont is not downloaded yet. And if the webfont is downloaded, I want to set the font-family to the webfont.
I also want to implement a way to change the font-family on the fly on the first page when the download is completed.
Thanks.
Sam
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!!