CODEWITHSUNDEEP
htmlcssfonts
Rajeev
Rajeev

Reputation: 1371

unable to use fonts through CSS

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>

Upvotes: 0

Views: 128

Answers (1)

Johannes
Johannes

Reputation: 67738

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.

Upvotes: 1

Related Questions