• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » How To Use Any Web Font From Own Hosted Library

By Abhishek Ghosh October 16, 2013 11:57 am Updated on October 16, 2013

How To Use Any Web Font From Own Hosted Library

Advertisement

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 –

Advertisement

---

  1. 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.
  2. Their server generate two Javascripts – you need to embed them to use Typekit.
  3. They do not supply any CSS file, unlike Google Fonts.
  4. 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.
  5. The CDN has header that allows to get the Javascript rendered on a particular domain.
  6. 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 :

  1. EOT (Embedded OpenType) for Internet Explorer
  2. OTF (OpenType) or TTF (TrueType) for the rest of the browsers
  3. Additionally include WOFF (Web Open Font Format) and
  4. 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 :

 

Vim
1
https://github.com/Breefield/typecatcher

 

How To Use Any Web Font From Own Hosted Library

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:

 

Vim
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 :

Vim
1
font-family: 'TheCustomizeWindows';

Obviously, you have uploaded all the files to a directory (TTF, OTF etceteras), so define the path :

 

Vim
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 :

Vim
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 :

Vim
1
2
3
4
html {
font-size: The-Percentage%; /* 10px browser default */
-webkit-font-smoothing: antialiased;
}

A sample CSS from practical life will be :

Vim
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

This Article Has Been Shared 839 Times!

Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to How To Use Any Web Font From Own Hosted Library

  • Syntax Highlighting : All About the Colorful Snippets

    Syntax Highlighting is a method for coloring certain words and characters in a text depending on their importance in in an piece of code or snippet.

  • Self Hosted WordPress on Cloud Server for Dummies

    Self Hosted WordPress is itself a scary phrase to a non-tech person and add Cloud Server on it. Here is Very Easy Guide to under Self Hosted WordPress.

  • Tips For Maintaining Security of Data in the Cloud

    Tips For Maintaining Security of Data in the Cloud will help specially the naives to cloud storages like iCloud, Dropbox, Amazon S3 or Rackspace Cloud Files.

  • Cloud Computing : Your Concerns and Thoughts of Richard Stallman

    Cloud Computing as terminology raises the eyebrows of some users who are associated with academics and computing for many years. Let us discuss on the topic.

  • Secure Connection to Cloud Infrastructure by VPN Tunnel

    Secure connection to Cloud Infrastructure by using VPN Tunnel – on Secure Cloud Computing Guide, we pointed the importance of the connecting device.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • Cyberpunk Aesthetics: What’s in it Special January 27, 2023
  • How to Do Electrical Layout Plan for Adding Smart Switches January 26, 2023
  • What is a Data Mesh? January 25, 2023
  • What is Vehicular Ad-Hoc Network? January 24, 2023
  • Difference Between Panel Light, COB Light, Track Light January 21, 2023

About This Article

Cite this article as: Abhishek Ghosh, "How To Use Any Web Font From Own Hosted Library," in The Customize Windows, October 16, 2013, January 28, 2023, https://thecustomizewindows.com/2013/10/how-to-use-any-web-font-from-own-hosted-library/.

Source:The Customize Windows, JiMA.in

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT