Skip to content

Instantly share code, notes, and snippets.

@gpessia

gpessia/Helvetica Neue stack

Created January 24, 2014 11:28
Show Gist options
  • Star 78 You must be signed in to star a gist
  • Fork 19 You must be signed in to fork a gist
  • Save gpessia/8595729 to your computer and use it in GitHub Desktop.
Save gpessia/8595729 to your computer and use it in GitHub Desktop.
Download ZIP
Helvetica Neue CSS font-family stack. Is there a web-safe Helvetica Neue CSS font-family stack? - See more at: http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/#sthash.lt6rYYGz.dpuf
Raw
Helvetica Neue stack
/**
* Helvetica Neue Normal (No Stretch)
*/
/* Helvetica Neue Black Font Stack */
.{font-family: "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:800; font-stretch:normal;}
/* Helvetica Neue Heavy Font Stack */
.{font-family: "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:700; font-stretch:normal;}
/* Helvetica Neue Bold Font Stack */
.{font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:normal;}
/* Helvetica Neue Medium Font Stack */
.{font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal;}
/* Helvetica Neue Regular Font Stack */
.{font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:normal;}
/* Helvetica Neue Light Font Stack */
.{font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:normal;}
/* Helvetica Neue Thin Font Stack */
.{font-family: "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:200; font-stretch:normal;}
/* Helvetica Neue Ultra Light Font Stack */
.{font-family: "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:100; font-stretch:normal;}
/**
* Helvetica Neue Normal (No Stretch)
*/
/* Helvetica Neue Black Extended Font Stack */
.{font-family: "HelveticaNeueBlackExtended", "HelveticaNeue-Black-Extended", "Helvetica Neue Black Extended", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:800; font-stretch:expanded;}
/* Helvetica Neue Heavy Extended Font Stack */
.{font-family: "HelveticaNeueHeavyExtended", "HelveticaNeue-Heavy-Extended", "Helvetica Neue Heavy Extended", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:700; font-stretch:expanded;}
/* Helvetica Neue Bold Extended Font Stack */
.{font-family: "HelveticaNeueBoldExtended", "HelveticaNeue-Bold-Extended", "Helvetica Neue Bold Extended", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:expanded;}
/* Helvetica Neue Medium Extended Font Stack */
.{font-family: "HelveticaNeueMediumExtended", "HelveticaNeue-Medium-Extended", "Helvetica Neue Medium Extended", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:expanded;}
/* Helvetica Neue Regular Extended Font Stack */
.{font-family: "HelveticaNeueExtended", "HelveticaNeue-Extended", "Helvetica Neue Extended", "HelveticaNeueRomanExtended", "HelveticaNeue-Roman-Extended", "Helvetica Neue Roman Extended", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:expanded;}
/* Helvetica Neue Light Extended Font Stack */
.{font-family: "HelveticaNeueLightExtended", "HelveticaNeue-Light-Extended", "Helvetica Neue Light Extended", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:expanded;}
/* Helvetica Neue Thin Extended Font Stack */
.{font-family: "HelveticaNeueThinExtended", "HelveticaNeue-Thin-Extended", "Helvetica Neue Thin Extended", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:200; font-stretch:expanded;}
/* Helvetica Neue Ultra Light Extended Font Stack */
.{font-family: "HelveticaNeueUltraLightExtended", "HelveticaNeue-Ultra-Light-Extended", "Helvetica Neue Ultra Light Extended", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:100; font-stretch:expanded;}
/**
* Helvetica Neue Normal (No Stretch)
*/
/* Helvetica Neue Black Condensed Font Stack */
.{font-family: "HelveticaNeueBlackCondensed", "HelveticaNeue-Black-Condensed", "Helvetica Neue Black Condensed", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:800; font-stretch:condensed;}
/* Helvetica Neue Heavy Condensed Font Stack */
.{font-family: "HelveticaNeueHeavyCondensed", "HelveticaNeue-Heavy-Condensed", "Helvetica Neue Heavy Condensed", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:700; font-stretch:condensed;}
/* Helvetica Neue Bold Condensed Font Stack */
.{font-family: "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;}
/* Helvetica Neue Medium Condensed Font Stack */
.{font-family: "HelveticaNeueMediumCondensed", "HelveticaNeue-Medium-Condensed", "Helvetica Neue Medium Condensed", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:500; font-stretch:condensed;}
/* Helvetica Neue Regular Condensed Font Stack */
.{font-family: "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", "HelveticaNeueRomanCondensed", "HelveticaNeue-Roman-Condensed", "Helvetica Neue Roman Condensed", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:400; font-stretch:condensed;}
/* Helvetica Neue Light Condensed Font Stack */
.{font-family: "HelveticaNeueLightCondensed", "HelveticaNeue-Light-Condensed", "Helvetica Neue Light Condensed", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:300; font-stretch:condensed;}
/* Helvetica Neue Thin Condensed Font Stack */
.{font-family: "HelveticaNeueThinCondensed", "HelveticaNeue-Thin-Condensed", "Helvetica Neue Thin Condensed", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif; font-weight:200; font-stretch:condensed;}
/* Helvetica Neue Ultra Light Condensed Font Stack */
.{font-family: "HelveticaNeueUltraLightCondensed", "HelveticaNeue-Ultra-Light-Condensed", "Helvetica Neue Ultra Light Condensed", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif; font-weight:100; font-stretch:condensed;}
@akamaotto
Copy link

How to use?

@alainux
Copy link

alainux commented Apr 2, 2015

Stylus mixins:

/* Helvetica Neue (from https://gist.github.com/gpessia/8595729) */
helvetica-neue-black()                  {font-family: "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:800; font-stretch:normal;}
helvetica-neue-heavy()                  {font-family: "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:700; font-stretch:normal;}
helvetica-neue-bold()                   {font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:normal;}
helvetica-neue-medium()                 {font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal;}
helvetica-neue-regular()                {font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:normal;}
helvetica-neue-light()                  {font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:normal;}
helvetica-neue-thin()                   {font-family: "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:200; font-stretch:normal;}
helvetica-neue-ultra-light()            {font-family: "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:100; font-stretch:normal;}
helvetica-neue-black-extended()         {font-family: "HelveticaNeueBlackExtended", "HelveticaNeue-Black-Extended", "Helvetica Neue Black Extended", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:800; font-stretch:expanded;}
helvetica-neue-heavy-extended()         {font-family: "HelveticaNeueHeavyExtended", "HelveticaNeue-Heavy-Extended", "Helvetica Neue Heavy Extended", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:700; font-stretch:expanded;}
helvetica-neue-bold-extended()          {font-family: "HelveticaNeueBoldExtended", "HelveticaNeue-Bold-Extended", "Helvetica Neue Bold Extended", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:expanded;}
helvetica-neue-medium-extended()        {font-family: "HelveticaNeueMediumExtended", "HelveticaNeue-Medium-Extended", "Helvetica Neue Medium Extended", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:expanded;}
helvetica-neue-regular-extended()       {font-family: "HelveticaNeueExtended", "HelveticaNeue-Extended", "Helvetica Neue Extended", "HelveticaNeueRomanExtended", "HelveticaNeue-Roman-Extended", "Helvetica Neue Roman Extended", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:expanded;}
helvetica-neue-light-extended()         {font-family: "HelveticaNeueLightExtended", "HelveticaNeue-Light-Extended", "Helvetica Neue Light Extended", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:expanded;}
helvetica-neue-thin-extended()          {font-family: "HelveticaNeueThinExtended", "HelveticaNeue-Thin-Extended", "Helvetica Neue Thin Extended", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:200; font-stretch:expanded;}
helvetica-neue-ultra-light-extended()   {font-family: "HelveticaNeueUltraLightExtended", "HelveticaNeue-Ultra-Light-Extended", "Helvetica Neue Ultra Light Extended", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:100; font-stretch:expanded;}
helvetica-neue-black-condensed()        {font-family: "HelveticaNeueBlackCondensed", "HelveticaNeue-Black-Condensed", "Helvetica Neue Black Condensed", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:800; font-stretch:condensed;}
helvetica-neue-heavy-condensed()        {font-family: "HelveticaNeueHeavyCondensed", "HelveticaNeue-Heavy-Condensed", "Helvetica Neue Heavy Condensed", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:700; font-stretch:condensed;}
helvetica-neue-bold-condensed()         {font-family: "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;}
helvetica-neue-medium-condensed()       {font-family: "HelveticaNeueMediumCondensed", "HelveticaNeue-Medium-Condensed", "Helvetica Neue Medium Condensed", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:500; font-stretch:condensed;}
helvetica-neue-regular-condensed()      {font-family: "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", "HelveticaNeueRomanCondensed", "HelveticaNeue-Roman-Condensed", "Helvetica Neue Roman Condensed", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:400; font-stretch:condensed;}
helvetica-neue-light-condensed()        {font-family: "HelveticaNeueLightCondensed", "HelveticaNeue-Light-Condensed", "Helvetica Neue Light Condensed", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:300; font-stretch:condensed;}
helvetica-neue-thin-condensed()         {font-family: "HelveticaNeueThinCondensed", "HelveticaNeue-Thin-Condensed", "Helvetica Neue Thin Condensed", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif; font-weight:200; font-stretch:condensed;}
helvetica-neue-ultra-light-condensed()  {font-family: "HelveticaNeueUltraLightCondensed", "HelveticaNeue-Ultra-Light-Condensed", "Helvetica Neue Ultra Light Condensed", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif; font-weight:100; font-stretch:condensed;}

@el-javi
Copy link

el-javi commented Aug 21, 2015

how isn't this just hoping that the user has it installed?

@francescocortese
Copy link

Thank you man! It safe me. 👍

@SethuSenthil
Copy link

@el-jav It will display the default font of the browser, I don't really recommend using this font unless there is a CDN version of this, that I'm dying to find!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment