How to install custom fonts in CSS? An Overview on Google Web fonts


Fonts are a part of website development which emphasizes our brand strategy. We should get better understanding of CSS font family. We are discussing here on how to use custom fonts in our sites and make it browser compatible and across devices.

Apart from generic fonts there is lot of custom fonts available which suits our needs. When we go for personal or entertainment websites we may choose artistic fonts and when are working on a company website we may prefer corporate fonts.
There are lots of free fonts available either in a .ttf format or .otf format.

Font formats

.ttf format file stands for True type font and .otf file stands for Open type font. You can install it in your computer.
For adding a custom font to our website, we can convert them online using font converter like Font squirrel.
It will output the web fonts in different formats like otf, woff,woff2 and svg in order to make the fonts work in different browsers thereby making them compatible and give consistent look.
.ttf and .otf has better compatibility to IE 9+, Chrome 4+, firefox 3.5, Safari 3.1,Opera 10.0.
.woff has shown compatibility with IE 9+, chrome 5+,Firefox 3.6,Safari 5.1,Opera 11.1
.eot is compatible with IE6+.
We can add these web fonts in one of the following methods. 
@font-face {
        font-family: ' Mywebfont ';
        font-style: normal;
        font-weight: 300;
        src: url('../fonts/Mywebfont.eot') format(‘eot’),
        url(‘../fonts/ Mywebfont.woff’) format(‘woff’),
        url(‘../fonts/ Mywebfont.woff2’) format(‘woff2’),
        url(‘../fonts/ Mywebfont.svg’)  format(‘svg’);
      }
    
.custom-text{
font-family: ’Mywebfont’;
}



How to use google web font in our website?

What is google web font?

Google web fonts acts like a CDN which caches all web fonts and renders wherever it is called. It is a fast way of rendering as they are
used widely and cached. All the fonts are licensed and open sourced and easily accessible to users.
Google web fonts host many font families which are grouped based on languages, categories, and styles. Preview of the fonts are available
for users to choose based on the preferences.
1) Select or choose the font of your desire.


2) Select the required font weights of the font to be imported to the website

3) You will get the link of the stylesheet of the fonts used.

4) In our custom css file the style should be added like,
font-family: 'Playfair Display', serif;

5) Instead of adding css file we can also import the Google font style sheet at the top of our custom css file. Like,
@import 
url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900');

Advantage of using Google fonts

When we observe the link, we find ‘fonts.googleapis.com/css?’ fetches the results of the User agents from which the fonts are accessed. Hence the deliver only what the particular browser or devices needs saving every requests to the browsers for all the font formats.

Downside of using the local fonts

When we host our web fonts, we may have to deal with correct link to each font type, ensure browser compatibility, and deal with legacy browser’s bugs.

Note from Google documentation

For better compatibility results in IE it is recommended to place the tag of font stylesheet right after the opening of the tag as a first element.

Comments

Post a Comment

Popular posts from this blog

What are some mistakes people make when they start learning HTML, CSS and JavaScript?

Image
Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu
Read more >>

How to initialize Datatable plugin?

Image
How to initialize Datatable plugin? Datatables.net is a sophisticated plug in built on Jquery, JavaScript library which provides more functionality to normal HTML tables. The plug in offers search, pagination and sorting functionalities. The assets file can be downloaded From the website, CDN From website: https://datatables.net/download/index CDN Links: https://cdn.datatables.net/ Basic Implementation of Datatable Write the basic markup of the table with data Add a class name to the table Include all the assets As Datatables.net is built on Jquery, make sure that Jquery is downloaded before data tables Sites Followers Rank Country SitePoint 11456 5 Canada Learnable 123449 3 USA Flippa 143567 1 Brazil $(function(){ $("#example").dataTable(); }) You may continue th
Read more >>

Datatables.net - Plugin options

Image
Datatables jquery plugin options In PART i of this series we have discussed the basics of datatables.net plugin Datatables.net has a wide set of options which gives extensive interface support and browser compatibility. The following article clearly explains how to utilize the options provided by the plugin. The datatables.net CDN links for style sheet reference https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css The datatables.net CDN links for script reference https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css To disable all options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” at the bottom of the data table $('.promo-pricing-table').dataTable({ "dom": 'frtlip' }); }) To display “Show entries” at the
Read more >>