How to embed font in CSS (from web server OR google fonts)

Replace FontName with font’s name. The FontName is what you will be calling throughout the CSS classes.

@font-face {
     font-family: FontName;
     src: url(FontName.woff);
}

That’s how you embed a font in your web server. Now let’s learn how to embed fonts from google fonts API.

Go to fonts.google.com and make a collection of your favorite fonts (or simply the fonts you want to be embedded in the website).

You can do so by clicking the sign near each font.

Now that you have selected some fonts, “Families Selected” box will appear in the bottom of the page. Click that box and you will find a code similar to the one below:

<link href="https://fonts.googleapis.com/css?family=Baloo|Love+Ya+Like+A+Sister|Oswald|Roboto|Roboto+Condensed|Slabo+27px" rel="stylesheet">

Copy that into the <head> of your HTML file.

Now there will be relative CSS rules given in the same window. Find something like this:

font-family: 'Roboto', sans-serif;

font-family: 'Baloo', cursive;

font-family: 'Love Ya Like A Sister', cursive;

font-family: 'Slabo 27px', serif;

font-family: 'Roboto Condensed', sans-serif;

font-family: 'Oswald', sans-serif;

Use the font-families to call specific font.

Learn HTML & CSS

If you are a beginner first and foremost we have to learn HTML and CSS. This is a must step and cannot be skipped as HTML and CSS have no alternative. And we can’t develop a website without HTML and CSS.

So let’s start with the first step.

first, we need <!doctype html> which declares the DOCTYPE for HTML5 and happily is not case-sensitive.

Now we can open <html> and <body> tag. So it will look something like this:

<!doctype html>
<html>
<body>
</body>
</html>

It is still empty. So let’s add up a title (which will be shown in the browsers tag) and some body text.

<!doctype html>
<html>
<title>YOUR PAGE TITLE GOES HERE</title>
<body>
BODY TEXT COMES HERE.
</body>
</html>

Copy & paste the code into a text editor and save it as “index.html”.

Go to the directory where you saved the file and open it in a browser. In Brackets you can do it by simply clicking the Live Preview (thunderbolt) icon in the top-right corner.

Truncate Text using CSS

Truncate text if it exceeds the parent’s (div’s) width.

 

HTML

<div class="wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

 

CSS

.wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}