unable to use fonts through CSS - html

Question

I have this CSS file for the free google font. The font and help was downloaded, but I am not able to use them as intended. How can I use them for displaying Bold or, Italic or, regular text?
my css: fonts.css
/* anonymous-pro-regular - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: normal;
font-weight: 400;
src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'),
url('../fonts/anonymous-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-regular.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* anonymous-pro-italic - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: italic;
font-weight: 400;
src: local('Anonymous Pro Italic'), local('AnonymousPro-Italic'),
url('../fonts/anonymous-pro-v11-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-italic.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* anonymous-pro-700 - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: normal;
font-weight: 700;
src: local('Anonymous Pro Bold'), local('AnonymousPro-Bold'),
url('../fonts/anonymous-pro-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* anonymous-pro-700italic - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: italic;
font-weight: 700;
src: local('Anonymous Pro Bold Italic'), local('AnonymousPro-BoldItalic'),
url('../fonts/anonymous-pro-v11-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700italic.ttf') format('truetype'); /* Safari, Android, iOS */
}
.myFontNormal {
font-family: 'Anonymous Pro Regular';
}
.myFontBold {
font-family: 'Anonymous Pro Bold';
font-size: 15px;
}
When I try to use it in forms it does nothing. what am I missing?
e.g.:
<div id="main" class="myFontBold">
<p>Default Emb.1234567890.</p>
</div>

Answer 1

Use different font-family names in the #font-face rules to make it work - you have font-family: 'Anonymous Pro'; in all three! Add "Bold" and "Italic" to the second and third one.