Add Google fonts to your website

Ever imagined how some websites just look so professional than others even when the design is so simplistic, well all thanks to Google fonts. Google fonts are used by "many" websites these days to make their websites look more professional and beautiful.
So Let's move to the implementation of Google fonts.

This is the basic structure of your website:


<!DOCTYPE html>
<html>
<head>
<title>Hackslang</title>
</head>
<body>

<p> This is my font</p>

</body>
</html>


Step 1: Go to Google Font website.

Step 2:Select the font by clicking the + symbol on any font block.

Step 3: Now your font is selected , click on the Family Selected block which will be there at the bottom of your screen.

Step 4: copy the link give in the block like <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> and paste it inside the head tag in your html page like this


<!DOCTYPE html>
<html>
<head>
<title>Hackslang</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>

<p> This is my font</p>

</body>
</html>


Step 5: Now add the font-family attribute to your block in css and see the magic.


<!DOCTYPE html>
<html>
<head>
<title>Hackslang</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>

<p style=" font-family: 'Roboto', sans-serif; "> This is my font</p>

</body>
</html>



The font-family:'Robto',sans-serif will be give just below the font link in the website.

Comments

Post a Comment

Popular Posts

NOT SO COMMON C++ : Access Specifiers

Image
Hello everyone , wecome to our NOT So Common C++ series. In the last post for NOT SO COMMON C++ we discussed about some shortcuts , initializations of pointers, structures ..etc. So today lets cover some tricky portions of C++ that are a bit confusing for the beginners. I hope you people have basic knowledge of class in C++.  Access Specifiers : public , private , protected. Lets see an example to get an overview of access specifiers- #include<iostream> using namespace std; class Example { private :     int priV ;                              // PRIVATE VARIABLE or PRIVATE MEMBER public :      Example()                           //Constructor      {             priV =  10;                  // initializing "priV"             proV =  4;                   // initializing "proV"     void pubFunction()            // PUBLIC FUNCTION     {         cout << "public Function executed and priV = " << priV;   //
Read more

Why to choose C# ? - for Beginners

Image
Hello Everyone, in my last blog " Cross Platform development " I promised(kind of) to tell you "why to choose C# ?". So here we are ;-) ,  lets start exploring interesting features of  C#. DIFFERENCE BETWEEN C# and VISUAL C# When you program with C# in Visual Studio IDE it is then called Visual C# Visual C# is just the marketing name that Microsoft uses for C#, therefor Visual C# is just C#. GENERAL INFO : Developed By : Anders Hejlsberg(Microsoft) Most recent version : C# 6.0 First Appeared : 2000 Previous name: Cool(C-like Object Oriented Language)....{C# is much better I know :-)  } FEATURES : 1. Direct memory manipulation is not allowed in C# , helps to carry out safe operation. 2. Automatic memory management(Since It is on .Net). 3. It has a built in suport to turn any component into web service that can be accesed over the internet. 4. It supports Polymorphism,Interfaces, Data Encapsulation. 5. In C# we can directl
Read more

Li-Fi - Experience The Lightning Speed

Image
LiFi - Light Fedility   Ever wondered what's worse than No Internet ?................. slow internet...right. In the last decade we have seen different ways in which we connect to internet. But ever thought of connecting to the internet at a wooping speed of 10Gbps in your house, neighborhood or at your office ?... it was only made possible by the Li-Fi technology which promises to bring 10Gbps connection speed to you. Li-Fi is still very much in its developing stage but it is already making alot of noise in the tech market. According to many experts the Li-Fi industry will touch $113bn by 2022 and may surpass our dear friend "The Wi-Fi". According to the reports Li-Fi is 100 times faster than Wi-Fi. In 2014 Sisoft(mexican company) was able to transfer data at a speed of 10Gbps using light lamps i.e using lightning spectrum.  How it Works?   In Li-Fi the data is transmitted by modulating the intensity of light coming out of the LED buld(when curre
Read more