Can't figure out why the font for my logo isn't working

Question

I'm trying to figure out why the font for my logo isn't downloading for other people. The font is called Aerokids.

The code in my CSS works fine for the other font type I have on my site. It's just the logo that's not working, even though it's done the same way. Does anyone have any ideas what might be wrong? Here is a screenshot of the fonts I have in the subfolder for my site:

Here is the GitHub URL for the site I'm working on.

@font-face {
  font-family: 'Aerokids';
  src: url('fonts/Aerokids.otf');
  font-weight: normal;
  font-style: normal;

  font-family: 'odudo-semibold';
  src: url('../fonts/odudo-semi-bold.eot');
  src: url('../fonts/odudo-semi-bold.eot?#iefix') format('embedded-
  opentype'),
  url('../fonts/odudo-semi-bold.woff2') format('woff2'),
  url('../fonts/odudo-semi-bold.woff') format('woff'),
  url('../fonts/odudo-semi-bold.ttf') format('truetype'),
  url('../fonts/odudo-semi-bold.svg#youworkforthem') format('svg');
  font-weight: normal;
  font-style: normal;
}

.logo {
    font-family: 'Aerokids';
    font-weight: normal;
    color: #00E8FF;
    font-size: 2.5em;
    float: left;
    width: 30%;
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    margin: 0 auto;
}

Answer 1

You need to separate the two @font-face rules.

@font-face {
  font-family: 'Aerokids';
  src: url('fonts/Aerokids.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'odudo-semibold';
  src: url('../fonts/odudo-semi-bold.eot');
  src: url('../fonts/odudo-semi-bold.eot?#iefix') format('embedded-
  opentype'),
  url('../fonts/odudo-semi-bold.woff2') format('woff2'),
  url('../fonts/odudo-semi-bold.woff') format('woff'),
  url('../fonts/odudo-semi-bold.ttf') format('truetype'),
  url('../fonts/odudo-semi-bold.svg#youworkforthem') format('svg');
  font-weight: normal;
  font-style: normal;
}