I have problem with loading web font. How do i do that ?
#font-face {
font-family: 'RobotoCondensed';
font-weight: 400;
font-style: normal;
src: url('../fonts/rc.eot'); // IE9 Compat Modes */
src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('../fonts/rc.eot?#iefix') format('embedded-opentype'), // IE6-IE8 */
url('../fonts/rc.woff2') format('woff2'), // Super Modern Browsers */
url('../fonts/rc.woff') format('woff'), // Modern Browsers */
url('../fonts/rc.ttf') format('truetype'), // Safari, Android, iOS */
url('../fonts/rc.svg#RobotoCondensed') format('svg'); // Legacy iOS */
}
Here is my html import:
<style>
#font-face {
font-family: 'RobotoCondensed';
font-weight: 400;
font-style: normal;
src: url('../fonts/rc.eot'); // IE9 Compat Modes */
src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('../fonts/rc.eot?#iefix') format('embedded-opentype'), // IE6-IE8 */
url('../fonts/rc.woff2') format('woff2'), // Super Modern Browsers */
url('../fonts/rc.woff') format('woff'), // Modern Browsers */
url('../fonts/rc.ttf') format('truetype'), // Safari, Android, iOS */
url('../fonts/rc.svg#RobotoCondensed') format('svg'); // Legacy iOS */
}
</style>
<!-- Dependency resources -->
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/shadycss/apply-shim.html">
<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="../ui/layout/layout-bundle.html">
<link rel="stylesheet" href="../font.css">
<!-- Defines the example-template element -->
<dom-module id="neg-door">
<template>
<style include="header-view left-view"></style>
<div id="header">
<search-view id="search-view"></search-view>
<locations></locations>
</div>
<div id="left">
<span>left</span>
<category-view id="category-view"></category-view>
</div>
<content-view id="content-view"></content-view>
<div id="right">
<span>right</span>
<my-room></my-room>
</div>
</template>
<!-- Polymer boilerplate to register the example-template element -->
<script>
class NegDoor extends Polymer.Element {
static get is() {
return 'neg-door'
}
}
customElements.define(NegDoor.is, NegDoor);
</script>
</dom-module>
Here an example, at index.html between head tag:
<link rel="import" href="src/style.html">
an example at style.html:
<!DOCTYPE html>
<style>
#import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
html,
body {
font-family: 'Roboto', Arial, sans-serif;
height: 100%;
margin: 0;
}
jj-app[unresolved] {
display: block;
background-image: url('../images/beach.jpg')
min-height: 101vh;
line-height: 68px;
text-align: center;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.3em;
color: #202020;
padding: 0 16px;
overflow: visible;
}
#fbui {
position: fixed;
top: 20%;
margin: 10px 10px;
width: 88%;
padding: 10px;
border: 3px solid green;
display: none;
}
</style>
<script>
var importDoc = document.currentScript.ownerDocument;
var style = importDoc.querySelector('style');
document.head.appendChild(style);
</script>
Related
I have a web app with two fonts, Amatic SC for h1 and h2 and Open Sans for the rest. The webpage displays strong text fine on most browsers:
For Safari on iOS 9 (tested on iPhone 4S) and Internet Explorer 11 on Windows 8.1 (tested on LambdaTest), the strong elements use the font from the h1 and h2 elements:
The relevant CSS for these elements is:
#font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url(/fonts/amatic-sc-v13-latin-regular.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff'); }
#font-face {
font-family: 'Amatic SC';
font-style: bold;
font-weight: 700;
src: url(/fonts/amatic-sc-v13-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-700.woff) format('woff'); }
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(/fonts/open-sans-v17-latin-regular.woff2) format('woff2'), url(/fonts/open-sans-v17-latin-regular.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: bold;
font-weight: 700;
src: url(/fonts/open-sans-v17-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff');
}
body {
font-family: 'Open Sans', sans-serif;
}
h1, h2 {
margin: 0.5rem 0 0.5rem 0;
text-align: left;
font-family: Amatic SC, cursive;
font-weight: bold;
}
The website is at www.emotionathletes.org if you want to further inspect.
What is the reason for the use of a different font on iOS Safari and Internet Explorer?
Minimal reproducible example
Following the comment, I narrowed the issue to the loading of the fonts. If I load them in the head of the HTML, linked to Google Fonts, then the page displays well. If I load them locally in the CSS with #font-face from a woff or woff2 file, then the strong elements display with a different font on iOS 9 on iPhone 4S and on Internet Explorer 11 on Windows 8.1. The order of loading the fonts in the CSS does not change the result.
A minimal reproducible example has HTML file strong.html:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="strong.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
</head>
<body>
<h2>Summary</h2>
<p>The Bulgy series, whose first season is "Emotion Athletes", has the following purposes:</p>
<ul>
<li>
transform the <strong>difficulties</strong> of the <strong>pandemic</strong> into <strong>opportunities</strong> for children to <strong>recognise what they are feeling, understand the reason, and use their emotions</strong>;
</li>
</ul>
</body>
</html>
and CSS file strong.css:
/*
Amatic SC and Open Sans are Google Fonts:
https://fonts.google.com/specimen/Amatic+SC?sidebar.open=true&selection.family=Open+Sans#about
https://fonts.google.com/specimen/Open+Sans?sidebar.open=true&selection.family=Open+Sans#about
*/
/* comment these #font-faces for the page to work properly. */
#font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url(/fonts/amatic-sc-v13-latin-regular.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff'); }
#font-face {
font-family: 'Amatic SC';
font-style: bold;
font-weight: 700;
src: url(/fonts/amatic-sc-v13-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-700.woff) format('woff'); }
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(/fonts/open-sans-v17-latin-regular.woff2) format('woff2'), url(/fonts/open-sans-v17-latin-regular.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: bold;
font-weight: 700;
src: url(/fonts/open-sans-v17-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff');
}
body {
font-family: 'Open Sans', sans-serif;
}
h1, h2 {
font-family: 'Amatic SC', cursive;
}
I put a live version at www.emotionathletes.org/strong.html, with CSS file at www.emotionathletes.org/strong.css.
For my own reasons, I prefer to serve the font files from my server than query them from Google Fonts. How can I serve the font files locally and still display them properly on Safari and Internet Explorer?
The issue was in the code, which I found today as I was changing the main font:
For Open Sans at 700, the woff filepath was:
/fonts/amatic-sc-v13-latin-regular.woff
and should have been:
/fonts/open-sans-v17-latin-700.woff
Older browsers use woff and not woff2, and so they were doing exactly as they were told. I now fixed the issue.
Moral of the story: if using local fonts for performance, make sure to do the right wiring of CSS to filepaths.
I am using #font-face to define a font family in my CSS style sheet. When I then try to set the font family attribute, I am not able to get the new font to display on my HTML page.
#font-face {
font-family: 'Goudy Trajan Regular';
font-style: normal;
font-weight: 400;
src: local('Goudy Trajan Regular'), local('GoudyTrajan-Regular'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.woff) format('woff'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.ttf) format('truetype');
}
html, body
{
height: 95%;
width: 90%;
font-family: 'Goudy Trajan Regular', arial;
}
Update: I've stripped everything out and it still is not working. Here is my complete CSS -
#font-face {
font-family: 'Goudy Trajan Regular';
font-style: normal;
font-weight: 400;
src: local('☺'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.woff) format('woff'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.ttf) format('truetype');
}
body
{
font-family: 'Goudy Trajan Regular', arial;
}
Here is my complete HTML -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<h1>TESTING A NEW FONT</h1>
</body>
</html>
I'm new to web dev so please excuse the ignorance...
I'm trying to put a custom font on my website. I've tried doing it with #font-face and google fonts but nothing seems to work.
I've (hopefully) linked the google font in the top of the HTML doc. Also linked the fonts.css containing the 'shewalks' font. The CSS file shows how I tried to link the fonts using #font-face.
WTH am I doing wrong?
Folder Structure
css:
#font-face {
font-family: 'shewalks';
src: url('./fonts/she_always_walks_alone_demo-webfont.ttf');
src: url('./fonts/she_always_walks_alone_demo-webfont.woff');
src: url('./fonts/she_always_walks_alone_demo-webfont.svg');
src: url('./fonts/she_always_walks_alone_demo-webfont.eot');
src: url('./fonts/she_always_walks_alone_demo-webfont.woff2');
}
a {
font-family:'pacifico',verdana,arial;
}
h2 {
font-family: 'Pacifico', cursive;
}
body {
text-align: center;
font-family: 'shewalks';
}
header {
position: fixed;
background: #ffffff;
width: 100%;
z-index: 10;
position: fixed;
height: 300px;
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="fonts/fonts.css" />
<link href="style.css" rel="stylesheet" />
<title>Me and the Monster</title>
</head>
<body>
<div id="banner">
<h2>Me and the Monster</h2>
</div>
<div id="content">
<h2><div style="font-family: 'pacifico', serif;">This should be in 'pacifico' font.</div></h2>
<p>Content goes here </p>
<p>Content goes here </p>
</div>
Thanks so much for any and all help!
If you go the Google route, your code should look like:
HTML:
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
CSS:
body {
font-family: 'Pacifico', cursive;
}
If you go the '#import' route, and are hosting the fonts on your own server, your code should look like:
CSS:
#font-face {
font-family:"She Always Walk Alone Demo";
src:url("/fonts/She_Always_Walks_Alone_Demo.eot?") format("eot"),
url("/fonts/She_Always_Walks_Alone_Demo.woff") format("woff"),
url("/fonts/She_Always_Walks_Alone_Demo.ttf") format("truetype"),
url("/fonts/She_Always_Walks_Alone_Demo.svg#SheAlwaysWalkAloneDemo") format("svg");
font-weight:normal;
font-style:normal;
}
body {
font-family: 'She Always Walk Alone Demo', cursive;
}
In your font.css :
src: url('./fonts/she_always_walks_alone_demo-webfont.ttf');
Url is not about your server path, but relative your domain from font.css.
So, it should work:
src: url('fonts/she_always_walks_alone_demo-webfont.ttf');
You should also include the format on your src like below:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Also, fix in your index.html:
<link href='https://fonts.googleapis.com/css?family=Pacifico' />
I am currently developing an ASP.MVC web project in Visual Studio 2013 and have come across a strange issue when rendering glyphs using font-face in Chrome (39.0.2171.99 m) and Opera (26.0.1656.60).
I am using the latest Web Essentials release and using its SCSS pre-compiler. I have a small mixin for building the Css for the font as below.
#mixin font-face($font-family, $file-path, $font-weight, $font-style) {
#font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg##{$font-family}') format('svg');
font-weight: $font-weight;
font-style: $font-style;
}
// Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: $font-family;
src: url('#{$file-path}.svg##{$font-family}') format('svg');
}
}
}
And calling the mixin in the SCSS file
#include font-face(Flat-UI-Icons, '../fonts/Flat-UI-Icons', 300, normal);
This gives me the following result in the css file
#font-face {
font-family: Flat-UI-Icons;
src: url('../fonts/Flat-UI-Icons.eot');
src: url('../fonts/Flat-UI-Icons.eot?#iefix') format('embedded-opentype'), url('../fonts/Flat-UI-Icons.woff') format('woff'), url('../fonts/Flat-UI-Icons.ttf') format('truetype'), url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg');
font-weight: 300;
font-style: normal; }
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: Flat-UI-Icons;
src: url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg'); }
}
I am then loading the font-face glyph's with the below css
.glyph-button,.glyph-list,.glyph-textbox,.glyph-number {
display: inline-block;
font-family: 'Flat-UI-Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
font-size: 35px;
}
.glyph-button:before {
content: "\e033";
}
.glyph-list:before {
content: "\e00c";
}
.glyph-textbox:before {
content: "\e019";
}
.glyph-number:before {
content: "\e031";
}
And finally adding the glyph class to my ASP.MVC view
<h3><span class="glyph-list"></span> Components</h3>
The problem I have is that the font glyph do not render in either Chrome or Opera but they do in IE11 and FirefoxDeveloper.
Chrome / Opera
IE / Firefox
Any idea what the issue is?
Really simple fix to the mixin in the end. Required a simple cleanup of a couple of paths Flat-UI-Icons.svg#Flat-UI-Icons to Flat-UI-Icons.svg and adding the font-style and font-weight attributes to the -webkit implementation.
#mixin font-face($font-family, $file-path, $font-weight, $font-style) {
#font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('eot'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg') format('svg');
font-weight: $font-weight;
font-style: $font-style;
}
// Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: $font-family;
src: url('#{$file-path}.svg') format('svg');
font-weight: $font-weight;
font-style: $font-style;
}
}
}
Everything now renders as expected.
I have a little problem while creating icons with font-face and :before pseudo-class. I'm using LESS too. Right now, I have something like
#font-face {
font-family: 'myfontname';
src: url('../myurl.eot');
src: url('../myurl?#iefix') format('embedded-opentype'),
url('../myurl.woff') format('woff'),
url('../myurl.ttf') format('truetype'),
url('../myurl.svg#name') format('svg');
font-weight: normal;
font-style: normal;
}
.icon{
font-family: 'myfontname';
font-size: 1em;
padding:0;
margin:0;
}
.icon-correct:before{
.icon; /*mixin*/
position: relative;
content:"\004C"; /*L in my font*/
display: block;
}
And in my HTML
<span class="icon-correct"></span>
I can't see my icon doing it this way. However, it works if I do something like
<span class="icon">L</span>
What am I doing wrong? Thank you.