- Posts: 36
- Thank you received: 6
Add additional fonts to project
- allonis@bendavies.eu
- Topic Author
- Offline
- User
-
Less
More
2 years 3 weeks ago #2926
by allonis@bendavies.eu
Add additional fonts to project was created by allonis@bendavies.eu
Hi Guys,
How can one add additional fonts to a project?
I'd like to add Helvetica to mine...
Many thanks
How can one add additional fonts to a project?
I'd like to add Helvetica to mine...
Many thanks
Please Log in to join the conversation.
- davep
- Offline
- Admin
-
Less
More
- Posts: 367
- Thank you received: 96
2 years 3 weeks ago - 2 years 3 weeks ago #2936
by davep
Replied by davep on topic Add additional fonts to project
make sure you download the appropriate web font files and put them in the smartremote/css/fonts folder.
then you have to edit the font-icons.css and add the appropriate font-face entries for each of the Helvetica font weights you want to use. You'll see entries like
/* designer-font:Roboto */
@font-face {
font-family:'Roboto';
font-style:normal;
font-weight:100;
src:url('fonts/roboto-v19-latin-100.eot');
src:local('Roboto Thin'), local('Roboto-Thin'),
url('fonts/roboto-v19-latin-100.eot?#iefix') format('embedded-opentype'),
url('fonts/roboto-v19-latin-100.woff2') format('woff2'),
url('fonts/roboto-v19-latin-100.woff') format('woff'),
url('fonts/roboto-v19-latin-100.ttf') format('truetype'),
url('fonts/roboto-v19-latin-100.svg#Roboto') format('svg');
}
you will need to add similar css entries for the Helvetica files.
The line that reads /* designer-font:Roboto */ is what informs the Designer that the font is available to use in the project. You would add a similar /* designer-font:Helvetica */ line at the top of your Helvetica font css font-face list.
then you have to edit the font-icons.css and add the appropriate font-face entries for each of the Helvetica font weights you want to use. You'll see entries like
/* designer-font:Roboto */
@font-face {
font-family:'Roboto';
font-style:normal;
font-weight:100;
src:url('fonts/roboto-v19-latin-100.eot');
src:local('Roboto Thin'), local('Roboto-Thin'),
url('fonts/roboto-v19-latin-100.eot?#iefix') format('embedded-opentype'),
url('fonts/roboto-v19-latin-100.woff2') format('woff2'),
url('fonts/roboto-v19-latin-100.woff') format('woff'),
url('fonts/roboto-v19-latin-100.ttf') format('truetype'),
url('fonts/roboto-v19-latin-100.svg#Roboto') format('svg');
}
you will need to add similar css entries for the Helvetica files.
The line that reads /* designer-font:Roboto */ is what informs the Designer that the font is available to use in the project. You would add a similar /* designer-font:Helvetica */ line at the top of your Helvetica font css font-face list.
Last edit: 2 years 3 weeks ago by davep.
Please Log in to join the conversation.
- allonis@bendavies.eu
- Topic Author
- Offline
- User
-
Less
More
- Posts: 36
- Thank you received: 6
2 years 3 weeks ago #2938
by allonis@bendavies.eu
Replied by allonis@bendavies.eu on topic Add additional fonts to project
Many thanks for the quick & detailed reply Dave.
I'll have a go
Cheers
Ben
I'll have a go

Cheers
Ben
Please Log in to join the conversation.
Time to create page: 0.163 seconds