Web Fonts (Crate and Barrel)

The font-family: value will be changing shortly due to new files we will be serving. If you are creating your own custom class, please be aware of this. (Launched: 5/16/2018)

Neue Helvetica Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus. Integer gravida tempor metus eget condimentum. Integer eget iaculis tortor. Nunc sed ligula sed augue rutrum ultrices eget nec odio. Morbi rhoncus, sem laoreet tempus pulvinar, leo diam varius nisi, sed accumsan ligula urna sed felis. Mauris molestie augue sed nunc adipiscing et pharetra ligula suscipit. In euismod lectus ac sapien fringilla ut eleifend lacus venenatis.

Usage - Minimum font size: 12px, 14px and larger preferred

SCSS


.your-class {
    @include crate-primary-bold;
}

CSS


.crate-primary-bold {
    font-family:"Neue Helvetica W05",Helvetica,Arial,sans-serif;
    font-weight:600;
    font-style:normal;
}

Neue Helvetica Roman

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus. Integer gravida tempor metus eget condimentum. Integer eget iaculis tortor. Nunc sed ligula sed augue rutrum ultrices eget nec odio. Morbi rhoncus, sem laoreet tempus pulvinar, leo diam varius nisi, sed accumsan ligula urna sed felis. Mauris molestie augue sed nunc adipiscing et pharetra ligula suscipit. In euismod lectus ac sapien fringilla ut eleifend lacus venenatis.

Usage - Minimum font size: 12px, 14px and larger preferred

SCSS


.your-class {
    @include crate-primary-roman;
}

CSS


.crate-primary-roman {
    font-family:"Neue Helvetica W05",Helvetica,Arial,sans-serif;
    font-weight:400;
    font-style:normal;
}

Neue Helvetica Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus. Integer gravida tempor metus eget condimentum. Integer eget iaculis tortor. Nunc sed ligula sed augue rutrum ultrices eget nec odio. Morbi rhoncus, sem laoreet tempus pulvinar, leo diam varius nisi, sed accumsan ligula urna sed felis. Mauris molestie augue sed nunc adipiscing et pharetra ligula suscipit. In euismod lectus ac sapien fringilla ut eleifend lacus venenatis.

Usage - Minimum font size: 16px

SCSS


.your-class {
    @include crate-primary-light;
}

CSS


.crate-primary-light {
    font-family:"Neue Helvetica W05",Helvetica,Arial,sans-serif;
    font-weight:300;
    font-style:normal;
}

Neue Helvetica Thin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus. Integer gravida tempor metus eget condimentum. Integer eget iaculis tortor. Nunc sed ligula sed augue rutrum ultrices eget nec odio. Morbi rhoncus, sem laoreet tempus pulvinar, leo diam varius nisi, sed accumsan ligula urna sed felis. Mauris molestie augue sed nunc adipiscing et pharetra ligula suscipit. In euismod lectus ac sapien fringilla ut eleifend lacus venenatis.

Usage - Minimum font size: 20px

SCSS


.your-class {
    @include crate-primary-thin;
}

CSS


.crate-primary-thin {
    font-family:"Neue Helvetica W05",Helvetica,Arial,sans-serif;
    font-weight:200;
    font-style:normal;
}

Bodoni Italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus. Integer gravida tempor metus eget condimentum. Integer eget iaculis tortor. Nunc sed ligula sed augue rutrum ultrices eget nec odio. Morbi rhoncus, sem laoreet tempus pulvinar, leo diam varius nisi, sed accumsan ligula urna sed felis. Mauris molestie augue sed nunc adipiscing et pharetra ligula suscipit. In euismod lectus ac sapien fringilla ut eleifend lacus venenatis.

Usage - Minimum font size: 14px, 16px and larger preferred

Brand Team uses this as a non-italic font by applying font-style: normal. The font files we have are italic; styling it as normal causes the web font to not render and it falls back to the next font in the stack. Bodoni Italic will be replaced with a new serif font later this year (2021). Launch date TBD.

SCSS


.your-class {
    @include crate-secondary-italic;
}

CSS


.crate-secondary-italic {
    font-family:"WTC Our Bodoni W05 Italic",Georgia,serif;
    font-weight:400;
    font-style:italic;
}

Usage Notes

Mobile

  • Body copy: font-family:"Neue Helvetica W05",Helvetica,Arial,sans-serif; font-weight:400;
  • Bold copy: font-family:"Neue Helvetica W05",Helvetica,Arial,sans-serif; font-weight:600;

Desktop

  • Body copy: font-family:"Neue Helvetica W05",Helvetica,Arial,sans-serif; font-weight:400;
  • Bold copy: font-family:"Neue Helvetica W05",Helvetica,Arial,sans-serif; font-weight:600;