Utilizing Google Fonts in an Ionic Software
Revealed on Nov 9, 2017
2 min learn
On this submit, I will likely be exhibiting you to alter font in any Ionic 2/3 software. To begin with, I will likely be establishing a brand new ionic undertaking such which you could refer again to on Github.
$ ionic begin ionic-use-google-fonts clean
cd in to the brand new undertaking created by the above Ionic CLI command and run
ionic serve to see the clean template with only a homepage obtainable. As of now, the Ionic software appears like this:
The font right here used within the software at international degree is default. We will likely be altering it to Revalia. It’s only a random suggestion, you may decide no matter you need however I’d recommend, if you’re doing for the primary time or new to Ionic improvement, decide a font in which you’ll be able to see the adjustments mirrored within the app.
After choosing the font, open the highlighted hyperlink within the screenshot above, in a brand new tab.
Once more, open the hyperlink offered within the
latin part, similar to within the above picture and obtain or save the file straight in you ionic undertaking.
The situation to save lots of the file will likely be
YOUR-IonicApp > src/belongings/fonts. Create a brand new listing
fonts within the
belongings folder if not obtainable. Place the file there, and rename it as per your comfort.
Now since we wish this font for use on the international degree of software, open
src/app and first embrace the native file of the font we need to use after which use that font at international degree by utilizing an asterisk
* as css-selector:
2 font-family: 'Revalia';
3 src: url('../belongings/fonts/revalia.woff2') format('woff2');
7 font-family: Revalia;
Run the ionic software with:
To get the total code, you may go to this Github Repository.
Initially Revealed at Hackernoon.com
I am a software program developer and a technical author. On this weblog, I write about Technical writing, Node.js, React Native and Expo.
At present, working at Expo. Beforehand, I’ve labored as a Developer Advocate, and Senior Content material Developer with firms like Draftbit, Vercel and Crowdbotics.