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!
Related
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;
}
HTML CODE:
(Image is present in the right directory)
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>Sample Header</h1>
</header>
<main>
<article>
<h2>Sample Header 2</h2>
<p>Sample Paragraph 1</p>
<p>Sample Paragraph 2</p>
</article>
</main>
</body>
CSS CODE:
html{
font-family: 'Open Sans', sans-serif;
background-image: url('images/pattern.png');
background-color: burlywood;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
header {
height: 150px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
background-image does not work in the above form,but when the same css-code is included in style tag,background-image works perfectly fine,why not in external stylesheet?
I think this is a path issue for the background-image: url(...). I can't reproduce at the moment because of lacking information but please be aware of your folder structure. When you use <style> for CSS the starting point for the relative path is your root folder (or where the HTML is located).
In case of the style.css the starting point is the folder styles. So mind that in that case the path might have to change. You can use the Firefox developer tools or Chrome developer tools to modify your path on the fly. This way you can easily find out yourself where the issue with the path originates or if the background-image rule was applied properly on your element.
Updated: added links to developer tools (Mozilla, Google)
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>
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>
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>