Load my own ttf font in quasar



  • Im building an application only for tablet and I want to use my own font in ttf format. How can I load .ttf fonts into quasar?

    Another option would be to convert it to woff?

    I have tried this in app.scss but it didnt work:

    @font-face {
      font-family: 'MyFont';
      src: url('css/fonts/MyFont.ttf') format('truetype');
      font-weight: 700;
      font-style: italic;
    }
    
    .my-custom-font {
      font-family: 'Cookies', Fallback sans-serif;
    }
    


  • @perik for example like this:

    Assuming, you host your own fonts in /fonts subdirectory. You can download them from google fonts for example or any other font source/converter. You will need them in woff and woff2 format.

    in app.styl insert this:

    @import 'myfonts.styl'
    @import 'myrules.styl'
    

    Then in myfonts.styl you can insert this font variation declarations. Code is generated from this tool:

    https://google-webfonts-helper.herokuapp.com/fonts/ubuntu?subsets=latin-ext,latin

    /* ubuntu-300 - latin_latin-ext */
    @font-face {
      font-family: 'Ubuntu';
      font-style: normal;
      font-weight: 300;
      src: local('Ubuntu Light'), local('Ubuntu-Light'),
           url('/fonts/ubuntu-v13-latin_latin-ext-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ubuntu-v13-latin_latin-ext-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    
    /* ubuntu-300italic - latin_latin-ext */
    @font-face {
      font-family: 'Ubuntu';
      font-style: italic;
      font-weight: 300;
      src: local('Ubuntu Light Italic'), local('Ubuntu-LightItalic'),
           url('/fonts/ubuntu-v13-latin_latin-ext-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ubuntu-v13-latin_latin-ext-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    
    /* ubuntu-regular - latin_latin-ext */
    @font-face {
      font-family: 'Ubuntu';
      font-style: normal;
      font-weight: 400;
      src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
           url('/fonts/ubuntu-v13-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ubuntu-v13-latin_latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    
    /* ubuntu-italic - latin_latin-ext */
    @font-face {
      font-family: 'Ubuntu';
      font-style: italic;
      font-weight: 400;
      src: local('Ubuntu Italic'), local('Ubuntu-Italic'),
           url('/fonts/ubuntu-v13-latin_latin-ext-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ubuntu-v13-latin_latin-ext-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    
    /* ubuntu-500 - latin_latin-ext */
    @font-face {
      font-family: 'Ubuntu';
      font-style: normal;
      font-weight: 500;
      src: local('Ubuntu Medium'), local('Ubuntu-Medium'),
           url('/fonts/ubuntu-v13-latin_latin-ext-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ubuntu-v13-latin_latin-ext-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    
    /* ubuntu-500italic - latin_latin-ext */
    @font-face {
      font-family: 'Ubuntu';
      font-style: italic;
      font-weight: 500;
      src: local('Ubuntu Medium Italic'), local('Ubuntu-MediumItalic'),
           url('/fonts/ubuntu-v13-latin_latin-ext-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ubuntu-v13-latin_latin-ext-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    
    /* ubuntu-700 - latin_latin-ext */
    @font-face {
      font-family: 'Ubuntu';
      font-style: normal;
      font-weight: 700;
      src: local('Ubuntu Bold'), local('Ubuntu-Bold'),
           url('/fonts/ubuntu-v13-latin_latin-ext-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ubuntu-v13-latin_latin-ext-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    
    /* ubuntu-700italic - latin_latin-ext */
    @font-face {
      font-family: 'Ubuntu';
      font-style: italic;
      font-weight: 700;
      src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'),
           url('/fonts/ubuntu-v13-latin_latin-ext-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/ubuntu-v13-latin_latin-ext-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    

    and then in myrules.styl you insert this:

    // local font references
    .font-Ubuntu
      font-family: 'Ubuntu', sans-serif
    

    from now you can use those fonts as any fonts for example:

      <q-page class="font-Ubuntu">
           ...
      </q-page>
    

Log in to reply