How to use the @project-r/styleguide.fontFamilies.sansSerifRegular function in @project-r/styleguide

import Box from './Box'
import ProlongBox from './ProlongBox'
import { HEADER_HEIGHT, HEADER_HEIGHT_MOBILE } from '../constants'
import { css } from 'glamor'
import withMe from '../../lib/apollo/withMe'
import withT from '../../lib/withT'
import withInNativeApp from '../../lib/withInNativeApp'

import 'glamor/reset'

css.global('html', { boxSizing: 'border-box' })
css.global('*, *:before, *:after', { boxSizing: 'inherit' })

css.global('body', {
  width: '100%',
  fontFamily: fontFamilies.sansSerifRegular
})

// avoid gray rects over links and icons on iOS
css.global('*', {
  WebkitTapHighlightColor: 'transparent'
})
// avoid orange highlight, observed around full screen gallery, on Android
css.global('div:focus', {
  outline: 'none'
})

const styles = {
  bodyGrowerContainer: css({
    minHeight: '100vh',
    display: 'flex',
    flexDirection: 'column'

features: data.map(d => ({
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [d.lon, d.lat]
    }
  }))
})

const styles = {
  circlePos: css({
    // transition: 'cx 1s ease-in-out, cy 1s ease-in-out, r 1s ease-in-out'
  }),
  labelOutline: css({
    fill: '#fff',
    fontFamily: fontFamilies.sansSerifRegular,
    fontSize: 12,
    stroke: '#fff',
    strokeWidth: 2
  }),
  label: css({
    fill: colors.primary,
    fontFamily: fontFamilies.sansSerifRegular,
    fontSize: 12
  })
}

class PostalCodeMap extends Component {
  constructor (...args) {
    super(...args)

    this.state = {}

padding: '7px 15px 7px 15px',
    fontSize: '18px',
    lineHeight: '25px',
    height: 50
  },
  width: '100%',
  outline: 'none',
  verticalAlign: 'bottom',
  minWidth: 160,
  textAlign: 'center',
  textDecoration: 'none',
  fontSize: 22,
  height: 60,
  boxSizing: 'border-box',
  backgroundColor: '#fff',
  fontFamily: fontFamilies.sansSerifRegular,
  border: `1px solid ${colors.secondary}`,
  borderRadius: 0,
  color: colors.secondary,
  cursor: 'pointer',
  '@media (hover)': {
    ':hover': {
      backgroundColor: colors.primary,
      borderColor: colors.primary,
      color: '#fff'
    }
  },
  ':active': {
    backgroundColor: colors.secondary,
    borderColor: colors.secondary,
    color: '#fff'
  },

import { STATUS_POLL_INTERVAL_MS } from '../../lib/constants'

import { P, Label, fontFamilies, mediaQueries } from '@project-r/styleguide'

import Bar from './Bar'

const styles = {
  primaryNumber: css({
    display: 'block',
    marginBottom: -3,
    [mediaQueries.mUp]: {
      marginBottom: -8
    },
    fontSize: 80,
    fontFamily: fontFamilies.sansSerifRegular,
    lineHeight: 1
  }),
  secondaryNumber: css({
    display: 'block',
    [mediaQueries.mUp]: {
      marginBottom: -3
    },
    fontSize: 43,
    fontFamily: fontFamilies.sansSerifRegular,
    lineHeight: 1
  }),
  smallNumber: css({
    display: 'block',
    [mediaQueries.mUp]: {
      marginBottom: -3
    },

import React, {Component} from 'react'
import {css} from 'glamor'
import {validate as isEmail} from 'email-validator'
import fetch from 'unfetch'

import {
  Button, Field, mediaQueries, fontFamilies
} from '@project-r/styleguide'

import {
  COUNTDOWN_DATE
} from '../../constants'

const pRule = css({
  fontFamily: fontFamilies.sansSerifRegular,
  fontSize: 18
})

export const P = ({children, ...props}) => (
  <p>{children}</p>
)

const styles = {
  form: css({
    display: 'flex',
    justifyContent: 'space-between',
    flexFlow: 'row wrap',
    maxWidth: 500,
    padding: '0 20px',
    margin: '0 auto'
  }),

fontSize: 80,
    fontFamily: fontFamilies.sansSerifRegular,
    lineHeight: 1
  }),
  secondaryNumber: css({
    display: 'block',
    marginBottom: -5,
    fontSize: 43,
    fontFamily: fontFamilies.sansSerifRegular,
    lineHeight: 1
  }),
  smallNumber: css({
    display: 'block',
    marginBottom: -5,
    fontSize: 22,
    fontFamily: fontFamilies.sansSerifRegular,
    lineHeight: 1
  }),
  hoverGoal: css({
    cursor: 'default',
    fontFamily: fontFamilies.sansSerifMedium
  })
}

class Status extends Component {
  constructor (props) {
    super(props)

    this.state = {}
  }
  tick () {
    const now = new Date()

import { fontFamilies } from '@project-r/styleguide'
import { css } from 'glamor'
import withT from '../../lib/withT'

import Header from './Header'
import Nav from './Nav'
import Body from './Body'
import Me from './Me'

import 'glamor/reset'

css.global('html', { boxSizing: 'border-box' })
css.global('*, *:before, *:after', { boxSizing: 'inherit' })

css.global('body', {
  fontFamily: fontFamilies.sansSerifRegular,
})

const Frame = ({ t, children }) => (
  <main>
    
      <title>Project R – {t('app/name')}</title>
    
    {children}
  </main>
)

const FrameWithT = withT(Frame)

FrameWithT.Header = Header
FrameWithT.Nav = Nav
FrameWithT.Body = Body

clear: 'both'
    }
  }),
  span: css({
    float: 'left',
    paddingLeft: `${GUTTER / 2}px`,
    paddingRight: `${GUTTER / 2}px`,
    [mediaQueries.mUp]: {
      paddingLeft: `${GUTTER}px`,
      paddingRight: `${GUTTER}px`
    },
    minHeight: 1,
    width: '50%'
  }),
  title: css({
    fontFamily: fontFamilies.sansSerifRegular,
    fontSize: 19,
    lineHeight: '28px'
  }),
  packageTitle: css({
    fontFamily: fontFamilies.sansSerifMedium,
    fontSize: 21,
    lineHeight: '32px'
  }),
  packageImage: css({
    float: 'right',
    maxWidth: 150,
    maxHeight: 170,
    paddingLeft: 10,
    [mediaQueries.mUp]: {
      paddingLeft: 30
    }

fontSize: '30px',
    lineHeight: '34px',
    margin: '0 auto',
    fontWeight: 'normal',
    fontFamily: fontFamilies.sansSerifMedium,
    marginTop: '20px',
    [mediaQueries.mUp]: {
      fontSize: '40px',
      lineHeight: '46px',
      marginTop: '70px'
    }
  }),
  lead: css({
    fontSize: '16px',
    lineHeight: '24px',
    fontFamily: fontFamilies.sansSerifRegular,
    margin: '12px auto 0 auto',
    [mediaQueries.mUp]: {
      fontSize: '22px',
      lineHeight: '30px',
      marginTop: '40px'
    }
  }),
  signUp: css({
    marginTop: '18px',
    marginBottom: '40px',
    [mediaQueries.mUp]: {
      marginTop: '52px',
      marginBottom: '80px'
    }
  })
}

margin: `${SPACE}px auto`,
    '& ::selection': {
      color: '#fff',
      backgroundColor: '#000'
    }
  }),
  nav: css({
    marginTop: SPACE,
    marginBottom: SPACE,
    [mediaQueries.mUp]: {
      marginTop: SPACE,
      marginBottom: SPACE * 2
    }
  }),
  mainNav: css({
    fontFamily: fontFamilies.sansSerifRegular,
    fontSize: 44,
    lineHeight: '60px'
  }),
  address: css({
    lineHeight: 1.6,
    fontStyle: 'normal'
  }),
  mBr: css({
    display: 'none',
    [mediaQueries.mUp]: {
      display: 'inline'
    }
  }),
  credits: css({
    marginBottom: SPACE * 2,
    marginTop: SPACE,