Does anyone know how to update the font for Ionic 4?
I tried adding the aileron.woff to assets/fonts and putting this in the variables.scss to no avail.
src: url('../assets/fonts/aileron.woff') format('woff');
This is how I managed to add a custom font to my Ionic application
Add a directory that contains the font files to the project under the folder src\assets\fonts
src\assets\fonts\myCustomFont
|
+-- MyCustomFontBold.ttf
+-- MyCustomFontBoldItalic.ttf
+-- MyCustomFontItalic.ttf
+-- MyCustomFontRegular.ttf
Define the fonts in the file src\theme\variables.scss:
#font-face {
font-family: 'My Custom Font';
font-style: normal;
font-weight: normal;
src: url('../assets/fonts/myCustomFont/MyCustomFontRegular.ttf');
}
#font-face {
font-family: 'My Custom Font';
font-style: normal;
font-weight: bold;
src: url('../assets/fonts/myCustomFont/MyCustomFontBold.ttf');
}
#font-face {
font-family: 'My Custom Font';
font-style: italic;
font-weight: normal;
src: url('../assets/fonts/myCustomFont/MyCustomFontItalic.ttf');
}
#font-face {
font-family: 'My Custom Font';
font-style: italic;
font-weight: bold;
src: url('../assets/fonts/myCustomFont/MyCustomFontBoldItalic.ttf');
}
In the same file src\theme\variables.scss, edit the :root element to define your custom font as the font of the Ionic application:
--ion-font-family: 'My Custom Font';
Add a Custom Font in directory folder src\assets\fonts
Define the fonts in the file src\theme\variables.scss before :root
#font-face { font-family: "Custom Font"; src:
url("../assets/fonts/Custom Font.xxx"); }
define your custom font in :root
--ion-font-family: "Custom Font";
You seem to be interested in Ionic 4 / Angular.
I just created a test app with template "blank" in Ionic 4.0.0 beta. Here's what I put into variable.sccs to change all fonts across platforms:
:root,
:root[mode=ios],
:root[mode=md] {
--ion-font-family: "Palatino", "Times New Roman", serif !important;
font-family: "Palatino", "Times New Roman", serif !important;
}
On my Mac I see "Palatino".
The key is, to use "!important". As far as the Beta goes, theming of fonts is not yet documented. It may be clarified later or the behavior may change in final. Keep this in mind.
Add your font in the directory assets, and add this to your variables.scss file to declare the font family and set a class that uses it:
#font-face {
font-family: 'custom';
src: url('../assets/fonts/custom.ttf');
}
.text-custom {
font-family: "custom";
}
Then in any xx.page.html you can use the class like this:
<span class="text-custom">your text</span>
It's work for me
Make sure you give the current font folder path and file name
You'll want to use the CSS4 variable --ion-font-family
Here is an example:
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Test Font Family</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://unpkg.com/#ionic/core#4.0.0-beta.2/dist/ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#ionic/core#4.0.0-beta.2/css/ionic.min.css">
<style>
#font-face {
font-family: 'Hanalei Fill';
font-style: normal;
font-weight: 400;
src: local('Hanalei Fill'), local('HanaleiFill-Regular'), url(https://fonts.gstatic.com/s/hanaleifill/v6/fC1mPYtObGbfyQznIaQzPQi8UAjA.woff2) format('woff2');
}
:root {
--ion-font-family: 'Hanalei Fill';
}
:root[mode=md] {
--ion-font-family: 'Hanalei Fill';
}
:root[mode=ios] {
--ion-font-family: 'Hanalei Fill';
}
</style>
</head>
<body>
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" fullscreen>
<ion-card>
<ion-card-header>
<ion-card-title>Font Family</ion-card-title>
</ion-card-header>
<ion-card-content>
Testing
</ion-card-content>
</ion-card>
</ion-content>
</ion-app>
</body>
</html>
1.Include the font ttf file inside the src/assets/fonts/ folder.
2.Now create the font family by including it in the global.scss(src/global.scss)
EX:#font-face {
font-family: 'CustomfontName';
src: url('./assets/fonts/CustomFont.ttf');
}
3.Apply the style
<ion-content>
<div style='font-family:CustomfontName'>
Sample text for custom font
</div>
</ion-content>
For better understanding click the below link,
https://www.youtube.com/watch?v=Hz7SLdGG8HA
in global.scss file
#font-face {
font-family: 'quicksand'; //This is what we are going to call
src: url('./assets/font/Quicksand-Bold_df5ccd3628ec30ca750b7a6c1f1d6dac.ttf');
}
.mobile-heading {
font-family: "quicksand";
}
and in HTML file mobile-heading class
<h1 class="mobile-heading">quicksand Font apply</h1>
Related
I am hosting a website on a server where NodeJs is not available. I am using npm run export and deploying the content of the out folder on the server.
I managed to fixed the issues for serving CSS, JS and images but I cannot figure out how to serve the fonts.
I am importing the fonts as follows in globals.css and it works locally:
#font-face {
font-family: "Roboto Light";
src: url('../public/fonts/Roboto-Light.ttf');
}
#font-face {
font-family: "Roboto Black";
src: url('../public/fonts/Roboto-Black.ttf');
}
#font-face {
font-family: "Due Credit Regular";
src: url('../public/fonts/Due-Credit-Regular.otf');
}
#font-face {
font-family: "Otamendi";
src: url('../public/fonts/Otamendi.ttf');
}
#font-face {
font-family: "Compacta Regular";
src: url('../public/fonts/Compacta-Regular.ttf');
}
I tried this solution but it did not work.
I am going to introduce my solution.
First, you need to place font files(*.ttf, *.woff) in public directory. Assuming that your font files take place in /public/fonts.
/public
/fonts
Roboto-Bold.ttf
Roboto-Bold.woff
Roboto-Bold.woff2
Roboto-Italic.ttf
Roboto-Italic.woff
Roboto-Italic.woff2
Roboto-Regular.ttf
Roboto-Regular.woff
Roboto-Regular.woff2
Second, create fontstyle.css in /public/fonts and write content like below.
#font-face {
font-family: 'Roboto';
src: url('./Roboto-Italic.woff2') format('woff2'),
url('./Roboto-Italic.woff') format('woff'),
url('./Roboto-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}
#font-face {
font-family: 'Roboto';
src: url('./Roboto-Bold.woff2') format('woff2'),
url('./Roboto-Bold.woff') format('woff'),
url('./Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: 'Roboto';
src: url('./Roboto-Regular.woff2') format('woff2'),
url('./Roboto-Regular.woff') format('woff'),
url('./Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
Third, import your fontstyle.css in your root component or application component.
index.js
import 'public/fonts/fontstyle.css';
...
Or if you already configured jsconfig.json in the root directory of your project, declare public directory and use it.
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
...
"#public/*": [
"public/*"
],
}
}
}
index.js
import '#public/fonts/fontstyle.css';
...
Then you can use Roboto font family in your components.
global.css
.myoddbtn{
font-family: Roboto;
font-size: 14px;
font-weight:400;
}
TestButton.jsx
export default function TestButton(){
return (
<button className="myoddbtn">
Font-family:Roboto
</button>
)
}
Try removing the '../public' part of your links: your js bundle will be in a different folder in production.
Tried the other answers here without success. Ultimately the issue for me was that the paths during 'next export' get rewritten everywhere but in the css files. And that unfortunately did not get solved by the proposed solutions.
However I ended up using the solution to another similar In another Stack Overflow question found here This solution uses replace-in-file to rewrite the paths in css also.
Just wanted to leave an answer here for anyone who finds this question first like me.
I'm using FA and :before to use icons instead of bullets.
Some unicode characters work, and some don't. For example, f004 (heart), f005 (star), and f2dc (snowflake) work. But f001 (music), f008 (film), and f046 (check) don't work.
I'm using FA 5.0.6 Free.
#font-face {
font-family: 'awe506';
src: url("../fontawesome506/fa-regular-400.eot");
src: url("../fontawesome506/fa-regular-400.eot?#iefix") format("embedded-opentype"),
url("../fontawesome506/fa-regular-400.woff2") format("woff2"),
url("../fontawesome506/fa-regular-400.woff") format("woff"),
url("../fontawesome506/fa-regular-400.ttf") format("truetype"),
url("../fontawesome506/fa-regular-400.svg#fontawesome") format("svg");
}
.bulletsamples ul {
list-style-type: none;
padding-left: 0;
margin-left: 2em;
}
.bulletsamples li {
position: relative;
padding-left: 2em;
margin-bottom: 10px;
}
.bulletsamples li:before {
position: absolute;
top: 0;
left: 0;
font-family: awe506;
font-weight: 400;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.stars li:before {
content: "\f005"; /*THIS WORKS*/
color: blue;
}
.stars li:before {
content: "\f008"; /*THIS DOESN'T WORK*/
color: blue;
}
No - I don't have two .stars li:before rules in my CSS - I've added this for illustration.
On the FA website (https://fontawesome.com/icons?d=listing&m=free) I filtered the list to only show icons included in the free set.
Also - the icons are hollow - I followed the instructions on FA's site and set font-weight to 900 for solid icons and it made no difference.
Thanks in advance - Cath
Doesn't look like u+f008 has a glyph in that font/version; it is simply not present.
According to https://fontawesome.com/icons?d=gallery&q=film you would need to use the solid version instead of the regular one (which is "Pro" only). This goes for u+f001 as well. u+f046 has apparently been moved at some point to u+f14a.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#font-face {
font-family: awe506;
src: url(fa-solid-900.woff);
}
.stars {
font-family: awe506;
}
.stars li:before {
/*content: '';*/
content: '\f005';
color: blue;
}
.stars li:after {
/*content: '';*/
content: '\f008';
color: blue;
}
</style>
</head>
<body>
<ul class="stars">
<li>foo</li>
<li>bar</li>
</ul>
</body>
</html>
i want to use “Comfortaa” font in my application,to all page(like default font).i used the font using url.
like this:
<style>
#import url('https://fonts.googleapis.com/css?family=Comfortaa');
</style>
in .scss
font-family: 'Comfortaa'
but application is in offline the font did not work in my aaplication.how i can use the font in both offline and online condition.
when app is in offline it shows a italic type font.
like this
For add custom font in a application
Do following step:
Add custom font to assets/fonts folder
Add following code to app.scss file
#font-face {
font-family: 'San Francisco Light';
font-weight: normal;
font-style: normal;
src: url('../assets/fonts/SanFranciscoDisplay-Regular.otf');
}
After In theme/variables.scss file
add variable name
like this:`enter code here`
$font-family-ios-base: "San Francisco Light";
$font-family-md-base: "roboto";
First download and put the folder in src/assets/fonts and then in your theme folder write:
$font-path: "../assets/fonts";
#font-face {
font-family: GlobalFont;
src: url("../assets/fonts/Comfortaa/Comfortaa.ttf");
}
body, span, button, h1, h2, h3, h4, h5, h6, p, ion-item, ion-title {
font-family: 'GlobalFont' !important;
}
Our web app has these material icons: https://fonts.googleapis.com/icon?family=Material+Icons
And we're currently developing the mobile version in Ionic Framework 3, and we want to use the same icons, but some of them aren't included in the framework.
How can I add them? Ideally, I would want to use them like the other Ionic icons:
<ion-tab [root]="tab1Root" tabTitle="Something" tabIcon="some-material-icon"></ion-tab>
Thanks.
Maybe it's a late answer but I want to share what I know.
Firstly, you can import easily by using Google's font url, but this will not work if user's device doesn't have internet connection:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
INSTEAD, I recommend importing the whole font into the project. To do this, you can download all MaterialIcons font types of different platforms(eot, ttf, woff, woff2, ijmap, svg):
https://drive.google.com/file/d/1pq9dHrfWBsd5NFoaaB76tZ8nEzBbGrbN/view?usp=sharing
Then, extract files and move them under assets/fonts/ folder of your Ionic project. In the variables.scss you can find this line of code:
$font-path: "../assets/fonts";
If you don't have just add that line. And also, introduce your project with new font by adding these code blocks into the variables.scss:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url($font-path + '/MaterialIcons-Regular.eot'); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url($font-path + '/MaterialIcons-Regular.woff2') format('woff2'),
url($font-path + '/MaterialIcons-Regular.woff') format('woff'),
url($font-path + '/MaterialIcons-Regular.ttf') format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
That's it! Use the icons where you need them:
<i class="material-icons">icon_name_here</i>
Follow this doc: http://google.github.io/material-design-icons/
the easy way:
1.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<i class="material-icons">face</i>
Well, I hope this might be helpful for someone using ionic 4.
To add the material icons in your ionic 4 app the following steps worked for me.
ng add #angular/material
follow the instructions on the CLI based on your preference.
for usage in your html
<span class="mi mi-face"></span>
I'm trying to use the font 'Cabin Sketch'
I incluced the font like it says on the google web font page:
html:
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css' >
css:
body {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 400;
color: #dbdbdb;
font-size: 14px;
}
Letters from a-z are working but any other charakters like .!# are not working.
In the google web font preview all characters are working.
Other fonts are working perfectly.
I'm using firefox 11.0 and Ubuntu 11.04.
I also created a issue on google font directory:
http://code.google.com/p/googlefontdirectory/issues/detail?id=124
Thank you in advance.
That seems right, Which browser are you using it with? It should work for all alphabets that it uses. I tested it and it works just fine. Make sure your browser supports #font-face
jsfiddle
http://jsfiddle.net/
html page
<head>
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="font">
<p>Hey yo</p>
<p>1234</p>
<p>! # .</p>
</div>
<div id="normal">
<p>Hey yo</p>
<p>1234</p>
<p>! # .</p>
</div>
</body>
css
body {
padding: 100px;
}
div {
margin: 10px;
}
#font {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 400;
color: #333;
font-size: 14px;
}
Preview in Chrome
So it is correct, as you see above, it supports non alphabetical characters. Run the fiddle to see yourself. Hope that helps!