Hey guys,
I have a question.
I’m having a hard time importing fonts from Ionic. I honestly do not know how to do this.
I would like to add the font San Fransico, which is available on the Apple website.
But how do I do this best with Ionic 4?
3 Likes
See:
1 Like
you have to put your font file in asset folder or in src folder and
add this code in your variable.scss or global scss
@font-face {
font-family: 'San Fransico';
src: url('../assets/fonts/sanfransico.ttf');//mine
src: url('path/to/your/font/file');//path to your font file
}
* {
font-family: 'San Fransico';
}
10 Likes
Thank you! Very Much!!!
Do you know, how I can change it, that only iOS get this font?
That would be very nice 
i never try this idea 
but you can achieve by remove this css while build app in android 
Hey Marcel, I’m pretty sure you can just add this to the variables.scss
/* Set the font of the entire app for iOS only */
.ios {
--ion-font-family: 'San Francisco'; /* It's also good to add a fallback font here */
}
You can see a bit about this at: https://beta.ionicframework.com/docs/theming/css-variables
3 Likes
For me worked like this. 
5 Likes
Nice friend! Worked fine here.
2 Likes
I want to use Open Sans font with it’s types as in regular, bold, light… from Google Fonts,
How will i use it ?
1 Like
you can download that font and use it or you can use direct online font provided by google font
all given methods work properly so you have to just follow it
may i know where you stuck ?
which folder is this ?
I want to change globally how to do that ?
please explain.
2 Likes
Hey, i found the solution to it, on the next day of posting this.
Thanks
1 Like
If you found another way to import fonts then please post the code so other people can save their time 
The solution i had posted above is located in your main variables file, which in ionic 4 structure, the default folder is located at “src/theme/variables.scss”.
This file is the global variables file, once you use “:root” it is gonna work everywhere in you application.
I hope this work for you too
I wanted to use OpenSans font family with it’s types, so i followed these steps to achieve the solution to it
-
I went to this link and downloaded the fonts, which downloaded the folder of OpenSans where i had all the
fonts .ttf files
https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans -
I copied that folder inside my Ionic 3 project’s “assets” folder
-
Then i used it in app.css
-
Where ever i wanted to use these fonts i used the font-family from the font-face
-
Naming the font family in @font-face should be the same which we use it in our css
6 Example :
@font-face {
font-family:OpenSans-Regular;
}
If you want to use this font in the body name it as
body{
font-family:OpenSans-Regular;
}
Similarly for OpenSans-Light , OpenSans-Bold and so on.
Hope, this would help you solve your issue.
Thanks
6 Likes
There’s a thing to do the hard work for you " transfonter . org " (google it)
just upload your fonts, convert, download and you’re good to go.
- I’m not in touch about external links in this community.
hey I got solution thank you so much.
it’s very easy
step 1
in your variable.scss
step 1- @import url(‘https://fonts.googleapis.com/css?family=Raleway’);
step 2- in your —>> :root {
–ion-font-family: “Raleway”, ‘sans-serif’ !important;
}
that’s it. your global font will be change
2 Likes
Ay guys I personally downloaded the fonts I wanted and imported them locally and used them that way, but I really wanted to learn how to import through the google API, I think I didnt nail the import yet
I personally use Robobo Regular and Roboto Black, what would my import look like exactly?
On the Google Fonts site select the font and then view the sample markup:
For example:
@import url(‘https://fonts.googleapis.com/css?family=Roboto:400');
3 Likes
I know this thread is old but I just wanted to suggest the following:
When you want to get the snippet of CSS to load the fonts locally use this tool:
This is because Google Fonts is clever and it optimises the css that you see depending the browser you use to request it. If you have a modern browser it won’t include settings for old browser, etc.
This tool generates the full complete snippet so that you can locally host a font with the best compatibility.
There are other posts in this thread that explain the ionic side of things but I just wanted this to be covered.