-
-
Save tedw/69576a543fbfe6cedb3d4c3fa0284eab to your computer and use it in GitHub Desktop.
Helvetica Neue CSS font-family stacks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Fallback font stack | |
| // These system fonts support multiple weights. | |
| // Demo http://output.jsbin.com/morukug/quiet | |
| // Cross-browser results https://workflowy.com/s/BHZf.wXqmEGAjs4 | |
| $sans: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; | |
| /** | |
| * Helvetica Neue Normal | |
| */ | |
| $helvetica-neue: | |
| HelveticaNeue, | |
| Helvetica Neue, | |
| HelveticaNeueRoman, | |
| HelveticaNeue-Roman, | |
| Helvetica Neue Roman, | |
| $sans; | |
| @mixin helvetica-neue() { | |
| font-family: $helvetica-neue; | |
| } | |
| // Black | |
| $helvetica-neue-black: | |
| HelveticaNeueBlack, | |
| HelveticaNeue-Black, | |
| Helvetica Neue Black, | |
| HelveticaNeue, | |
| Helvetica Neue, | |
| Roboto-Black, | |
| Roboto Black, | |
| Arial Black, | |
| $sans; | |
| @mixin helvetica-neue-black() { | |
| font-family: $helvetica-neue-black; | |
| font-weight: 900; | |
| } | |
| // Heavy | |
| $helvetica-neue-heavy: | |
| HelveticaNeueHeavy, | |
| HelveticaNeue-Heavy, | |
| Helvetica Neue Heavy, | |
| HelveticaNeue, | |
| Helvetica Neue, | |
| Arial Black, | |
| $sans; | |
| @mixin helvetica-neue-heavy() { | |
| font-family: $helvetica-neue-heavy; | |
| font-weight: 800; | |
| } | |
| // Bold | |
| $helvetica-neue-bold: | |
| HelveticaNeueBold, | |
| HelveticaNeue-Bold, | |
| Helvetica Neue Bold, | |
| HelveticaNeue, | |
| Helvetica Neue, | |
| $sans; | |
| @mixin helvetica-neue-bold() { | |
| font-family: $helvetica-neue-bold; | |
| font-weight: 700; | |
| } | |
| // Medium | |
| $helvetica-neue-medium: | |
| HelveticaNeueMedium, | |
| HelveticaNeue-Medium, | |
| Helvetica Neue Medium, | |
| HelveticaNeue, | |
| Helvetica Neue, | |
| $sans; | |
| @mixin helvetica-neue-medium() { | |
| font-family: $helvetica-neue-medium; | |
| font-weight: 600; | |
| } | |
| $helvetica-neue-light: | |
| HelveticaNeueLight, | |
| HelveticaNeue-Light, | |
| Helvetica Neue Light, | |
| HelveticaNeue, | |
| Helvetica Neue, | |
| Roboto-Light, | |
| Roboto Light, | |
| $sans; | |
| @mixin helvetica-neue-light() { | |
| font-family: $helvetica-neue-light; | |
| font-weight: 300; | |
| } | |
| $helvetica-neue-thin: | |
| HelveticaNeueThin, | |
| HelveticaNeue-Thin, | |
| Helvetica Neue Thin, | |
| HelveticaNeue, | |
| Helvetica Neue, | |
| $sans; | |
| @mixin helvetica-neue-thin() { | |
| font-family: $helvetica-neue-thin; | |
| font-weight: 200; | |
| } | |
| $helvetica-neue-ultralight: | |
| HelveticaNeueUltraLight, | |
| HelveticaNeue-Ultra-Light, | |
| Helvetica Neue Ultra Light, | |
| HelveticaNeue, | |
| Helvetica Neue, | |
| $sans; | |
| @mixin helvetica-neue-thin() { | |
| font-family: $helvetica-neue-ultralight; | |
| font-weight: 100; | |
| } | |
| /** | |
| * Helvetica Neue Extended | |
| */ | |
| /* 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 Condensed | |
| */ | |
| /* 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;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment