I am using Ionic3:
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.1 Build version 8E1000a
I have the following font: Ormont_Light.ttf
As you can see above, I try apply this new font in the app.scss file. However, I cannot seem to make it take effect.
As you can see, it is still using the Ionic default of:
font-family: "Roboto", "Helvetica Neue", sans-serif;
Question
Please can anyone advise how to implement a new font using a ttf file in Ionic 3?
UPDATE
I add the following:
#font-face {
font-family: Ormont_Light;
src: url(../assets/fonts/Ormont_Light.ttf) format("ttf");
font-weight: normal;
font-style: normal;
}
body {
font-family: Ormont_Light !important;
}
Now I get the font showing up in the source:
body {
font-family: Ormont_Light !important;
}
But it's not being applied to the app on a global level as expected.
UPDATE
variables.scss
$font-family-base: "Ormont_Light";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;
Thanks, That kind of works. It is now applying Ormont_Light too all my styles which is great. i.e. the dom now has:
body {
font-family: Ormont_Light !important;
}
But the the displayed font is using Times New Roman font, which I guess is the browser default when it cannot find the font referenced. So I guess my path to my .ttf file is incorrect.
Where do you keep you .ttf file?
You need to override the Ionic Sass Variables .
You need to add this font-face in src/theme/variables.scss.
#font-face {
font-family: 'Ormont_Light';
src:url('../assets/fonts/Ormont_Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
$font-family-base: "Ormont_Light";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;
Related
#font-face {
font-family: Gumela;
src: url('../src/fonts/*');
}
*{
font-family: "Gumela";
font-weight: normal;
font-size: 20px;
}
I used this in visual studio while working on a react app navbar but the browser keeps showing font couldn't be downloaded error, I tried changing the path as well as redownloading the font but nothing changed, please help me with this
Make sure your #font-face rule is complete.
It should rather look something like this:
#font-face {
font-family: Gumela;
font-style: normal;
font-weight: 400;
src: url(../src/fonts/gumela.woff) format('woff2');
}
Better specify a format and the font-weight.
Check the path/URL
you can easily test this by entering the font files url in you address bar:
yourPage.com/src/fonts/gumela.woff
Common mistake:
You fonts folder is actually in your css directory. So you src should rather be:
src: url(fonts/gumela.woff) format('woff2')
So doublecheck your paths. As a last resort you might also try absolute paths.
I load the custom font with the location in the static/fonts folder, it works fine when in development mode (docusaurus start), but when I build (docusaurus build), the results show that the fonts I used are not loading, because the fonts folder is outside the static folder.
Folder structure when build
This is the snippet I made in the custom.css file
#font-face {
font-family: 'Indonesiana';
src: url('/static/fonts/Indonesiana.woff') format('woff'),
url('/static/fonts/Indonesiana.svg#Indonesiana') format('svg'),
url('/static/fonts/Indonesiana.eot'),
url('/static/fonts/Indonesiana.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
Thanks.
Just use relative paths and you will have a proper links upon build (assuming your css is in src/css):
#font-face {
font-family: 'Indonesiana';
src: url('../../static/fonts/Indonesiana.woff') format('woff'),
url('../../static/fonts/Indonesiana.svg#Indonesiana') format('svg'),
url('../../static/fonts/Indonesiana.eot'),
url('../../static/fonts/Indonesiana.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
You should also add a font like this:
#font-face {
font-family: "Indonesiana";
src: url('/static/fonts/Indonesiana.woff') format('woff');
}
:root {
--ifm-font-family-base: "Indonesiana"
}
There are other ways to do it for different modes, such as:
--ifm-font-family-monospace: "Indonesiana";
Im trying to install and use a custom font ( Chewy.ttf ) in Ionic 2
i already tried to use it like css with #font-face {
font-family: Chewy;
src: url(../../www/assets/fonts/Chewy.ttf);
}
And in the Browser it works just fine but when I build it
it won't work anymore
Thankful for any help
first put your font file in src/assets/fonts/name.ttf path.
then in src/app/app.scss
#font-face {
font-family: name;
src: url(../assets/fonts/name.ttf) format("ttf");
font-weight: 200
}
body {
font-family: name !important;
}
For now you can use Google fonts, for example download this one : https://fonts.gstatic.com/s/raleway/v11/yQiAaD56cjx1AooMTSghGfY6323mHUZFJMgTvxaG2iE.woff2
Just copy the file downloaded to the folder "www/assets/fonts" and rename it if you want.
In the file app.scss copy this code:
#font-face {
font-family: "Raleway";
src: url("../assets/fonts/Raleway.woff2") format("woff2");
}
you can now use your new font
H1 {
font-family : "Raleway";}
I am just wondering what would be the best approach to using cssnext custom properties like these, alongside css modules in react.
Is there a way to share these across modules ?
:root{
--primary: pink;
--fontSize: 1rem;
--fullWidth: 100%;
--color: red;
--gutter: 1.618rem;
}
#custom-media --small-viewport (max-width: 30em);
#custom-media --large-viewport (min-width: 75em);
#custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
EDIT: *** ok i tried this, thought it worked but hasn't
:global(:root) {
--primary: pink;
--fontSize: 1rem;
--fullWidth: 100%;
--color: pink;
--gutter: 1.618rem;
}
CSS Modules should only handle selectors that are classnames (that start with a dot). So it should not be an issue and you should be able to use those custom definition as soon as they are in the file. You can use postcss-import to inline your file that contains global definitions.
Another solution is to define this global values using postcss plugin options:
https://github.com/postcss/postcss-custom-properties#variables
https://github.com/postcss/postcss-custom-media#extensions
Because the postcss-loader only transforms a single file at a time you must import your custom properties, e.g.
#import './root.css';
.foo {
color: var(--primary);
}
How can I use Font Awesome in ui.bootstrap.rating?
I found out, that when I add state-on="'fa-star'" state-off="'fa-star-o'" to and changed class="glyphicon" to class="fa" in ui-bootstrap-tpls it works.
But I guess there is a more custom way to change the class of the icons.
Yeah as you are doing with setting state-off and state-on is their recommended manner. If you are going to have lots of the ratings on a page, I would just create a custom template and over-ride the stock template. Here is a post custom templates
I had Font Awesome and so didnt want to include Glyphicons.
uib.bootstrap Version: 1.3.3 - 2016-05-22 uses limited Glyphicons, so this is what i added to my css
.glyphicon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-star:before {
content: "\f005";
}
/**
copied from
.fa-star:before {
content: "\f005";
}
*/
.glyphicon-star-empty::before {
content: "\f006";
}
.glyphicon-chevron-right:before {
content: "\f054";
}
.glyphicon-chevron-left:before {
content: "\f053";
}
.glyphicon-chevron-up:before {
content: "\f077";
}
.glyphicon-chevron-down:before {
content: "\f078";
}
i.e. added css from Font Awesome 4.6.3 to appropriate glyphicon names
Now i dont know if this code will break on version of Font Awesome