I'm trying to develop a site for customer - and I encountered a weird thing - my fonts are, so to speak, blinking. To be more precise - not always - but mostly when I go t another subpage - before page display's custom fonts on headers, we can see default font for just split of a second. That creates unwanted effect.
I'm using Bulma, recompiled from scss of the newest version, and font called Museo Sans - which I serve from my server (not from Google). When I run GtMetric there is no latency in font reading and I also use a fade in script which helps a bit with the described effect, but still it's visible. Also the site is relatively small, so no latency due to number of requests or script's size.
My guess is that it may have something to do with the order of my css. I start with font-face declaration loading fonts, then I go to basic mixins and reset. I tried many things but no results. I have to add that it's not the first site I did with that particular setup - wordpress, bulma, scss.
The site's dev version is here:
https://protonads.mediamachina.net/
css here:
https://protonads.mediamachina.net/wp-content/themes/proton/proton.css
Thank you in advanced for any suggestions.
After a bit of reading the internet's sources I got the answer. So including fonts, from external source or local, with font-display: swap; will have two results - FOUT - because we're swapping fonts after it has been downloaded by the browser, second - a bit slower loading time, as we're letting he site to block rendering until he font is loaded.
So unfortunately no good option is available. Or at least no good option was I able to find.
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(''),
url('inter-v2-latin-ext_latin-regular.woff2') format('woff2'),
url('inter-v2-latin-ext_latin-regular.woff') format('woff');
}
Related
Sorry for the long post, but you need some background info before my question since this is a strange setup and it's quite complex.
I have two fonts that's needs to be in a newletter.
First font, Cyclone, is in a format OTF.
The second, Albert, is format EOT and WOFF.
We have a system that send the newsletters for us, i only need to upload a html file to that system, that contains the structure, images and newsletter content, and upload images that needs to be in the newsletter.
After that i can preview it by sending it to my self.
First, i can't upload fonts or anything else to the newsletter
system besides images and html.
Second, i have uploaded both fonts, and the css to our webiste's media
folder(public folder) where we also load images to the website.
Third, i or anyone else, have no access to the .htaccess file, and we
will never get it, since the site is hosted somewhere, and to get
that fixed for cross-domain for newsletters is to big of a task for
such a small job.
In the newsletter i am loading the font like this:
#import url(xxx.com/media/fonts/albert.css);
and the CSS looks like this:
#font-face {
font-family: Albert;
src: url("fsalbertwebregular.woff") format("woff");
}
have also tried this setup in the css:
#font-face {
font-family: 'Albert';
src: url('FSAlbertWeb-Regular.eot'); /* IE9 */
src: url('FSAlbertWeb-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FSAlbertWeb-Regular.woff') format('woff'); /* Modern Browsers */
font-weight: normal;
font-style: normal;
}
And then use the font on the body:
body{
font-family: 'Albert', times new roman;
}
But doing this, i am getting this error/warning:
CORS-headeren 'Access-Control-Allow-Origin'
The funny thing is, when i used the Cyclone.otf font, it worked fine.
When i use the albert.eot or albert.woff, it's not working.
I then tried to convert the woff to otf, and use that, didn't work - same error/warning.
The setup might sounds strange, and is sure is, i have tried to draw how the setup is, so hope it makes a bit more sense.
Can anyone help me with this, what needs to be done without editing the .htaccess file. And why does Cyclone.otf work and not the others, even after converting them to otf?
Special fonts wont work in emails. You have to still use the basic web fonts like arial.
If it worked for you on one machine it may mean that you have that font installed. Try testing it on another machine and see what results you get. Also it can be worth testing your email code through a system like email on acid to see how it reacts and breaks to different email systems such as gmail or outlook.
Here is a guide to email fonts: http://templates.mailchimp.com/design/typography/
I am currently running a Magento Store through Cloudflare and I have been experiancing duplicate orders which some stack overflow users have suggested is due to Cloudflare. In order to test this, while still using my Cloudflare subscription to some extent, I decided to create CName Records (eg: cdn1.mydomain.com) for my Media, Skin and JS files and have cloudflare only serve these resources.
It seems to be going well except I am getting strange behavour with FireFox browsers.
My styles get linked to the page correctly with the following code:
<link rel="stylesheet" type="text/css" href="http://cdn1.mydomain.com.au/skin/frontend/theme/default/css/styles.css">
In my style sheet I link to my font packs with the following code (from IcoMoon):
/* BEGIN Install Custom Icons from IcoMoon */
#font-face {
font-family: 'icons';
src:url('../fonts/icons-v8.eot');
src:url('../fonts/icons-v8.eot?#iefix') format('embedded-opentype'),
url('../fonts/icons-v8.svg#icons') format('svg'),
url('../fonts/icons-v8.woff') format('woff'),
url('../fonts/icons-v8.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This all works perfectly fine with cloudflare enabled on my root domain and when it is disabled, however, when I turn it on for cdn1.mydomain.com.au, my icons in FireFox no longer load. They do however load in Chrome with no problems.
When looking at the net tab in fire bug, I can see that Fire Fox is indeed finding and downloading the font pack as it responds with a Success Header(200 OK).
Is there anything I am missing as to why FireFox would struggle with showing the font pack?
This might be an issue with something like Rocket Loader. Does turning off that feature in your performance settings - if on - fix the issue?
The fact that issue is in one browser and not the other suggests to me an optional performance feature possibly impacting something).
I have been trying to get the ttf files rendered in Chrome and Firefox but it just doesn't seem to work. While rendering the .woff file is working fine.
I downloaded the collection from http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher and then renamed the Philosopher-Regular.ttf to fancyfont.ttf and then tried:
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
But the font just doesnt seem to add on to the webpage. However if i rename the woff file to fancyfont.woff and try :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
then it all works fine for Chrome and Firefox.
Any solutions to this problem as i have seen the ttf files being rendered onto the browser?
Do not download a TTF from the Google Font API website. It is not intended for you to download the fonts. Instead, you link to a stylesheet which contains #font-face definitions for the font(s) you want to use.
<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
(Do not include multiple <link>s if you want several fonts; instead, use the tool to add all the fonts you want in your page to a collection, and it will generate the appropriate <link> tag.)
Letting Google host the fonts is just like using a well-known CDN for jQuery: there's a good chance that a significant portion of your users will already have the font cached before they even come to your site (by virtue of the fact that they may have browsed other sites that used the same font).
Note that the CSS you link to from the API is actually generated for each individual request by Google's server, tailoring it to the user's browser. Based on the user agent, the most appropriate formats (WOFF, EOT, TTF, etc) are selected and only those are listed in the stylesheet.
Because formats like WOFF are much more efficient size-wise than TTF, most browsers will never see a TTF version. Don't worry though – your font will be rendered correctly in all browsers.
I had some issues rendering a TTF font inside Chrome. convert it into Woff solved it. There is some good onlines services for that. You can find them easily. Also, the size of my font got smaller : 29 Ko to 6 Ko, I don't see anymore reasons to use TTF
Actually the issue was that the TTF files can not be renamed or that they should not be renamed. As I did the same they were not being rendered by the browser. While the renaming of the WOFF is just fine as they are compressed files.
The issue was definitely renaming as when i used the Philosopher-Regular.ttf in font face as :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/Philosopher-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
it worked just fine.
I am trying to use custom fonts on my website and in the css I have the following code:
#font-face {
font-family: 'Sketch';
src: url('../fonts/Sketch.eot');
src: url('../fonts/Sketch.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
ul#holder {font-family:'Sketch'}
The fonts do appear as they have to in Firefox. In chrome, the font do not seem to be rendering smoothly and do not appear as good as in firefox (Should I drop the idea of using fonts in my sidebar and use images which would show the smooth text instead? ;-/)
In IE, the fonts are not appearing at all. What should be done to get proper smoothening of these fonts in Chrome and get these working in IE?
Different browsers supports different font formats:
So you need to create your font in all formats. You can use Font Squirrel (thank you, effectica).
And then, you can import them like that:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
That's not the only possible way. You can find more complete information on this question at Paul Irish's blog.
And, anyway, their appearance may differ a little in different browsers.
All the main browsers have slightly different font rendering engines / techniques and they have different quality of rendering output. So your fonts are unlikely to be 'pixel perfect' between the various browsers and some quality differences will appear. Which one ends up looking the best depends on the font. I have a glyph font that looks great on Chrome and IE but looks a little washed out in Firefox...
Anyway, there is a little hack that you helps you to get fonts to work on IE, see the second src line. This is needed because whilst adding extra font formats ensures support for every browser, unfortunately it causes problems in versions of IE before IE9. Those older browsers see everything between the first url(' and the last ') as a single URL request, so will fail to load the font. This hack tricks the browser into thinking that the rest of the src property are arguments of that query string, so it goes looking for the correct URL and loads the font:
#font-face {
font-family: 'Sketch';
src: url('../fonts/SketchRockwell.eot');
src: url('../fonts/SketchRockwell.eot?#iefix') format('embedded-opentype'),
url('../fonts/SketchRockwell.woff') format('woff'),
url('../fonts/SketchRockwell.ttf') format('truetype'),
url('../fonts/SketchRockwell.svg#countersoftfontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The above came from Font Squirrel’s #font-face Kit Generator which can be accessed at http://www.fontsquirrel.com/fontface/generator. There you can upload your font and convert it to whichever formats you wish. You can also control the CSS syntax it outputs, subset the characters to reduce file size, and use more options to fine-tune the fonts
Also if you are going to use Bold or Italic on you text then you need to include version of the rule that change the font-weight and font-style accordingly for each combination, so the browser knows what font to use when it encounters a CSS rule with bold in it.
Each font typically has a design purpose and was created for a specific job. Most commercial fonts were not designed to be viewed at small sizes on a screen, so in many cases it makes the most sense to reserve these #font-face for headings and continue to use web-safe fonts like Georgia and Lucida for body copy.
Another aspect of fonts that can affect legibility is how they are anti-aliased and hinted. Right now, web fonts are generally more jagged around the edges than traditional fonts, even when anti-aliased, usually because most were not designed to be viewed on screen. Higher quality fonts, as well as fonts that were designed for the web, have better hinting,
Here is a great URL for creating embeddable font packs:
http://fontface.codeandmore.com/
Upload your TTF or OTF font and it creates the entire font kit for you, complete with
implementation HTML and CSS examples.
Cheers!
Edward said it all. Chrome used to drive me insane for the way it displayed certain fonts.
If you have the font file you can use font squirrel to generate the code as well as all font files that you need for all browsers.
Present I see lot of web sites use true type fonts. I want to to know how to use true type fonts in our applications and does it affect the load time of the pages ?
HTML5 allows to use TTF fonts in your CSS:
#font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
To use it:
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
Check more information in html5rocks.
I want to update the accepted answer due to a significant passage of time. The following is what Font Squirrel outputs under their recommended 'Optimal' setting. Supporting .ttf at this point is no longer important and should be ignored.
font-family: 'Tagesschrift';
src: url('tagesschrift.woff2') format('woff2'),
url('tagesschrift.woff') format('woff');
font-weight: normal;
font-style: normal;
You use Font Embedding.
It will affect the overall load time of the page as the font data has to be downloaded as well as the other content, styles etc. However, it will be cached so only impacts on the first view of the page.
Font embedding can be a bit complicated due to browser compatibility issues. For example, Safari only supports SVG fonts. IE only supports .eot, which must first be converted from .ttf
I have found the easiest way to use custom fonts is with Google Fonts
Besides having the free google font directory to choose from, there are a few providers that provide a much wider selection of fonts for free and to purchase.