Implement Google and other fonts in your site style sheet

Provided you have downloaded fonts which need to get implemented in the site, do following stuff

Method 1

1. Create a separate folder fonts parallel to your other folder,
2. if you have all the formats of font, then paste all of them inside folder,
3. if you dont have all formats, go to the font generator eg: https://www.web-font-generator.com/
4. upload any of the format you have and generate all other formats like .eot, .woff, .svg, .ttf, .otf
5. Then as told earlier, copy those files inside your fonts folder,
6. then paste below code in the style sheet. please make sure your font path is correct along with correct font name.


@font-face {
	font-family: 'Oswald-Bold';
	src: url('fonts/Oswald-Bold.eot');
	src: url('fonts/Oswald-Bold.otf');
	src: url('fonts/Oswald-Bold.woff') format('woff'), url('fonts/Oswald-Bold.ttf') format('truetype'), url('fonts/Oswald-Bold.svg') format('svg');	
}

then in your css you can use as:


.h4{
font-family:Oswald-Bold;
}

Method 2

Before taking all these tensions to implement your font, you first check if the font is available in google fonts

1. First go to google fonts if the font you require is available or not.ie : https://fonts.google.com/

2. search your required font
3. Click plus icon to add font in your list as shown below

4. then you place your link inside tag of your site header as

<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

then use font as


.h4{
font-family:Roboto;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s