How to use the @artsy/reaction/dist/Components/Publishing/Fonts.Fonts.avantgarde function in @artsy/reaction

flex-direction: row;
  margin-top: 50px;
  align-items: center;
`

const ActionsContainer = styled.div`
  margin-right: 20px;
`

const ActionButton = styled.button`
  margin-right: 15px;
`
ActionButton.displayName = 'ActionButton'

const RedirectText = styled.span`
  ${Fonts.avantgarde('s11')};
  text-transform: uppercase;
  color: ${colors.grayMedium};
`

export class MessageModal extends Component {
  static propTypes = {
    type: PropTypes.oneOf(['locked', 'timeout']),
    session: PropTypes.object,
    onClose: PropTypes.func,
    onTimerEnded: PropTypes.func
  }

  state = {
    timeLeft: 10
  }

justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
`

const Container = styled.div`
  background-color: white;
  max-width: 600px;
  align-self: center;
  padding: 20px 30px;
`

const Header = styled.div`
  ${Fonts.avantgarde('s11')};
  margin-bottom: 10px;
  text-transform: uppercase;
  color: ${p => p.color};
`
Header.displayName = 'Header'

export const Title = styled.h1`
  ${Fonts.garamond('s30')};
  margin-bottom: 15px;
`
Title.displayName = 'Title'

const Description = styled.div`
  ${Fonts.garamond('s19')};
  max-width: 470px;
  line-height: 1.1;