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";}
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'm creating a React/Ionic project and using SASS for styling, but I had a hard time adding the stylings to the project.
I went to the font-awsome website, created the package, added the fonts and added the file call to my routes file. But when I use the icons, they don't appear.
the fonts folder:
font-awesome.module.scss file:
#font-face {
font-family: 'cbm-icons';
src : url('./fonts/cbm-icons.eot?uwy7j0');
src : url('./fonts/cbm-icons.eot?uwy7j0#iefix') format('embedded-opentype'),
url('./fonts/cbm-icons.ttf?uwy7j0') format('truetype'),
url('./fonts/cbm-icons.woff?uwy7j0') format('woff'),
url('./fonts/cbm-icons.svg?uwy7j0#cbm-icons') format('svg');
font-weight : normal;
font-style : normal;
font-display: block;
}
[class^="cb-"],
[class*=" cb-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family : 'cbm-icons' !important;
speak : never;
font-style : normal;
font-weight : normal;
font-variant : normal;
text-transform: none;
line-height : 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cb-cross:before {
content: "\ea0f";
}
.cb-checkmark:before {
content: "\ea10";
}
.cb-warning:before {
content: "\ea07";
}
Here is the import in file in my routes file:
The correct way of setting this up:
First, edit scss/variables.scss and edit the $fa-font-path variable to point to where your webfonts are.
Then, just add to your main (in your case, global) scss file:
#import "./fontawesome/scss/fontawesome.scss";
Then you can use the mixins as follows:
.twitter {
#extend %fa-icon;
#extend .fab;
&:before {
content: fa-content($fa-var-twitter);
}
I followed the wiz recommendations, but tweaked it and did it my way. I took the opportunity to make some changes to my code.
So i did like this. First, I centered all my styling in global.scss. Including the style imports from ionic and the #mixin I created from font-awesome:
#import './variables.module.scss';
#import './font-awesome.module.scss';
#import '#ionic/react/css/core.css';
#import '#ionic/react/css/normalize.css';
#import '#ionic/react/css/structure.css';
#import '#ionic/react/css/typography.css';
#import '#ionic/react/css/padding.css';
#import '#ionic/react/css/float-elements.css';
#import '#ionic/react/css/text-alignment.css';
#import '#ionic/react/css/text-transformation.css';
#import '#ionic/react/css/flex-utils.css';
#import '#ionic/react/css/display.css';
#include font-awesome;
// the rest of the global styling...
}
font-awesome.scss file settings:
#mixin font-awesome {
// file settings...
}
And in the router.tsx file I left only the call to global.scss:
import 'src/presentation/styles/global.scss'
// remaining importations...
const Router: React.FC = () => {
return (
// Routes...
)
}
export default Router
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";
I have some problem with web font .
I am get font link from api . How can I use that font in render method ?
componentDidMount() {
axios.get(URL_FONT)
.then((resp) => {
this.setState({
fontData: resp.data.data
});
}).catch(() => {
console.log("Error_006");
});
}
render(){
return(
{ this.state.fontData.map((item, index)=>{
<span key={index} style={{fontFamily: item.name}}>
{item.name}
</span>
})
)
}
actual question is - is there any way to use #font-face dynamically?
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
You can use WebFontLoader to set font dynamically:
https://github.com/typekit/webfontloader
I am find the answer (source Dynamically Loading Fonts with Javascript
)
const addFont = new FontFace(
yorFontName, yorFontUrl,
{"font-display": "block", weight: "normal"} // odere props
);
addFont.load()
.then(function (loaded_face) {
document.fonts.add(loaded_face);
})
.catch(function (error) {
console.log(error);
});
#Tigrank solution works for CDN fonts(Like Google fonts), but if you want use them in your code and not CDN ones, (Some project run while have not access to internet, then resources must accessible through internal network)
Create a fonts directory inside src
Copy your font files to fonts
In index.js import './fonts/FontFILE.ttf';
other font format is so applicable(wof/wof2/svg).
Repeat step 3 for all your fonts
Add this CSS code for every font file:
/* FONT NAME */
#font-face {
font-family: 'FONT_NAME';
src:
url('../fonts/FONT-NAME.ttf') format('truetype');
/*
For other font file formats:
src:
url('../fonts/WOF2-Font.woff2') format('woff2'),
url('../fonts/WOF-Font.woff') format('woff'),
url('../fonts/TTF-Font.ttf') format('truetype');
*/
font-weight: normal;
font-style: normal;
}
Repeat step 5 for every font file too.
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;