In my Ionic2 project, I put my fonts (ttf format) in the folder www/build/fonts. But when I build the app, the fonts disappear.
How can I do ?
Don't place your fonts in node_modules or build folder. node_modules folder gets update on npm install or npm update and build folder gets created with each build command.
Best possible way, that i am currently using with a production app is to put your fonts inside www/fonts folder and reference them inside your /app/themes/app.core.scss like below.
@font-face {
font-family: 'gurbaniakharregular';
src: url('../../fonts/gurbaniakhar.ttf.eot');
src: url('../../fonts/gurbaniakhar.ttf.eot?#iefix') format('embedded-opentype'),
url('../../fonts/gurbaniakhar.ttf.woff2') format('woff2'),
url('../../fonts/gurbaniakhar.ttf.woff') format('woff'),
url('../../fonts/gurbaniakhar.ttf.ttf') format('truetype'),
url('../../fonts/gurbaniakhar.ttf.svg#gurbaniakharregular') format('svg');
font-weight: normal;
font-style: normal;
}
www
folder is always regenerated by the ionic cli, so it is better to put your files in the src
folder from which ionic creates the www
directory.
Commented
Aug 28, 2017 at 7:16
In the latest Ionic2 RC, this seems to have moved to somewhere under src/assets
, probably src/assets/fonts
. References to these files in yours SCSS files (as per @indermohan-singh) are relative to the CSS file so will be like url("../assets/fonts/aleo-italic-webfont.woff2")
.
Everything under src/assets
is copied over during build, so that's a good place for other things you'll need, i.e. images.
Now that the dust has settled with Ionic 2 / Angular 2 I hope this will be the right answer for a while.
I downloaded "Varela Round" from Google fonts and simplified the file name, but the font name stayed the same.
Add your font to ./src/assets/fonts
.
Edit ./src/theme/variables.scss
.
Under the "Fonts" section at the bottom, import your font:
@import '../assets/fonts/varela-round.ttf';
Then in your regular CSS:
font-family: 'Varela Round';
Edit for non-Google fonts:
.otf
and I'm unsure about .woff
. You may need to run your font through a converter.EDIT
I could not get this solution to work on iOS, but the following does.
First off, I apologize for forgetting where I had the Varela Round font. I got this working with a different font and am using that as an example here.
Add the font as mentioned above, but don't bother importing it in variables.scss
.
Instead, add the following to app/app.scss
:
@font-face {
font-family: 'Fertigo';
font-style: normal;
font-weight: 400;
src: local('Fertigo Pro'), local('Fertigo-Pro'), url(../assets/fonts/fertigo.ttf) format('woff2');
}
If format('woff2');
doesn't work, you may need to try truetype instead.
varela-round.scss
, not the .ttf file directly, correct?
Commented
May 9, 2017 at 12:32
.ttf
font from Google, not an .scss
file. This worked for me. Maybe you're not supposed to do this for some cross-browser reason. But I'm not too worried about that since that's a non-issue with Ionic apps.
Commented
May 9, 2017 at 16:42
In Ionic 3.4 put your font in asset/fonts (the path is specified in src/theme/variables.scss).
In src/app/app.scss insert the font-face
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
src: local('Raleway'), local('Raleway-Regular'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
}
Finally use your font in src/theme/variables.scss overriding the sass variables
$font-family-base: 'Raleway';
$font-family-ios-base: 'Raleway';
$font-family-md-base: 'Raleway';
$font-family-wp-base: 'Raleway';
The fonts in the build disappers every time as the gulp build cleans the build folder everytime. To avoid this you need to include the gulp tasks in the gulpfile.ts.
Modify the below changes to your gulpfile.ts.
Include gulp task for adding icon css and fonts to your build
gulp.task('myCss', function(){
return gulp.src('path-to-your-font-lib/style.css')
.pipe(gulp.dest('www/build/css'))
});
gulp.task('myFonts', function(){
return gulp.src('path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)')
.pipe(gulp.dest('www/build/fonts'))
});
Modify your gulp build and watch task as follows (Adding your font and css on watch and build)
gulp.task('watch', ['clean'], function(done){
//existing ionic2 code
}
gulp.task('build', ['clean','myCss','myFonts'], function(done){
//existing ionic2 code
}
In ionic v2.1.0 www
folder is generated every time you build your project.
you have to put your fonts in src/assets
folder like below.
@font-face {
font-family: 'montserratregular';
src: url('../assets/montserrat/montserrat-regular-webfont.eot');
src: url('../assets/montserrat/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../assets/montserrat/montserrat-regular-webfont.woff2') format('woff2'),
url('../assets/montserrat/montserrat-regular-webfont.woff') format('woff'),
url('../assets/montserrat/montserrat-regular-webfont.ttf') format('truetype'),
url('../assets/montserrat/montserrat-regular-webfont.svg#montserratregular') format('svg');
font-weight: normal;
font-style: normal;
}
The best way to add own fonts is using gulp. I add my custom fonts in directory app/theme/fonts
and add this source to the gulp plugin ionic-gulp-fonts-copy
in file gulpfile.js
.
// add own src
gulp.task('fonts', function(){
return copyFonts({
src: [
'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
'app/theme/fonts/**/*.+(ttf|woff|woff2)'
],
dest: 'www/build/fonts'
})
});
The first line in src
is default, second is custom. After this, you can declare your font with css, e. g.
/* regular */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(../fonts/opensans/OpenSans-Regular.ttf) format('truetype');
}
Try it out!
On Ionic 3.4, Look into the variables.scss
, Ionic team already preset font path
$font-path: "../assets/fonts";
So just put your font files under assets/fonts
folder, then add following code into variables.scss
ion-app.ios {
font-family: "your-font-name" !important;
}
you should now set your global custom font in this way
Open your app>app.scss file. and paste this code:
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
src: local('Raleway Light'), local('Raleway-Light'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
src: local('Raleway Light'), local('Raleway-Light'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
Rename 'Raleway-Light' and 'Raleway-Regular.ttf' with your .ttf file.
Run ionic serve
ionic 2 when compile, creates the www/build/main.css if you check the font path on app.scss usually is ../../assets, but that point's to nowhere during the build.
add on app.scss the path like ../assets/fonts/fontname.ttf and add the font on www/assets/fonts/fontname.ttf
it worked perfect for me.
I am working on ionic3-
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.10.1
ionic (Ionic CLI) : 3.10.1
global packages:
Cordova CLI : 7.0.1
local packages:
@ionic/app-scripts : 2.1.4
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.6.0
System:
ios-sim : 5.0.8
Node : v8.4.0
npm : 5.4.0
OS : OS X
I Created new css file as style.css
and write these lines there-
@font-face {
font-family: 'sans_medium';
src: url('../path/to/css/fonts/Regular.otf');
}
/*if need more font-face*/
@font-face {
font-family: 'sans_regular';
src: url('fonts/SanFranciscoText-Regular.otf');
}
Linked this css file with index as-
src/index.html
and added this line
<link href="css/animate.css" rel="stylesheet">
This is working for me ...
In ionic2 just create a folder fonts under src/assets/ then put your font file .ttf and .woff also include your sass file in it custom-fonts.scss. After your gulp serve it will automatically copy all your files under www/assets/fonts/
In Ionic 4 there is no app.scss any longer and styling has moved to CSS variables and the main configuration is in ./theme/variables.scss
.
To use my own fonts, I put the fonts in the ./assets/fonts
folder (that I created).
In ./theme/variables.scss
I added:
@font-face {
font-family: 'Muli';
font-weight: normal;
src: url("../assets/fonts/muli-regular.ttf");
}
@font-face {
font-family: 'Muli';
font-weight: 300;
src: url("../assets/fonts/muli-light.ttf");
}
:root {
--ion-font-family: 'Muli', 'Roboto', 'Helvetica Neue', sans-serif;
Ionic 2 uses a npm module called ionic-gulp-fonts-copy. This gulp task will load the fonts present in the node_modules/ionic-angular/fonts directory. Why don't you try placing your font in that directory and try again?
(Placing your fonts in the build folder will be of no use since the build folder is removed and created each and every time you take a build of the application).
Hope this helps you. Thanks.
node_modules/ionic-angular/fonts
solved my issue. Thank you!