i'm working on a website and currently using the #font-face tehnique (this + this) to load the fonts.
I noticed that some of the special characters are not loading properly -> ŠĐŽČĆ šđžčć.
This is, those characters exist in the font itself.
So, i made a test...
I loaded up a test page with #font-face fonts and cufon fonts...
The result is below ->
and of course, here is the code ->
<html>
<head>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="ReprobateCRO_400.font.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<script type="text/javascript">Cufon.set('fontFamily', 'ReprobateCRO').replace('h1');</script>
<style type="text/css">
#font-face {
font-family: 'ReprobateCROLASTRegular';
src: url('reprob_cro_last_last-webfont.eot');
src: local('ReprobateCROLASTRegular'),
url('reprob_cro_last_last-webfont.eot?#iefix') format('embedded-opentype'),
url('reprob_cro_last_last-webfont.woff') format('woff'),
url('reprob_cro_last_last-webfont.ttf') format('truetype'),
url('reprob_cro_last_last-webfont.svg#ReprobateCROLASTRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h2{
font-family:ReprobateCROLASTRegular;
}
</style>
</head>
<body>
<h1>--> CUFON --> šđžčć ŠĐŽČĆ</h1>
<br/><br/>
<h2>--> #FONT-FACE --> šđžčć ŠĐŽČĆ</h2>
</body>
</html>
So far i've tryed switching the encoding from utf8, widnwos1250, and nothing seems to work with the #font-face tehnique...
So, i have two questions... Does anybody know what's going on here? And, if i switch to using cufon insted of #font-face - how much would that slow down the page loading? (concidering cufon uses JS to load the fonts)
Thank you for your time!
I myself had a lot of issues with #font-face recently while I was working on a web-font intensive web site and it turned out that the online web-font generating tools themselves were the guilty ones. They simply generated bad .woff / .ttf /.svg /.otf files which resulted in a lot of issues for which it was very hard to pinpoint the source of the problem.
In my experience the only online web-font generating service that provides 100% valid - issue free web-fonts is Font Squirrel. It also allows a lot of useful stuff such as font subsetting which might also be the problem in your case (i.e. you didn't specify to include additional characters in your generated web-fonts - Serbian / Croatian is part of Latin Extended B if I am not mistaking).
Have you tried it with http://fontface.codeandmore.com/ an alternative #font-face generator?.
The H2 has the wrong font definition: the single quotes are missing.
It is now:
font-family:ReprobateCROLASTRegular;
Should be:
font-family:'ReprobateCROLASTRegular';
You seem to have worked out the font issue; re: load times, my experience is that both font-face and cufon will potentially be slow enough to have a brief flash of default text. It depends on your host and the user's connection of course; but both methods require a relatively heavy download (either the JS or the font).
So, all else being equal IMHO you may as well use font-face; at least browsers are getting better at caching the font file so after the initial page load you can get faster rendering. With cufon it always has to load and execute the JS so you'll never get rid of that part of the load time.
You implementation is good.
But when you used font-face. The font that you used. Must have all the characters that you want use. The .ttf or what ever must have all the characters and special characters when you will used it.
When you used Cufon. The Cufon generator make a lot of extra font letters for you. In the font generator of Cufon. You can select a lot of extra's for the font.
Do you understand it??
Related
I'm using Heebo Google fonts and commas and apostrophes appearing strangely in my HTML. As far as I know it only appears on desktop and not mobile.
Heebo is imported like this:
<link href="https://fonts.googleapis.com/css?family=Heebo:400,500,700,800|Fira+Sans:600" rel="stylesheet">
https://culturestride.com/
Fixed a few hours ago in the Google Fonts API. No changes need to be made.
I managed to fix this by using the github version. I converted them to the Webfont versions using https://transfonter.org/. I added a font cache (OMGF Wordpress Plugin), disabled Google Fonts (disable google fonts) on my Wordpress, then replaced these fonts (through cpanel). I know this is a temporary fix but it works. Working site: https://littlethiings.com. If someone, else finds a related fix please do update this forum. I created a css format for the font, you can call the included stylesheet and your font should work as intended (remove google font first). Link (scroll to bottom). Thanks!
UPDATE: The rollback has been completed. You can switch back to the google fonts again.
The cheapest solution to the problem
You can include all characters in Heebo font but not the ,
Use this link tag for your font. I have included all characters of keyboard in it but not including those chars who are not working properly. As a result of which , will work in normal way and it does not look ugly.
<link href="https://fonts.googleapis.com/css? family=Heebo:400,500,700,800|Fira+Sans:600&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz?.1234567890[]';.()/\!##$%^&*-=+_{}:|\.ABCDEFGHIJKLMNOPQRSTUVWXYZ*~\>" rel="stylesheet">
I had the same error from today in my website and i guess is a Google Font error.
Basically, what you need to do is to download an old version of the font, for example https://www.fontsquirrel.com/fonts/heebo).
Then call again the font inside your local .css and not anymore through Google Api.
#font-face {
font-family: 'Heebo';
src: url('Heebo-Regular.eot');
src: url('Heebo-Regular.eot?#iefix') format('embedded-opentype'),
url('Heebo-Regular.woff') format('woff'),
url('Heebo-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have a generic css file with all fonts the website is using (local).
Inside i have for example :
#font-face {
font-family: "LemonMilk";
src: url("../fonts/LemonMilk.otf");
}
.....
.LemonMilk{
font-family: "LemonMilk" ;
font-size: 4vh;
}
I have many many of them, but some pages need only few of them, but still i load the whole file for every page :
<head>
....
<link rel="stylesheet" href="../css/style.css"/>
Problem:
Most of my pages will delay loading them and show system fonts for a second or 2.
Tried:
<link rel="preload" as="font" href="/style/some.otf" type="font/otf" crossorigin="anonymous">
which provide a warning message that they where loaded but never used within a few seconds of page loading. But i do use them right away.
Questions:
How to reduce delay?
If i include a css with all fonts, will he load also the ones i dont use?
why preload didn't work ?
when using #font-face in CSS, it is down to browser, how it behaves.
It's good to use external CSS sheet for declaring fonts.
If this doesn't help, you could try making different CSS files with fonts for different subpages. As you mentioned, you don't use all fonts on all subpages, so it may reduce the filesize and consequently load faster.
Once I was working on a project with a lot of fonts and I had similar problem. The best solution then was to base64 encode all of the fonts I used. So by that approach, all of the fonts had to be loaded before HTML was parsed and displayed. Font squirrel's webfont generator found here: https://www.fontsquirrel.com/tools/webfont-generator can be really helpful tool. If you will use it you should click "Expert" and "base64 encode".
Also, for testing and seeing how your load times improve, you can check out Fontloader here: https://github.com/smnh/FontLoader . It detects when fonts of the specified font-families loaded and rendered by the browser so you can see which step is taking the most time.
My HTML website will use the font Open Sans, and I'm wondering what is the best way to load the font while keeping the website really fast?
Using google fonts in the html: <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
Using google fonts in the CSS: #import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
Downloading the font from the serveur in the css:
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
Something else?
Thanks!
2020 Way of Google Font loading.
If you want copy and paste solution, go ahead.
<!-- [STEP #1] -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- [STEP #2] -->
<link rel="preload" as="style" href="FontUrl&display=swap" />
<!-- [STEP #3] -->
<link rel="stylesheet" href="FontUrl&display=swap" media="print" onload="this.media='all'" />
<!-- [STEP #4] -->
<noscript>
<link rel="stylesheet" href="$CSS&display=swap" />
</noscript>
If you wanna know what is happening, here's the steps with a small explanation.
Preconnect to the google font origin. It help pages load faster by
telling the browser what assets it'll need in the future.
Preload font files. This ensures they are available earlier and are
less likely to block the page's render, improving performance.
Remember "display=swap" is important to score on google pagespeed
insight.
Apply css on load function. Ask the browser to load the CSS
asynchronously with the print context but as soon as the CSS file is
loaded then apply it to the all context.
Fallback if Javascript is disabled in the browser.
It really depends on how fast your own server is though. If your server is quite fast, of course I would prefer 3rd method:
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
However, if your server is really quite slow, then the 1st or 2nd method would be faster, as in was my case.
One very effective way of checking which is faster is to go to this website called pingdom. From there, you enter your webpage URL and then it would show how much time it took for each file to download.
You can see all your font files there as well, and how long it took for each one to download. Try using all 3 different method and find out which is the fastest through Pingdom.
The fastest way to do it is not to do it at all ;)
In your case the best options is to load it from google cdn and hoping your users already have it cashed from previous visit of a page using it.
I'd expect the fastest to be loading it from your own server using #font-face because there are less DNS lookups, and your server is probably under less load than Google's.
If you want it to load fastest you can inline the #font-face attribute to the head of your document, however I would recommend leaving it in the stylesheet.
Although, if you're willing to use some javascript, this looks like the fastest way I can find.
Well all the three ways are fine but when it comes to page load the third way will be perfect. As you will keep everything on local and no need to make multiple calls.
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
This is perfect because in first method obviously you are calling fonts from different server it will increase load time and in second method multiple calls will happen so the third way would be perfect.
<html>
<head>
<title> </title>
<body>
<font face="file:///E:/softwares/FONTS/alpha kufi regular.ttf" size="+2"> This is a tester for a font, that may not be installed on the machine </font>
</body>
</head>
</html>
This snippet doesn't show up the sentence in the intended font. What could be the reason for this ?
Note: I am aware that the font tag is not supported by HTML 5 and deprecated by HTML 4.
There are two basic problems here: the HTML face attribute (as well as its CSS counterpart, the font-family property) needs a font family name as value, not a URL of a font file, and a file: URL is inherently system-dependent and may fail to work in many circumstances.
The following works, provided that the font file alpha_kufi_regular.ttf (better avoid spaces in font names, as spaces as such are disallowed in URLs) is placed in the fonts subdirectory of the directoty where you have the CSS file and the browser supports TrueType fonts as “web fonts” (this need not be “web font” usage but could be local; the techniques are the same):
<style>
#font-face {
font-family: AlphaKufi;
src: url('fonts/alpha_kufi_regular.ttf');
}
</style>
<font face="AlphaKufi" size="+2"> This is a tester for a font,
that may not be installed on the machine </font>
Since not all browsers support TrueType fonts as “web fonts”, consider using FontSquirrel #font-face generator if you intend to use the font on a web page.
It is usually better to use CSS rather than HTML for font settings, but that’s a different issue. In theory, “web fonts” need not work with HTML <font face="..."> too (no specification requires that), but in practice they do.
I can't find a reference for it, but my best guess is that you can't access fonts using the file:// protocol (local filesystem). This is certainly true if the page is online or accessed through a local server (http://localhost or equivalent).
Also, there's no reason at all to ever use <font>. It might not work just because browsers don't support it fully anymore.
edit: in fact, I'm not sure <font> has ever supported using a font file instead of a font's name.
The solution for providing a font file is to use CSS's #font-face.
It's because font's face attribute does not take a path to a font file. It takes a comma separated list of font names. The browser searches the system for installed fonts and loads the relevant one from there (if it exists).
If you want to specify your own, you will probably need to use CSS #font-face.
Using Google Web Fonts API to add web fonts to your pages :
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=alpha kufi regular">
<style>
body {
font-family: 'alpha kufi regular';
font-size: 48px;
}
</style>
<title> </title>
<body>
<div>This is a tester for a font, that may not be installed on the machine</div>
</body>
</head>
</html>
~ Reference
I'm building a site on Squarespace, and i'm trying to implement some fonts using the #font-face command. I can get it to work properly in Chrome and Safari, but not in Firefox.
Here is my code...
#font-face {
font-family: "Stagger Medium";
src: url("/storage/fonts/stagger/medium/staggermedium.eot");
src: local("?"),
url("/storage/fonts/stagger/medium/staggermedium.woff") format("woff"),
url("/storage/fonts/stagger/medium/Stagger%20Medium.otf") format("opentype"),
}
Any ideas?
Edit:
I've seen some things mentioning Cross-Site Font Usage using access control headers. Is that a possibility? I'm not entirely sure how to implement that though.
Edit:
I've also read that if you put the fonts in the same directory as the website, then it shouldn't be a problem in Firefox. HOWEVER, i'm using Squarespace, so I can only store the font in the STORAGE directory, which is separate from where the site is located.
I'm sorry, it was actually the opposite, remove the full url:
<link rel="stylesheet"
href="/storage/css/fonts.css" type="text/css" charset="utf-8">
I put both just to be safe.