# Ionic 4 css var

**URL:** <https://forum.ionicframework.com/t/ionic-4-css-var/151573>\
**Category:** Ionic Framework\
**Created:** [December 28, 2018, 4:15pm UTC](https://forum.ionicframework.com/t/ionic-4-css-var/151573 "2018-12-28T16:15:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![sioessi](https://avatars.discourse-cdn.com/v4/letter/s/b38774/32.png) [@sioessi](https://forum.ionicframework.com/u/sioessi)\
**Post date:** [December 28, 2018, 4:15pm UTC](https://forum.ionicframework.com/t/ionic-4-css-var/151573/1 "2018-12-28T16:15:11Z")

</div>

Within my variables.scss file I have:

```auto
:root {
  --ion-color-primary: #00A9E0;
  --ion-color-secondary: #5BC500;
  --ion-color-danger: #f53d3d;
  --ion-color-light: #f4f4f4;
  --ion-color-dark: #222222;
  --ion-color-gray: #8B8B8B;
  --primaryContrast: darken(#00A9E0, 10%);
  --lightContrast: darken(#f4f4f4, 10%);
  --darkHighlight: lighten(#222, 10%);
  --grayHighlight: lighten(#8B8B8B, 10%);
  --grayContrast: darken(#8B8B8B, 10%);
  --secondaryContrast: darken(#5BC500, 10%);
  --card-ios-border-radius: 8px;
  --card-ios-box-shadow: $box-shadow;
  --card-ios-header-color: var(--ion-color-light);
  --card-ios-header-font-weight: bold; 
  --background-color: var(--ion-color-light);
  --toolbar-background: var(--ion-color-primary);
  --button-round-border-radius: 10px !important;
  --loading-ios-spinner-color: var(--primaryContrast);
  --loading-ios-text-color: var(--primaryContrast);
  --border-radius: 10px;
  --box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
  --padding: 16px; 
}

```

And within my global.scss file I have:

```auto
h1, h2, h3, h4, h5, h6 {
    color: var(--primaryContrast);
    font-weight: bold;
}

```

However, this does not work, it does not load the value, nor the sources that I have configured

```auto
@font-face {
    font-family: 'Test';
    src: url('assets/fonts/test/Regular/test-Regular.eot') format('embedded-opentype'),
        url('assets/fonts/test/Regular/test-Regular.svg') format('svg'),
        url('assets/fonts/test/Regular/test-Regular.ttf') format('truetype'),
        url('assets/fonts/test/Regular/test-Regular.woff') format('woff');
    font-style: normal;
    font-weight: normal;
}

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:03pm UTC](https://forum.ionicframework.com/t/ionic-4-css-var/151573/2 "2021-07-19T21:03:20Z")

</div>