I want to change the font, but I can't do it on Chrome or Samsung A50, Android XI device. I will appreciate any help you can guide me, thanks!
Ionic CLI: 6.19.0
Ionic Framework: #ionic/angular 6.0.4
Cordova CLI: 11.0.0
I copied the ttf in the folder assets/fonts, PermanentMarker-Regular.ttf
global.scss:
#font-face {
font-family: 'Permanent Marker', cursive;
src: url('/src/assets/fonts/PermanentMarker-Regular.ttf')
}
home.scss:
ion-content h3 {
--ion-font-family: 'Permanent Marker', cursive !important;
font-size: 24px;
}
home.html:
<ion-content class="ion-padding" [style.background-image]="'url(' + img_backg + ')'">
<ion-grid>
<ion-row class="ion-text-center">
<ion-col>
<h3>{{global.titulo_principal}}</h3>
………
Assuming that home.html is correct, change the path of global.scss to the following:
src: url('../assets/fonts/PermanentMarker-Regular.ttf')
Related
Been trying to change footer background but I cant get it right. I have a color for each tag but only the last tag is changed (blue - #0000ff) . How does one do styling in Ionic 4?
<template>
<ion-footer>
<ion-toolbar>
<ion-title v-if="loggedIn">
<a href="https://www.facebook.com/" target="_blank">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="https://www.instagram.com/" target="_blank">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</ion-title>
</ion-toolbar>
</ion-footer>
</template>
<script>
export default {
name: "pageFooter",
computed: {
loggedIn() {
return this.$store.getters.loggedIn;
}
}
};
</script>
<style lang="scss">
ion-footer {
background-color: #ff0000;
ion-toolbar {
background-color: #00FF00;
ion-title {
background-color: #0000ff;
a {
font-size: 25px;
color: #000;
}
}
}
}
</style>
It has something to do with "shadow dom" concept which I dont fully undersrtand yet . This DOM structure for the footer.
Ionic 4 uses web components, so the way to style components in Ionic 4 is to use the CSS variables that Ionic provides.
In your case, set the --background property of the component:
ion-footer {
--background: #ff0000;
}
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>
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>
In the Ionic app, I need to change the background color for my side menu to become red . By default , when I click or press on one item stable color become the background color but I need to become red .
see this
You can use sass to build your own custumized ionic.css
You can give custom css to set the background color like <ion-content class="dark">
Css
.dark {
background-color: red !important;
color: #ffffff;
}
Sample HTML
<ion-side-menu side="left">
<ion-header-bar class="bar bar-dark">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content class="dark">
<ion-list class="list">
<ion-item href="#/event/check-in">Check-in</ion-item>
<ion-item href="#/event/attendees">Attendees</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
You can check the full code/demo on the codpen which have proper comments also : http://codepen.io/mhartington/pen/qafgv
For the other reference you can check this also : http://pointdeveloper.com/ionic-change-side-menu-color/
Try overriding item.active.item-stable and item.activated.item-stable styles in your custom CSS.
Add below styles in your custom CSS:
.item.active.item-stable, .item.activated.item-stable, .item-complex.active .item-content.item-stable, .item-complex.activated .item-content.item-stable, .item .item-content.active.item-stable, .item .item-content.activated.item-stable{
border-color: #B81D22;
background-color: #B81D22;
}
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!