How to set downloaded unique font-family

Hi,

I created a new theme, but it is not clear how to change the font-family.
I have a downloaded font, and I put it into mytheme/font folder.

In the mytheme.scss I put this:

@font-face {
    font-family: "Nexa";
    src: url("../font/Nexa Light.otf");
}

And into the mytheme-defaults.scss:

$v-font-family: 'Nexa';

But these are do not works.
How to set the font-family?

Thanks

Okay, so I tried with this code in mytheme.scss:

@font-face {
	font-family: 'Nexa Light Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Nexa Light Regular'), url('nexa-light-webfont.woff') format('woff');
}
.v-ui{
	font-family: 'Nexa Light Regular';
}
.v-widget{
	font-family: 'Nexa Light Regular';
}

And put the font next to the scss file. In the application with Ctrl+Shift+I, I can see that font-family is Nexa, but the words do not looks like that. They looks like Verdana.
But at every div or span I see the Nexa font-family.

So what I’ve missed?

Still need it. Any example for this?

Hi,

Could you please share a small test project with your CSS and font ?

I can’t.
It was a really lots of work to make a new theme into my project without any error.
My new example has problems too…

Couldn’t you make a right example project how to change the font? Or a tutorial?

Hi,

i’ll prepare an example for you.

Regards,
Daniil

So, here is an example for you.

In this example I use the free Raleway font: 1001freefonts.com.

Screenshot:
custom-ff

After all steps from the documentation page (Creating a custom theme) you should to do few small steps:

add font face:

@font-face {
    font-family: 'raleway';
    src:url('fonts/raleway/Raleway-Bold.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-ExtraBold.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-ExtraLight.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-Heavy.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-Light.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-Medium.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-Regular.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-SemiBold.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-Thin.ttf?hwgbks') format('truetype');
    font-weight: normal;
    font-style: normal;
}

add mixin with this font face:

@mixin raleway-font {
  font-family: 'raleway' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

and include this mixin into theme:

@mixin mytheme {
  @include halo;
  @include raleway-font;
}

Regards,
Daniil.

Hi Daniil,

Thank you for the help.
I have one question about it.
Where to put the @mixin raleway-font part? Into a new scss file?

It should be placed into the mytheme.scss file.

I’m sorry - I forgot to attach the project. Here it is:

custom-ff.zip (594.5 KB)

I think it’ll help you.

But there is one more correct way to use some custom font - use Vaadin style variable: $v-font-family.

It means that you don’t have to write additional mixin raleway-font and include it into the mytheme mixin.

So, you should only declare new font face in the mytheme.scss file:

@font-face {
    font-family: 'raleway';
    src:url('fonts/raleway/Raleway-Bold.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-ExtraBold.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-ExtraLight.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-Heavy.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-Light.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-Medium.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-Regular.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-SemiBold.ttf?hwgbks') format('truetype'),
        url('fonts/raleway/Raleway-Thin.ttf?hwgbks') format('truetype');
    font-weight: normal;
    font-style: normal;
}

and update Vaadin variable in the mytheme-defaults.scss file:

$v-font-family: raleway, Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;

Regards,
Daniil.