Category: Blog (Page 2 of 3)

10 Best Free Fonts For Websites

Well! Every now and then we come across to a situation where free font is a question. Which free font is the best? Are they good enough for my website?
So, today am listing down the best 10 free fonts that too from google.

Fonts have been picked after using them from quite some times and also keeping the readability in mind. Sequence starts from the best ones.

Font 1 : Open Sans

Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp.

Google Fonts Link Here

Font 2 : Roboto

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types. Designed by Christian Robertson

Google Fonts Link Here

Font 3 : Montserrat

The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of urban typography that emerged in the first half of the twentieth century.

Google Fonts Like Here

Font 4 : Source Sans Pro

Source® Sans Pro, Adobe’s first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

Google Fonts Link Here

Font 5 : PT Sans

PT Sans is based on Russian sans serif types of the second part of the 20th century, but at the same time has distinctive features of contemporary humanistic designs. Designed by Alexandra Korolkova, Olga Umpeleva and Vladimir Yefimov and released by ParaType in 2009.

Google Fonts Link Here

Font 6 : Lato

Lato is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google.

Google Fonts Link Here

Font 7 : Oswald

Oswald is a reworking of the classic style historically represented by the ‘Alternate Gothic’ sans serif typefaces. The characters of Oswald were initially re-drawn and reformed to better fit the pixel grid of standard digital screens. Oswald is designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices.

Google Fonts Link Here

Font 8 : Pontano Sans

Pontano Sans is a minimalist and light weighted Sans Serif. Pontano is designed mainly for use as a display font but is useable as a text font too. Pontano Sans has been designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices.

Google Fonts Link Here

Font 9 : NTR

NTR is a Telugu handwriting font inspired by the artist Bapu who is famous among Telugu people. The Telugu is designed and developed by Purushoth Kumar Guttula in 2013 and made available by Silicon Andhra under the SIL Open Font License v1.1.

Google Fonts Link Here

Font 9 : Quicksand

Quicksand is a display sans serif with rounded terminals. The project was initiated by Andrew Paglinawan in 2008 using geometric shapes as a core foundation. It is designed for display purposes but kept legible enough to use in small sizes as well. In 2016, in collaboration with Andrew, it was thoroughly revised by Thomas Jockin to improve the quality.

Google Fonts Link Here

Content Source for fonts: Google Fonts

TIP: Use google fonts by importing in css to increase page speed.

For more tips and coding standards you can read this.

Happy Coding!

How to write angular services in angular 4 ?

Recently I was working on this angular project when I got stuck to a place – angular services. I wanted to use global variables and functions but had no clue how do i achieve it. After lot of research and going through angular docs i finally ended up to a solution of services.

Angular Services is nothing but an inject-able piece of code that every component can call and use. We will follow the steps to achieve it:

STEP 1

In your command line write:

ng generate service service-name

(service-name will be name of your service) now you will see two files added to your app folder.

STEP 2

Open the file service-name.service.ts and write the following code:
import { Injectable} from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http'; // For http calls if any else you can remove this line.

@Injectable()
export class PortfolioService {

headers = new Headers();
options;
api_url = '';
site_url = '';
skin = '';

constructor(private http:Http) {

this.http.get('assets/config.json').subscribe(data => {
this.skin = data.json().skin;
this.renderer.addClass(document.body, this.skin);
});

}

getapiurl(){
this.http.get('assets/config.json').subscribe(data => {
this.api_url = data.json().api_url;
console.log(this.api_url);
});
return this.api_url;
}

getsiteurl(){
this.http.get('assets/config.json').subscribe(data => {
this.site_url = data.json().site_url;
console.log(this.site_url);
});
return this.site_url;
}

}

Here in our example we are fetching the values for api_url , site_url and skin from config.json file using http request.
the function getapiurl() has a return statement in the end which returns the value of the variable api_url

STEP 3

Open your component file and add following code at respective places.

Starting with imports:
import { ServiceNameService } from '../service-name.service';

In your @component add this:
providers: [ServiceNameService]

In your constructor add this to the parameter:
private service: ServiceNameService
Like this
constructor(private service: ServiceNameService )

Now comes the important part of calling the function that we created in the service file.
We have declared a private variable service in our constructor using which we will call our functions.

this.service.getapiurl()

The above code will give the output as the value of the variable we returned in service.
Thats it!
Now you can use the same function as many times we want and in every component we like.
For any queries leave a comment or you can contact me on the given details in the sidebar.

Enjoy! Happy Coding.

How to add custom post type to wordpress?

WordPress is a savior! Custom Post Type is cherry on cake.

We may or may not like it but, we all have to agree that its something that gives us as front-end developers freedom, to have their own CMS platform without any back-end support.

So, to add more to wordpress we often get the need on how to add a custom post type to our theme. In this post will explain each steps as to how to create and fetch too.

Step 1 – Open function.php

functions.php is a file where we can create our custom hooks, actions and also our custom post type. You’ll find it in the theme folder.

Step 2 – Paste the below code in functions.php

Here I am creating a custom post type for “Discourses” so here is the code:

//DISCOURSE POST TYPE CODE
$labels = array(
'name' => 'Discourses Type',
'singular_name' => 'Discourses',
'search_items' => 'Search Discourses Type',
'popular_items' => 'Popular Discourses Type',
'all_items' => 'All Discourses Type',
'parent_item' => 'Parent Discourses',
'edit_item' => 'Edit Discourses',
'update_item' => 'Update Discourses',
'add_new_item' => 'Add New Discourses',
'new_item_name' => 'New Discourses',
'separate_items_with_commas' => 'Separate Discourses Type with commas',
'add_or_remove_items' => 'Add or remove Discourses Type',
'choose_from_most_used' => 'Choose from most used Discourses Type'
);

$args = array(
'label' => 'Discourses Type',
'labels' => $labels,
'public' => true,
'hierarchical' => true,
'show_ui' => true,
'show_in_nav_menus' => true,
'args' => array( 'orderby' => 'term_order' ),
'rewrite' => array( 'slug' => 'discourses/discourses_type', 'with_front' => false ),
'query_var' => true,
);

register_taxonomy( 'discourses_type', 'discourses', $args );

register_post_type( 'discourses',
array(
'labels' => array(
'name' => __( 'Discourses' ),
'singular_name' => __( 'Discourse' )
),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'supports' => array( 'title', 'editor', 'thumbnail' ),
'rewrite' => array( 'slug' => 'discourses', 'with_front' => false ),
'has_archive' => true,
'supports' => array('title', 'page-attributes', 'editor', 'thumbnail', 'excerpt', 'custom-fields', 'comments')
)
);

Now, watch closely! In the code above for the custom post type “Discourses” replace it with your type exactly the same way. Its case sensitive and if you notice there is “s” at some places and at times not. The D is capital and at sometimes its not. So replace the keyword with full attention.

Step 3 – Fetch Data To Template.

Now, we have our custom post type of “Discourses” ready in our back-end. You can add posts, category and featured image too just like default posts of wordpress. So, now how do we fetch the data to a specific template/page? First, for custom post type you always need a category present only then you can fetch it. So, to fetch the data category is most important.

Wordpress Categories

Paste the below code in your template

<?php
$args1 = array(
'posts_per_page' => '-1',
'post_type' => 'discourses', /* This is where you should put your Post Type */
'orderby'=> 'menu_order',
'tax_query' => array(
array(
'taxonomy' => 'discourses_type',
'field' => 'slug',
'terms' => 'All' /* category you make name it here*/
)
)
);

$my_query1 = null;
$my_query1 = new WP_Query($args1);
if( $my_query1->have_posts() ) {
while ($my_query1->have_posts()) : $my_query1->the_post(); ?>

<!-- Your HTML comes here -->

<?php endwhile;
}
wp_reset_query();
?>

That’s it! Your custom post type is ready to go.
For any further help leave a comment or you can contact me on the details given on the sidebar.

Page 2 of 3

Powered by DisenoBox