I am using the Web Font Loader to manage the loading of fonts in my code. But I'm finding that, even when I specify a bold weight for a particular font, the loader is only loading the normal weight in advance, and only subsequently loading the bold variant.
In the html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
In the javascript:
var WebFontConfig = {
"timeout": 3000,
"classes": false,
"custom": {
"families": [
"TeX Gyre Adventor:700n"
],
"urls": [
"./css/fontstuff.css"
]
},
active: function () {
setTimeout(function() {
nowDoOtherStuff();
}, 2500);
}
};
WebFont.load(WebFontConfig);
In fontstuff.css:
#font-face {
font-family: 'TeX Gyre Adventor';
font-style: normal;
font-weight: 400;
src: url('../fonts/TexGyre/texgyreadventor-regular-webfont.woff2') format('woff2'),
url('../fonts/TexGyre/texgyreadventor-regular-webfont.woff') format('woff'),
url('../fonts/TexGyre/texgyreadventor-regular.otf') format('opentype');
}
#font-face {
font-family: 'TeX Gyre Adventor';
font-style: normal;
font-weight: 700;
src: url('../fonts/TexGyre/texgyreadventor-bold-webfont.woff2') format('woff2'),
url('../fonts/TexGyre/texgyreadventor-bold-webfont.woff') format('woff'),
url('../fonts/TexGyre/texgyreadventor-bold.otf') format('opentype');
}
So I am triggering my main function nowDoOtherStuff() off the active event hook, so according to my understanding by this point all the requested fonts should be available and ready... that's the point of Web Font Loader?
I put a delay of 2500ms so that it's clear in the Network tab what resources have actually been fetched when the active event fires, and what I see is:
Firstly, I'm not even requesting texgyreadventor-regular-webfont.woff2 so why is it being fetched at all?
Secondly, and most importantly, why is texgyreadventor-bold-webfont.woff2 (i.e. the font I requested) not actually fetched and ready when the active event fires? It's clear from the waterfall timing (and the artificial 2500ms delay) that the bold variant is only fetched after the active fires.
Why is Web Font Loader prioritizing the fetching of a font I didn't even ask for, and not fetching the font I actually want? This is causing issues with how the subsequent code lays out the content.
BTW this issue is solved by using a preload (which I have only more recently discovered) in the <head> as follows:
<link rel="preload" href="./fonts/TexGyre/texgyreadventor-bold-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
However, I would like to get the Web Font Loader approach working, without having to use preload... I thought that the Web Font Loader was already meant to be implementing a preload functionality?
Related
I've implemented a custom font for CKEditor and although it is showing in the dropdown list it does not apply to the element. I cannot find the cause of why my CSS file isn't loading which is the cause of not applying the new font.
So, on my configuration default.js file I added the below lines of code:
config.font_names = 'Belluga Solid/Belluga_Solid;' + config.font_names;
config.contentsCss = "../fonts.css";
And then created a new fonts.css file:
#font-face {
font-family: "Belluga Solid";
src: local("Belluga Solid"), url("/MyFonts/Beluga/Belluga_Solid.eot") format("embedded-opentype"); /*non-IE*/
src: url("/MyFonts//Beluga/Belluga_Solid.ttf") format("truetype"); /*non-IE*/
src: url("/MyFonts//Beluga/Belluga_Solid.svg") format("svg"); /*non-IE*/
}
Looking at the source code, it correctly applies fine:
<p><span style="font-family:belluga_solid;">Lorem Ipsum</span></p>
It seems pretty straightforward to do. Looking at this tutorial the author got it all right: https://www.youtube.com/watch?v=knkFOuKPsKQ
I implemented the same solution but having a hard time figuring out how to solve the issue.
It's probably because the value of the font-family property in the element's styling doesn't match the value defined in the #font-face rule. The #font-face rule defined it as Belluga Solid, but your inline style sets the value to belluga_solid.
You can try modifying the #font-face rule so that it says this instead:
#font-face {
font-family: "belluga_solid";
}
That way, they will match and your font should hopefully display correctly.
I have a Polymer 2 app with an explicit --paper-font-common-base specified before loading any of the components:
--paper-font-common-base: {
font-family: 'Comic Sans';
/* Not really, nobody's that evil, but problem is there for any font */
};
Then, at some point when loading Polymer components, for instance paper-dialog, will import typography.html
<link rel="import" href="../paper-styles/typography.html">
In turn typography.html imports Roboto and overrides the mixin:
<link rel="import" href="../font-roboto/roboto.html">
...
<custom-style>
<style is="custom-style">
html {
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
};
This overrides the font face I've specified, but also goes and downloads Roboto from Google's CDN, which I explicitly do not want it to.
Other Polymer components, for instance paper-radio-button take a different approach:
/*
This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
*/
How do I set --paper-font-common-base so that Polymer components use the same font as the rest of my application?
Looks to me like <custom-style> is loading directly into your <head> tags as it's wrapped in <script> tags.
To over ride this behaviour you'd need to add your script higher up in the <head> tags also.
One way to get around this is to make your own font-roboto dependency with an empty roboto.html file. Then in your bower.json you would force your dependency to be the resolution to the font-roboto conflict.
I'd suggest to
Fork <paper-dialog>, and remove the import of typography.html
Load your own copy of <paper-dialog>
File a ticket, or a pull request, for <paper-dialog>
If your change is officially accepted, load the official <paper-dialog>, again.
If you want this font to work on the entire web app, is your
--paper-font-common-base: {
font-family: 'Comic Sans';
};
declared into a custom-style element ?
If not try that :
<custom-style>
<style>
html {
--paper-font-common-base: {
font-family: 'Comic Sans';
};
}
</style>
</custom-style>
And if you add that into you root element, it should be applied in all the child elements except if some custom components override their own font.
Edit :
There is a plunker example.
In .bowerrc add this:
{
"scripts": {
"postinstall": "node -e \"require('fs').writeFileSync('bower_components/font-roboto/roboto.html', '')\""
}
}
It will make roboto.html as an empty file without any error requests after build.
I want to load a font in my CSS and/or HTML code. I need two fonts(bigsmalls-bold and lft-etica-web) but I don't find how download the font. I only I find a javascript code in
https://typekit.com
This javascript code I have to add in head of my html code.
I did it, but don't change my fonts. Could someone help me please?
Thank you so much
Try using #font-face { url } in your css file. Uploading the font
Like this :
#font-face
{
font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot');
}
The .eot is for IE9
hai you have two options
1st one google font
2nd one CustomFonts
#font-face {
font-family: "MyCustomFonts";
src: local("MyCustomFonts"), url("../fonts/ArialNarrow.ttf") format("truetype");
}
try this
Typekit explains on there site how to install a font. Login, goto the kit editor and click [ embed code]
<script src="//use.typekit.net/YOUR_CODE_GOES_HERE.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
After you've done that:
If you want to use Typekit in your CSS, click the “Using fonts in
CSS” link in the selectors area of your kit to reveal the appropriate
font-family names to use. Once you’ve included the Typekit embed code
in the of your documents, you can add these font-family names
to the CSS rules in your own stylesheet:
h1 { font-family: "proxima-nova", sans-serif; }
http://help.typekit.com/customer/portal/articles/6859-working-with-css-selectors
Using the font-family Names in Your CSS
I'm thinking about a script that can change a webpage's font appearance from Arial to some other font face of my choice.
How should I go about doing that?
I understand: * { font-family: "SomeFont"; }
But this won't achieve the objective to only target Arial text.
I can use jQuery or Javascript, whichever is more efficient and fast.
Edit: Seems like people have difficulty understanding the question. So I'll explain some more, I just want the Arial text on the webpage, if it exists, to change in appearance.
I was going to suggest looping through the styleSheets array and, for each style sheet, loop through the rules, find the ones defining Arial as the font, and change that to the other font you want. That way you wouldn't have to visit every element on the page.
The problem with that suggestion, though, is inline styles on elements.
So I hate to say, to do this you'll have to visit every element on the page. For most pages, that won't be a problem, but your mileage may vary.
Here's how you'd do it with jQuery:
$("*").each(function() {
var $this = $(this);
if ($this.css("font-family").toLowerCase().indexOf("arial") !== -1) {
$this.css("font-family", "SomeOtherFont");
}
});
Can't say I like it, though. :-) You can avoid building the massive list ($("*") builds a jQuery object containing all of the page elements, which can be quite large) at the outset if you do a recursive walk instead, e.g.:
$(document.body).children().each(updateFont);
function updateFont() {
var $this = $(this);
if ($this.css("font-family").toLowerCase().indexOf("arial") !== -1) {
$this.css("font-family", "SomeOtherFont");
}
$this.children().each(updateFont);
}
That may be preferable, you'd have to profile it.
Doing it without jQuery would involve recursively looping through the childNodes of each element and using either getComputedStyle (most browsers) or currentStyle (IE) to get the font information, then (if necessary) assigning to element.style.fontFamily.
Actually, a "both and" solution would probably be best. First, update the stylesheets, and then walk the tree to catch any inline styles. That way, presumably you'll get most of them by changing the stylesheets, which avoid the ugliness of the piecemeal update. Also, you don't have to use css() (jQuery) or getComputedStyle / currentStyle (without jQuery), you can just check element.style.fontFamily, so it would be more efficient.
Beware that IE's stylesheet object uses an array called rules, others use cssRules, but other than that they are largely the same.
It is possible to change only Arial using #font-face.
First link to a css:
<link rel="stylesheet" href="/css/fonts/luxi-Sans-fontfacekit/stylesheet.css" type="text/css" charset="utf-8" />
Then in your css refine what Arial is:
#font-face {
font-family: 'Arial';
src: url('luxisr-webfont.eot');
src: url('luxisr-webfont.eot?#iefix') format('embedded-opentype'),
url('luxisr-webfont.woff') format('woff'),
url('luxisr-webfont.ttf') format('truetype'),
url('luxisr-webfont.svg#LuxiSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Arial';
src: url('luxisb-webfont.eot');
src: url('luxisb-webfont.eot?#iefix') format('embedded-opentype'),
url('luxisb-webfont.woff') format('woff'),
url('luxisb-webfont.ttf') format('truetype'),
url('luxisb-webfont.svg#LuxiSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
Only Arial is changed (in my example to Luxi Sans). All other fonts remain as usual.
I have a web page which uses a non-web-safe font (#font-face...) for a header.
This is going to look pretty bad if the viewer's browser does not support this, so is there a way to detect this capability and replace the text with an image if it is not supported?
#font-face {
font-family: 'awesomefont';
src: url('fonts/awesomefont-webfont.eot');
src: url('fonts/awesomefont-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/awesomefont-webfont.woff') format('woff'),
url('fonts/awesomefont-webfont.ttf') format('truetype'),
url('fonts/awesomefont-webfont.svg#awesomefont') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'awesomefont'; /* Substitute with image if font not supported */
}
p {
font-family: 'awesomefont', Arial, sans-serif; /* main body text can use alternative font */
}
#font-face {
font-family: 'Nosifer Caps';
font-style: normal;
font-weight: 400;
src: local('Nosifer Caps Regular'), local('NosiferCaps-Regular'), url('http://themes.googleusercontent.com/static/fonts/nosifercaps/v1/5Vh3eVJZ2pCbwAqfFmh1F3hCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
p {
font-family: 'Nosifer Caps', cursive; // is this not the point of defining a websafe font after your non-websafe-font????
}
or do you want to ALWAYS have said font for your header.. in which case I wouldn't even go through the hassle of dealing with custom fonts. Just create your image and use that 100% of the time. The overhead of loading an entire font lib for one header image is just silly.
I'm not sure if there is a way to do what you're asking. But I generally use cufon for using custom fonts on my websites. It uses canvas to create an image from the text. If a browser does not support javascript, it simply displays the raw text
http://cufon.shoqolate.com/generate/
One option is to use one of the JS libraries which measure the width of the string to detect if the font is available. Unfortunately, functionality is not available in JS to do what you want directly.
Here are some implementations which use the string measurement technique:
http://derek1906.site50.net/works/jfont.php
http://www.lalit.org/lab/javascript-css-font-detect/