I am coding HTML emails and would like to change the font size on mobile. I have used the code that google used as a text but changed it a bit and added font size. Below is the code that I tested. The color changed but the font size did not. Any hints or ideas where I might find an answer?
Thank you in advance for the help, it is muchly appreciated.
Vince
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
#media screen and (max-width:500px) {
.colored {
color:red;
}
p {
font-size: 10px;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is red if the window width is
below 500px and blue otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
You may just need to add the !important flag.
p {
font-size: 10px!important;
}
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>
Is there an easy way to disable the styling provided by the Intel XDK? Specifically from af.ui.css.
The styling causes problems, especially when you are using external libraries. It would be nice to do something like jQuery Mobile's data-role='none'
e.g. I am trying to use a CSS style for star rating where the user can rate by touching or clicking on stars. This works fine on a normal HTML JavaScript page but somehow the af.ui.css gives one of the elements a width of 60%. These are the lines from af.ui.css which do that:
#afui input[type="radio"] + label,
#afui input[type="checkbox"] + label {
display: inline-block;
width: 60%;
float: right;
position: relative;
text-align: left;
padding: 10px 0 0 0;
}
This is the HTML it is acting on:
<label for="Ans_1" class="star rb0l" onclick=""></label>
If I comment the width statement in af.ui.css, it messes up other checkboxes. I tried to force a width in the label by using at style="width:.." but that doesn't work either.
Any suggestions?
Without more code structure it is hard to know exactly what could be going wrong.
In general if you use style="width:..." it should override afui.ui.css unless the css is being loaded after your inline styles and clobbers them. You can try to force your css style by using CSS '!important'
.star {
width: 20px !important;
}
either in an external CSS file or in style tags in your html file that load after the afui.ui.css file. You could even try style="width: 20px !important;". Some more info on this: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
In general I would use images or css for a star rating not checkbox or radio buttons. Here is a good example: http://css-tricks.com/star-ratings/
Let me know if that works for you or if you could include a screenshot or more html structure I can try to help.
You should be able to create your own id and then as long as you apply your styles after afui.ui.css is loaded it should keep the app framework styles but only override your star checkbox.
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
</head>
<body>
<label id="idname"></label>
</body>
<style>
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
</style>
OR...
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="star.css">
</head>
<body>
<label id="idname"></label>
</body>
star css file:
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
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!
I am using Typekit to load the league-gothic font and for some reason Safari is completely eliminating the word-spacing so there are no gaps between the words. Before I go with a css hack, I was wondering if anyone could help. Here is the html:
<div class="page-header">
<h1 data-name="about">About Campaign Title</h1>
</div>
And here is the CSS:
h1 {
font: 70px/normal "league-gothic", sans-serif;
text-transform: uppercase;
color: #4e4e4e;
}
I tried placing an h1 tag all over the page and still saw the problem. I also set word-spacing to both inherit and normal, seeing the same result.
Thanks.
This turned out to be a problem with the new text-rendering property. We are using bootstrap.css from Twitter and Bootstrap had the text-rendering property set to optimizeLegibility. We set it back to auto as follows:
h1 {
font: 70px/normal "league-gothic", sans-serif;
text-transform: uppercase;
color: #4e4e4e;
text-rendering: auto;
}