Fonts

Hi, colleagues!
I expect to get three strings of text: in bold font-weight, normal and italic.

I downloaded all fonts and put them in folder, then included needed fonts in stylesheet.

@font-face {
	font-family: "Fira Sans"; 
	src: url(../fonts/FiraSans-Bold.ttf) format("truetype"),
		 url(../fonts/FiraSans-Italic.ttf) format("truetype"),
		 url(../fonts/FiraSans-Regular.ttf) format("truetype"),
		 url(../fonts/FiraSans-Thin.ttf) format("truetype");
}

.regularFira {
	font-weight: normal;
	font-family: "Fira Sans", "Calibri", sans-serif;

}

.boldFira {
	font-weight: bold;
	font-family: "Fira Sans", "Calibri", sans-serif;

}

.italicFira {
	font-style: italic;
	font-family: "Fira Sans", "Calibri", sans-serif;
}


HTML code:

<div class="font-block">
				<div class="subHeading">Fira Sans</div>
				<p class="regularFira">The quick brown fox jumps over the lazy dog.</p>
				<p class="boldFira">The quick brown fox jumps over the lazy dog.</p>
				<p class="italicFira">The quick brown fox jumps over the lazy dog.</p>
			</div>

Have a look at image. There are three strings with bold font-weight.
What is wrong? How to get bold, normal and italic?

Link on fonts.google.com

Hi,

Please paste in your complete CSS as it looks like something is over ruling in your css,

sub heading? you might want to use h2 or h3

I forgot about <h1/2/3…> :sweat_smile:
This is a task from course. I should do something like this
Complete CSS:

@font-face {
	font-family: "Merriweather"; 
	src: url(../fonts/Merriweather-Regular.ttf) format("truetype"),
		 url(../fonts/Merriweather-Italic.ttf) format("truetype"),
		 url(../fonts/Merriweather-Bold.ttf) format("truetype");
}

@font-face {
	font-family: "Fira Sans"; 
	src: url(../fonts/FiraSans-Bold.ttf) format("truetype"),
		 url(../fonts/FiraSans-Italic.ttf) format("truetype"),
		 url(../fonts/FiraSans-Regular.ttf) format("truetype");
}

@font-face {
	font-family: "Fira Sans Light"; 
	src: url(../fonts/FiraSans-Light.ttf) format("truetype");
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 14px;
}

header, 
section {
	width: 80%;
	margin: 0 auto; 
}

/* Header */ 

header .heading {
	text-align: left;
	font-size: 2.2em;
	margin: 20px 0;
	font-weight: bold;
}

section {
	border: 2px solid darkgrey;
	padding-left: 10px;
}

section .heading {
	margin: 30px 0;
	font-size: 1.5em;
	font-weight: bold;
}

/* Colors */ 

div.color-block {
	display: inline-block;
	min-width: 100px;
	width: 33%;
	height: 100px;
	margin: 0px 0px 20px 0px;
	text-align: center;
}

.color-block div {
	margin: 20px 0;
	font-size: 1.2em;
}

.white-font {
	color: white;
}

.blue {
	background-color: #2d5dcc;
}

.pink {
	background-color: #d957d9;
}

.green {
	background-color: #4fe0b0;
}

.beige {
	background-color: #efd9ca;
} 

/* Fonts */ 
section.fonts { 
	border: 2px solid darkgrey;
	position: relative;
	top: 10px;
}

div.font-block {
	display: inline-block;
	min-width: 100px;
	width: 45%;
	margin: 0px 25px 20px 0px;
	text-align: left;
	vertical-align: top;
}

.subHeading {
	text-align: left;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: underline;
}

.font-block p {
	margin: 20px 0;
	font-size: 1.2em;
}

/* Font types */ 

.italicMerri {
	font-style: italic;
	font-family: "Merriweather", "Calibri", serif;
}

.boldMerri {
	font-weight: bold;
	font-family: "Merriweather", "Calibri", serif;

}

.regularMerri {
	font-family: "Merriweather", "Calibri", serif;

}

.regularFira {
	font-family: "Fira Sans", "Calibri", sans-serif;
}

.boldFira {
	font-weight: bold;
	font-family: "Fira Sans", "Calibri", sans-serif;
}

.italicFira {
	font-style: italic;
	font-family: "Fira Sans", "Calibri", sans-serif;
}

.light {
	font-style: italic;
	font-family: "Fira Sans Light", "Calibri", sans-serif;
}

/* Вёрстка на три колонки */

section.columnsThree { 
	position: relative;
	top: 20px;
	border: 2px solid darkgrey;
	padding: 0px;
}

.left {
	width: 150px;
	height: 200px;
	float: left;
	border: 1px solid red;
}

.right {
	width: 150px;
	height: 200px;
	float: right;
	border: 1px solid red;
}

.middle {
	margin: 0 150px;
	height: 200px;
	border: 3px solid blue;
}

.footer {
	border: 1px solid red;
	clear: both;
} 

HTML

<! Doctype HTML> 
<html>
	<head>
		<title>DesignSystem</title>
		<link href="./resources/css/styles.css" type="text/css" rel="stylesheet"> 
	</head>
	<body>
		<!-- Header -->
	<header>
		<div class="heading">My Website Style Guide</div> 
	</header>
		<!-- Colors -->
	<section>
		<div class="heading">Colors</div>
			<div class="color-block white-font blue">
				<div>Cool Blue</div>
				<div>#2d5dcc</div>
			</div>
			<div class="color-block pink">
				<div>Pink</div>
				<div>#d957d9</div>
			</div>
			<div class="color-block green">
				<div>Mint Green</div>
				<div>#4fe0b0</div>
			</div>
			<div class="color-block beige">
				<div>Beige</div>
				<div>#efd9ca</div>
			</div>
	</section>
			<!-- Fonts -->
	<section class="fonts">
		<div class="heading">Fonts</div>
			<div class="font-block">
				<div class="subHeading">Merriweather</div>
				<p class="regularMerri">The quick brown fox jumps over the lazy dog.</p>
				<p class="boldMerri">The quick brown fox jumps over the lazy dog.</p>
				<p class="italicMerri">The quick brown fox jumps over the lazy dog.</p>
			</div>
			<div class="font-block">
				<div class="subHeading">Fira Sans</div>
				<p class="regularFira">The quick brown fox jumps over the lazy dog.</p>
				<p class="boldFira">The quick brown fox jumps over the lazy dog.</p>
				<p class="italicFira">The quick brown fox jumps over the lazy dog.</p>
				<p class="light">The quick brown fox jumps over the lazy dog.</p>
			</div>
			<div class="font-block">
				<div class="subHeading">Source Code Pro</div>
				<p class="regular">The quick brown fox jumps over the lazy dog.</p>
				<p class="bold">The quick brown fox jumps over the lazy dog.</p>
				<p class="italic">The quick brown fox jumps over the lazy dog.</p>
			</div>
	</section>
	<section class="columnsThree">
		<div class="left">left column</div>
		<div class="right">Rifgt column</div>
		<div class="middle">Middle</div>
		<div class="footer">Footer</div>
	</section> 
	</body>
</html>

are you still getting this result?
I ran the code you gave and the whole blocks code doesn’t show bold as your screenshot does

Have you put “Fira Sans” font in file structure?
If you haven’t, fonts will become “Calibri”. And all three lines will be in normal, bold and italic respectively.
But my task is - use fonts from google.fonts.com. And I am really stuck in this…

It’s strange. I switched off bold and italic .ttf files and remained only regular. It works!
Who can explain why?


@font-face {
	font-family: "Fira Sans"; 
	src: /*url(../fonts/FiraSans-Bold.ttf) format("truetype"),
		 url(../fonts/FiraSans-Italic.ttf) format("truetype"),*/
		 url(../fonts/FiraSans-Regular.ttf) format("truetype");
}

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA

Your url to the fonts are doesn’t have quotes it needs to be wrapped in them, example:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Maybe you need a refresher on typography? typography course

Codecademy lessons: KEY CONCEPTS , Font Face

With quotes it still doesn’t work(
Is quotes really necessary? (I did screenshot frome Codecademy).
Sorry, but I don’t understand.

Did it work properly on your computer?

hmm yeah it seems you could include or leave out.

yes it did.

I didn’t notice you had your bold font linked in first, put your regular at the top thereafter the others.

1 Like

It’s alive!) Thx!

Can you explain why “regular” must be first?
And why does *rar file with fonts include *ttf files with italic (for example) when I can use italic after attaching in CSS only one “regular” *ttf?

It’s taking the first styling.

Some fonts have different rulings for their bold, italic etc

here is an example:
Screenshot%20(40)

can you see the difference between line 2 and 3 ?

here is my code:

        @font-face{
			font-family: 'Fira Sans';
			src: url("Fira_Sans/FiraSans-Regular.ttf"),
				url("Fira_Sans/FiraSans-Italic.ttf");		}
		@font-face{
			font-family: 'Fira Sans Bold';
			src: url("Fira_Sans/FiraSans-Bold.ttf");
		}
		.test{
			font-family: 'Fira Sans';
		}
		.test1{
			font-family: 'Fira Sans Bold';
		}
		.test2{
			font-weight: bold;
			font-family: 'Fira Sans';
		}

Please read this doc it will clear up and answer a lot of your questions hopefully: