C.Carol
(C. C.)
January 25, 2018, 7:47am
#1
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
C.Carol
(C. C.)
January 25, 2018, 2:36pm
#3
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?
C.Carol
(C. C.)
January 26, 2018, 1:20pm
#4
Still need it. Any example for this?
artamonov
(Yuriy Artamonov)
January 26, 2018, 2:54pm
#5
Hi,
Could you please share a small test project with your CSS and font ?
C.Carol
(C. C.)
January 29, 2018, 7:48am
#6
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?
tsarev
(Daniil Tsaryov)
January 29, 2018, 7:58am
#7
Hi,
i’ll prepare an example for you.
Regards,
Daniil
tsarev
(Daniil Tsaryov)
January 29, 2018, 9:48am
#8
So, here is an example for you.
In this example I use the free Raleway font: 1001freefonts.com .
Screenshot:
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.
C.Carol
(C. C.)
January 29, 2018, 10:07am
#9
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?
tsarev
(Daniil Tsaryov)
January 29, 2018, 10:20am
#10
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.
tsarev
(Daniil Tsaryov)
January 30, 2018, 11:43am
#11
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.