Gene Font Repository

Typography resources for Genentech digital communications. Include fonts via a CSS link or browse the collection below.

Quick Start

Gene Condensed
<link rel="stylesheet" href="https://fonts.gene.com/fonts/ gene-condensed/latest/ gene-condensed.css">
Gene Sans
<link rel="stylesheet" href="https://fonts.gene.com/fonts/ gene-sans/latest/ gene-sans.css">
Gene Serif
<link rel="stylesheet" href="https://fonts.gene.com/fonts/ gene-serif/latest/ gene-serif.css">

Fonts

Gene Condensed
Sans-Serif · Condensed
Science is at the heart of everything we do
4 weights · Normal · Includes icon glyphs
View Font →
Gene Sans
Sans-Serif
Science is at the heart of everything we do
4 weights · Normal + Italic
View Font →
Gene Serif
Serif
Science is at the heart of everything we do
3 weights · Normal + Italic
View Font →

Type Scale

H1 Gene Sans
H2 Gene Condensed
H3 Gene Serif
H4 The quick brown fox jumps over the lazy dog
H5 The quick brown fox jumps over the lazy dog
Body The quick brown fox jumps over the lazy dog. Science is at the heart of everything we do.

Custom Icon Glyphs

Gene Condensed Bold includes 26 custom icons in the Unicode Private Use Area (U+E000 – U+E01A).

DNA 1 · U+E000
DNA 2 · U+E001
Antibody 1 · U+E002
Antibody 2 · U+E003
Antibody 3 · U+E004
Antibody 4 · U+E005
DNA Thing · U+E006
Wizard 1 · U+E007
Wizard 2 · U+E008
Bell 1 · U+E009
Bell 2 · U+E00A
White Shirt · U+E00B
Black Shirt · U+E00C
Herb 1 · U+E00D
Herb 2 · U+E00E
Bob 1 · U+E00F
Bob 2 · U+E010
Genentech Logo · U+E011
Roche Logo · U+E012
Protein 1 · U+E013
Protein 2 · U+E014
Eye · U+E015
Virus 1 · U+E016
Virus 2 · U+E017
Virus 3 · U+E018
Virus 4 · U+E019
Roche Tagline · U+E01A

CSS Reference

Full @font-face declarations for all Gene font families. Use the CSS include links above for the simplest integration.

@font-face { font-family: 'Gene Condensed'; src: url('https://fonts.gene.com/genentech/Gene-Condensed-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Gene Condensed'; src: url('https://fonts.gene.com/genentech/Gene-Condensed-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gene Condensed'; src: url('https://fonts.gene.com/genentech/Gene-Condensed-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Gene Condensed'; src: url('https://fonts.gene.com/genentech/Gene-Condensed-Heavy.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gene Sans'; src: url('https://fonts.gene.com/genentech/Gene-Sans-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Gene Sans'; src: url('https://fonts.gene.com/genentech/Gene-Sans-Thin-Italic.woff2') format('woff2'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'Gene Sans'; src: url('https://fonts.gene.com/genentech/Gene-Sans-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Gene Sans'; src: url('https://fonts.gene.com/genentech/Gene-Sans-Light-Italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Gene Sans'; src: url('https://fonts.gene.com/genentech/Gene-Sans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gene Sans'; src: url('https://fonts.gene.com/genentech/Gene-Sans-Regular-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Gene Sans'; src: url('https://fonts.gene.com/genentech/Gene-Sans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Gene Sans'; src: url('https://fonts.gene.com/genentech/Gene-Sans-Bold-Italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gene Serif'; src: url('https://fonts.gene.com/genentech/Gene-Serif-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Gene Serif'; src: url('https://fonts.gene.com/genentech/Gene-Serif-Light-Italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Gene Serif'; src: url('https://fonts.gene.com/genentech/Gene-Serif-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gene Serif'; src: url('https://fonts.gene.com/genentech/Gene-Serif-Regular-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Gene Serif'; src: url('https://fonts.gene.com/genentech/Gene-Serif-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Gene Serif'; src: url('https://fonts.gene.com/genentech/Gene-Serif-Bold-Italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }