front-wight not working?

Question

Google

Hello everyone, beginner front-end programmer (teapot). I'm trying to make up the layout not from scratch, but together with Bootstrap 3.
When adding fonts, the following problem occurred:
When adding font width options, in this case "Lato", 300i,400,700, the "front-wight" property does not respond . In this example, I need to use the width "300i" in the .head_1 class , the parameters 400 and 700 are going to be used next. classes. Please tell me what is wrong.
PS If you remove the parameters 400 and 700, the 300i font works.
Thanks in advance.

@import url('https://fonts.googleapis.com/css?family=Lato:300i,400,700|Montserrat:300');
*{
  padding: 0px;
  margin: 0px;
}

.centered {
    text-align: center;
}

.head_1 {
  background-color: #171514;
  min-width: 100%;
  height: 532.5px;
  font-family: 'Lato', sans-serif;
  font-weight: 300i;
  padding-top: 150px;
  color: #FFFFFF;
}
.head_1 h1, .head_1 h3 {
    line-height: 48px;
}

Answer 1

font-weight: 300;
font-style: italic;