I just installed the fonts Aller Regular and Aller bold on my site via #font-face (generated by fontsquirrel.com).
Here is the CSS:
#font-face {
font-family: 'AllerRegular';
src: url('library/fonts/aller_rg-webfont.eot');
src: url('library/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/aller_rg-webfont.woff') format('woff'),
url('library/fonts/aller_rg-webfont.ttf') format('truetype'),
url('library/fonts/aller_rg-webfont.svg#AllerRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'AllerBold';
src: url('aller_bd-webfont.eot');
src: url('library/fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/aller_bd-webfont.woff') format('woff'),
url('library/fonts/aller_bd-webfont.ttf') format('truetype'),
url('library/fonts/aller_bd-webfont.svg#AllerBold') format('svg');
font-weight: normal;
font-style: normal;
}
This is working fine when I use ether of the fonts in firefox, however when I use IE8 the webpage crashes attempts to reopen and crashes again. A live example can be found at http://rcnhca.org.uk/sites/first_steps/
Does anyone know what's causing this madness?
I had the same problem a while ago, and after some debugging I found that the crash was because of the #font-face (which in my case was included as a separate stylesheet called fonts.css) was rendered inside <head>. IE8 has a problem with this, but works just fine when I moved the rendering to just inside <body>.
Try this:
<head>
<!--[if gt IE 8]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--><![endif]-->
</head>
<body>
<!--[if IE 8]>
<link href="fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
<!-- The rest of your page here -->
</body>
This renders the fonts stylesheet within your head if the browser is newer than IE8. If the browser is IE8, it renders it just inside your body.
Note: You may have to adjust the conditional comments if you're supporting IE7 or older.
IE8 seems to prefer double quotes. This fixed unstyled text on first load for me, might fix crashes for you.
Kudos to the guy here, which solved my problem: #font-face not embedding in IE8 and under
I had similiar issure developing page with custom fonts. IE8 crashed. I fixed it by placing IE8 font-face declaration BEFORE any other font-face declarations. I.E:
<!-- Custom .eot fonts for IE8 -->
<!-- IE8 fonts should load before other font-face declarations to avoid IE8 crash -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="/pub/stylesheets/fonts-ie8.css" />
<![endif]-->
<!-- Custom .woff fonts -->
<link href="/pub/stylesheets/fonts.css" rel="stylesheet">
Related
There are countless of guides on preloading fonts properly and none of which seems to work on both Firefox and Chrome.
I use:
<link rel="preload" href="URL" as="font" type="font/woff2" crossorigin="anonymous">
But receive this on Firefox:
The resource at “file.woff2” preloaded with link preload was not used
within a few seconds. Make sure all attributes of the preload tag are
set correctly.
Which attribute is missing, and what is the proper way of preloading fonts that works on all modern browsers?
The font is loaded via style.css:
#font-face {
font-family: 'NAME';
src: url('URL to file.eot');
src: url('URL to file.eot?#iefix') format('embedded-opentype'),
url('URL to file.woff2') format('woff2'),
url('URL to file.woff') format('woff'),
url('URL to file.ttf') format('truetype'),
url('URL to file.svg#NAME') format('svg');
font-display: swap;
}
The following sample I have made is working for each of the latest browsers which I am currently using:
Firefox
98.0.1 (64-bit) is up to date
Microsoft Edge
Version 99.0.1150.39 (Official Build) (64-bit)
Chrome is up to date
Version 99.0.4844.51 (Official Build) (64-bit))
I have tested so many ways to do this, the main reason I have a font to that error is that when you don't use that preloaded font properly, I will provide the sample I have worked with below so you can test it. I have removed the properties including font style, font-weight, font-display, local, and one single URL source, the final reason is you don't use that font properly.
So, check whether you are using that font. Perhaps the font name is incorrect? and Finlay if your web browser is up to date and compatible with preload feature.
See these two links for more info, browser_compatibility and CSS_Font_Loading_API.
The scenarios I have started with was to load 2 different way the local (I have downloaded the entire font for browser compatibility) and remote (a single woff2 font file) both worked for me.
/*
I have downloaded this entire font local and works great for me...
*/
#font-face {
font-family: 'Syne Mono';
font-style: normal;
font-weight: 400;
src: url('font/syne-mono-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('font/syne-mono-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/syne-mono-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('font/syne-mono-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('font/syne-mono-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('font/syne-mono-v13-latin-regular.svg#SyneMono') format('svg'); /* Legacy iOS */
font-display: swap;
}
#font-face {
font-family: 'FontAwesome';
font-style: normal;
font-weight: 400;
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2');
url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2') format('woff2'),
font-display: swap;
}
#container {
/*
IF YOU DON'T USE THE PRE-LOAD THE Browser shows you an error
The resource at “file.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
Try to comment on this and test it just like me.
*/
font-family: 'Syne Mono';
}
#container2 {
font-family: 'FontAwesome';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StackSolutions - Font Preload</title>
<link rel="preload" href="font/syne-mono-v13-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container" >
<h2>This is a Syne Mono font</h2>
</div>
<div id="container2">
<h2>This is a FontAwesome font</h2>
</div>
<div id="container3">
<h2>This is not using preload</h2>
</div>
</body>
</html>
Final result:
It's just warning, all you need to do is try import the file right after the preload
<link rel="preload" href="/public/font/regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="/public/font/regular.woff2" type="font/woff2"/>
I have a web page that is using an icon font. This web page works fine in Chrome, Firefox, and Safari. It works fine in Edge and IE 11. However, I need to support IE 8, 9, and 10 as well. My problem is, that in IE 8, 9, and maybe 10, the icons don't appear. You can see the problem with this Bootply. In it, I have the following code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<div class="container">
<ul class="list-inline">
<li><span class="material-icons">alarm_on</span></li>
<li><span class="material-icons">alarm_off</span></li>
</ul>
</div>
What makes this confusing is that I don't see any errors. I'm not sure what's wrong. I've also copied the font files locally from here. I've added the font files to my app in a folder called /resources/fonts. In my application's css file, I've added the following at the top:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('/resources/fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
src: local('/resources/fonts/Material Icons'),
local('/resources/fonts/MaterialIcons-Regular'),
url(/resources/fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(/resources/fonts/MaterialIcons-Regular.woff) format('woff'),
url(/resources/fonts/MaterialIcons-Regular.ttf) format('truetype');
}
While this works in Chrome, Firefox, and Safari, it still doesn't work in IE 8 or 9. What's wrong?
You should use different HTML for IE9 and lower. You can find it on the material icons website here for alarm_on and here for alarm_off.
So it should be:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<div class="container">
<ul class="list-inline">
<li><span class="material-icons"></span></li>
<li><span class="material-icons"></span></li>
</ul>
</div>
The font is supported in IE, but only IE versions 10 and for lower, you can use hexadecimal encoding.
Here it's example and it's work perfectly in IE9.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<i class="material-icons"></i>
<i class="material-icons"></i>
For more details you can check here
I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder.
In my XHTML i mentioned the CSS Path,
'<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />'
AND my CSS file have styles like,
#font-face {
font-family:roboto-bold;
src: url('../fonts/Roboto-Bold.tff') #ttf;
}
.UX_FontClass {
font-family: roboto-bolditalic !important;
font-size : 25px !important;
}
also mentioned XHTML in OutputText as styleClass="UX_FontClass "
Even though font is not working in any browser. What i did wrong with my code? OR Anything i missed out?
You should use google fonts, its really easy to use.
https://www.google.com/fonts#UsePlace:use/Collection:Robot
example
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Hello World</p>
</body>
You are using custom font so you need to add a few font type format as well; like ttf, eot and svg for iphone, ipad devices.
Note: Some browsers supports different font type that's why you need
ttf,svg or eot.
#font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
Remember after that you need to add this code in class UX_FontClass
.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }
The error is in defining a font named roboto-bold in the #font-face clause, but trying to use a font named roboto-bolditalic later on. That is not the same family!
Solution: make sure the names match.
You probably meant
font-family:'roboto-bold'; font-style:italic;
or, since you're defining the size too, you could use the font shorthand
font:italic 25px 'roboto-bold';
And there's no need for the !important.
Why not use Google fonts?
Place in the header of your html:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500italic,500,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
Use in your css:
font-family: 'Roboto', sans-serif;
its really easy to use in css.
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);
http://i.stack.imgur.com/zl3iE.png
Can anyone tell me why this pixel web-font is becoming blurred in Firefox? I'm using #font-face to render it using CSS. The font-size is 8px, which is identical to 50%, and it renders perfectly in Chrome; no blurry artifacts. But in Firefox, every other word is blurry.
EDIT: Here is the relevant code snippet:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<style type="text/css">
#font-face {
font-family: 'pokemon_rbyregular';
src: url('pokemon_rby-webfont.eot');
src: url('pokemon_rby-webfont.eot?#iefix') format('embedded-opentype'),
url('pokemon_rby-webfont.woff') format('woff'), url('pokemon_rby-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size: 8px;
text-rendering: optimizeSpeed;
}
This works in every other browser except Firefox (incl. Opera, IE8, and Chrome). I am just wondering if there is some sort of CSS text-rendering setting I could implement that would fix this. I have a feeling it is related to how Firefox implements spacing, as it is only every other word. If I have a long paragraph of jumbled letters, they're all rendered perfectly until I put some spaces in-between them.
I never see Computer Modern font, the one shipped as default for LaTeX type setting system, on any webpage.
How to change the CSS so that font will actually work?
Using the Computer Modern font in webpages has become very easy! Just paste the following lines of CSS code in the head section of your html code in order to activate the sans-serif version of that font.
<style type="text/css">
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf');
}
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsx.otf');
font-weight: bold;
}
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsi.otf');
font-style: italic, oblique;
}
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbxo.otf');
font-weight: bold;
font-style: italic, oblique;
}
body {
font-family: "Computer Modern", sans-serif;
}
</style>
Note that the solution here makes the browser load the current version of the fonts from a CTAN mirror, which can be very slow. This is okay for testing purposes, but in the long run I'd recommend you download these .otf files to your own webserver.
You can just insert the https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css css-stylesheet into your html header. Like this:
<head>
<!-- ... -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css">
<style>
body {
font-family: "Computer Modern Sans", sans-serif;
}
</style>
</head>
You can use the font for production websites with any amount of traffic. Files are served via MaxCDN's super fast global CDN. There is no traffic limits or throttling.
The README.md on Github
Just for anyone in 2020 and onwards still looking for the optimised web fonts rather than the larger .otf fonts which are used in the answers above, I've hosted the Computer Modern font family via the jsDelivr CDN.
To use it, you can add a <link> to your html <head> which requests the optimised fonts through the following address:
https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css
Example Code:
<head>
<!-- Other imports... -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css">
<style>
body {
font-family: "Computer Modern Serif", serif;
}
</style>
</head>
Check out the documentation here
Nowadays you can download everything you need (font files and css) from this webpage:
http://checkmyworking.com/cm-web-fonts/
Then the only thing you need to do is to add the corresponding css files to the header section of your html file like:
<head>
<meta charset="UTF-8" />
<title>Test</title>
<!-- Computer Modern Serif-->
<link rel="stylesheet" href="fonts/Serif/cmun-serif.css"></link>
...
</head>
you cannot, up until CSS 2.1 you can only use the fonts that are ACTUALLY installed on the client's computer. In CSS 3 there are some ways to embed fonts in your webpage but those ways are not greatly supported by browsers yet.
Have a look here: http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm
#font-face {
font-family: "Computer Modern ";
src: url(ace.ttf);
}
.cm {
font-family: "Computer Modern";
}
You do need to have a ttf file for that font.