How to use any web font from own hosted library describes the ways any web font can be used from either CDN or Server. This guide has good potential for F/OSS developers. Knowledge should be free – it is fully immoral to make the way of procuring knowledge very costly affair. If knowledge was not Free, we would never get many great artists, inventors – because most of them had no money. The only morally right Printed books on this Earth are the religious books. You will hear that “Donating a Religious Book” earns a good karma – be it Bible, Bhagavad-Gita or any religious books. Practically you can use any Open Source or GNU GPL Licensed Font or a Premium font after paying the money in your own way. GNU GPL means Freedom, Freedom never means stealing – you can do something from scratch by getting inspired without direct monetary gain and distribute it like religious books, its morally correct. Moral, Ethical has difference with Legal. So, one must be more intelligent on Legal parts too.
Other aspect is Security – a Free Software or Open Source Software is more safer – WordPress, various good Linux distros, PHP, MySQL can never be unsafe – one or the other user will discover an unsafe point and “null” it or rather fix the bug. In these days of PRISM, NSA – we all should be aware about protecting others’ security, safety and privacy. Embedding one closed source javascript on webpage, can not only supply all the information of the visitors, but also can be a point of the server’s security vulnerability. This guide how to use any web font from own hosted library is dedicated to the Peoples who works for giving others Free Software. We have described everything, you can use or abuse in your own way. We are neither we are forcing any reader to hack or crack nor serving any script to circumvent any one’s “Intellectual Property”. In other words, none can claim this guide on how to use any web font from own hosted library describes the ways any web font can be used from own library is illegal. Its Legal and Ethically Correct.
How To Use Any Web Font From Own Hosted Library : Understanding the Closed Source Fonts
Typical example of a closed source font as a service is Typekit. Typekit kind of thing is Google Fonts. We wrote about how to use Google Fonts within a post. Typekit will hugely dislike this kind of guide. Unfortunately, the closed source model never works because has alternatives and all are running on Free Software. Plus the security and privacy is a big issue. What Typekit does is quite easy –
---
- They basically ask to create or use a Library, that Library has a number. There is no difficult number, its just a number arranged in their own way.
- Their server generate two Javascripts – you need to embed them to use Typekit.
- They do not supply any CSS file, unlike Google Fonts.
- They claim their CDN is very fast, unfortunately, Rackspace Cloud Files aka Akamai costs $1.00 / month for a huge usage. So, practically for one Javascript the cost is negligible.
- The CDN has header that allows to get the Javascript rendered on a particular domain.
- The CSS is pulled by the Javascript, now the thing becomes like Google Fonts.
We are not going to Hack Typekit. Its not needed. Why in the next paragraph. Typekit, practically did the biggest mistake by doing work with Google. Otherwise it was not possible to discover the full path.
How To Use Any Web Font From Own Hosted Library : Add a Font-Face Section to Your CSS Code
So, the basic thing is, instead of searching how Typekit works, its better to find the :
- EOT (Embedded OpenType) for Internet Explorer
- OTF (OpenType) or TTF (TrueType) for the rest of the browsers
- Additionally include WOFF (Web Open Font Format) and
- SVG (Scalable Vector Graphics)
So, your divine work is to find the “Open” type of that font, the whole Library. For example, for development purpose on localhost, you can use this Ruby repo to download the Full Library of Typekit which you have already paid :
|
1 |
https://github.com/Breefield/typecatcher |
You simply need the files. Whether you will use them or distribute them is your Legal and Ethical issue. The example is given with Typekit, it can be given with a Free Font. Typekit is not ideal on many points, its bad idea to follow their way. As we said, we will not give any down-loadable source which circumvents any method, we hope you have understood the thing. Open the CSS file for the Theme you are working with. Add a font-face declaration to the style code:
|
1 2 |
@font-face { } |
First step is to define inside the font-face, give the font a name like as if TheCustomizeWindows is a valid Font Face :
|
1 |
font-family: 'TheCustomizeWindows'; |
Obviously, you have uploaded all the files to a directory (TTF, OTF etceteras), so define the path :
|
1 2 |
src: url ('fonts/TheCustomizeWindows.otf') format ('opentype'); |
So, you will continue the Stylesheet in this way. So, instead of loading Javascript from other’s website or CDN, you can make the things easier ! Typekit will definitely not love, but most will love the practical part. Anyway, this is how you can add various types of Font variation :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*default version*/ @font-face { font-family: 'TheCustomizeWindows'; src: url('fonts/TheCustomizeWindows.eot'); src: local('TheCustomizeWindows'), local('The-Customize-Windows'), url('fonts/The-Customize-Windows.otf') format('opentype'); } /*bold version*/ @font-face { font-family: 'TheCustomizeWindows'; src: url('fonts/TheCustomizeWindows.eot'); src: local('TheCustomizeWindows Bold'), local('TheCustomizeWindows-Bold'), url('fonts/TheCustomizeWindows_bold.otf') format('opentype'); font-weight: bold; } /*container element*/ div { font-family: 'TheCustomizeWindows', sans-serif; } /*H2, H3 elements inside the container div*/ H2, H3 { font-weight: This-Value bold; } |
You can make Anti-aliased :
|
1 2 3 4 |
html { font-size: The-Percentage%; /* 10px browser default */ -webkit-font-smoothing: antialiased; } |
A sample CSS from practical life will be :
|
1 2 3 4 5 6 7 8 9 10 |
@font-face { font-family: 'TheCustomizeWindows500Regular'; src: url('TheCustomizeWindows-sans-500.eot'); src: url('TheCustomizeWindows-sans-500.eot?#iefix') format('embedded-opentype'), url('TheCustomizeWindows-sans-500.woff') format('woff'), url('TheCustomizeWindows-sans-500.ttf') format('truetype'), url('TheCustomizeWindows-sans-500.svg#TheCustomizeWindows-sans500Regular') format('svg'); font-weight: normal; font-style: normal; } |
This is all about your Typekit like Fonts. I will design a paid Typekit Font and give you the Javascript linked from this post. That actually has some good logics for proper rendering. I am not going to supply any thing of Adobe, the linked webpage will face an issue to show up all the stuffs. Thats a fault of Google Mod Page Speed. They have disclaimer that it can happen.
Happy hacking but develop good, creative, productive things which others can use like Linux in the way was build. You can find me on deviantArt too, in case you need Graphical peoples :
http://abhishekghosh.deviantart.com/
Tagged With how to use a web font code to show the picture , source for web-hosted fonts , web hosted otf fonts