I'm sorry for the mistakes I've made, I'm not Englishman. I want to find out the difference between these two examples:
//generated by icomoon.io
#font-face {
font-family: icomoon;
src:url('font.eot?-w9xgwa');
src:url('font.eot?#iefix-w9xgwa') format('embedded-opentype'),
url('font.woff?-w9xgwa') format('woff'),
url('font.ttf?-w9xgwa') format('truetype'),
url('font.svg?-w9xgwa#icomoon') format('svg');
}
//generated by my Sass mixin
#font-face {
font-family: icomoon;
src: url('font.eot');
src: url('font.eot?#iefix') format('embedded-opentype'),
url('font.woff') format('woff'),
url('font.ttf') format('truetype'),
url('font.svg#icomoon') format('svg');
}
Both examples work and icons are rendered correctly, but I have some doubts about parameters which are appended at the end of each font's url (eg: font.ext?-blabla or font.ext#blabla). What do they mean?
Do I make mistake when I use incorrect parameters at the end of the url?
The reason of asking question: I want to make SASS mixin, that help me easily include custom fonts generated by different resources (icomoon.io, fontello.com etc).
Icomoon appends query string parameters (everything after the ?, in this case -w9xgwa), to either distinguish the font you were served from others generated, or more likely, to break the cache when your font is updated. Your font when served to users is likely cached (so they don't have to download it each time they view your page). Appending the query string, and changing it will cause the user agent to download it again.
I would recommend hard-coding the css generated by icomoon, and changing it when you update the font. If you don't plan on ever changing it (or needing to break the cache of a user viewing your font), then your probably fine using the mixin generated version.
Related
Visiting a website i have found out the menu links were abnormally bolder than wile watching the same page from my collegue computer with same browser.
Deleting the corresponding font from my windows font folder corrected the difference.
My question is how preventing this possibility when designing css fonts on a website
Most #font-face at-rules begin with a local(name-of-local-file) and then a reference to your distant url(/on/server/teh-webfont.woff).
Browsers will try, in this typical situation, to use the local file and if they find nothing will continue by downloading from your server the distant asset. If they find a local matching font, then they'll use it immediately and will stop their search of a font thus they won't download and use your distant asset.
Conclusion: don't use local() and only keep those url(). It's the contrary of this SO answer
Example without local() and many url() corresponding to many formats. Browsers will download the first one that please them, not 2+ of them:
#font-face {
font-family: 'Gudea';
src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
font-weight: normal;
font-style: normal;
}
Download the font .ttf
Saving the font in a folder in your web site
For call font use this code in css:
#font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}
.example{
font-family: YourFont, sans-serif;
}
Following this SO post, I changed all of my #font-face definitions to look like the following:
#font-face {
font-family: 'Pe-icon-7-stroke';
src:font-url('/assets/Pe-icon-7-stroke.eot?d7yf1v');
src:font-url('/assets/Pe-icon-7-stroke.eot?#iefixd7yf1v') format('embedded-opentype'),
font-url('/assets/Pe-icon-7-stroke.woff?d7yf1v') format('woff'),
font-url('/assets/Pe-icon-7-stroke.ttf?d7yf1v') format('truetype'),
font-url('/assets/Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg');
font-weight: normal;
font-style: normal;
}
Where all of the font files are plassed in /assets/fonts/.
I also changed the file in which the above #font-face is declared from type .css to .scss. The fonts are still loading in development, but when I added the changes to git and pushed to my production site on heroku, the fonts still are not loading.
This may not be indicative of the problem I am having, but when I view my compiled assets on the live site, I see that for the definition of the font, there is written:
font-family:'Pe-icon-7-stroke';
src:url(/assets/Pe-icon-7-stroke.eot?d7yf1v);
as opposed to font-url it uses url (which is maybe how sass is converted into css, but may also mean that the old application.css is loading?)
https://kaf.herokuapp.com/assets/application-490d8d687dc0c9b526bf1348ca9a3a6f.css
For Reference, here is my complete assets directory on Github
https://github.com/ebbnormal/kaf/tree/master/app/assets/
Check out SASS asset helpers, specifically, this part:
Returns a url reference to the asset.
asset-url("rails.png") returns url(/assets/rails.png) As a
convenience, for each of the following asset classes there are
corresponding -path and -url helpers: image, font, video, audio,
javascript, stylesheet.
image-path("rails.png") returns "/assets/rails.png"
image-url("rails.png") returns url(/assets/rails.png)
It looks like you need to remove the /assets part in your font-url.
asset-url($relative-asset-path)
Returns a url reference to the asset.
asset-url("rails.png") returns url(/assets/rails.png)
As a convenience, for each of the following asset classes there are
corresponding -path and -url helpers:
image, font, video, audio,
javascript, stylesheet.
image-path("rails.png") returns "/assets/rails.png"
image-url("rails.png") returns url(/assets/rails.png)
https://github.com/rails/sass-rails
#font-face {
font-family: 'Pe-icon-7-stroke';
src: font-url('Pe-icon-7-stroke.eot?d7yf1v');
src: font-url('Pe-icon-7-stroke.eot?#iefixd7yf1v') format('embedded-opentype'),
font-url('Pe-icon-7-stroke.woff?d7yf1v') format('woff'),
font-url('Pe-icon-7-stroke.ttf?d7yf1v') format('truetype'),
font-url('Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg');
font-weight: normal;
font-style: normal;
}
Although you might want to consider if you really need all those fallback formats today.
https://css-tricks.com/snippets/css/using-font-face/
http://caniuse.com/#feat=woff
All, I found for the same font css of an element , The font shows uppercase in some browser, but lowercase in others. I inspect the element in the firebug . But didn't found any css attributes make it .I don't know which css attribute I should check. Does it have something with the Browser setting ? thanks.
Edit
I use the below way to implement the web fonts in the page. please review it .thanks.
#font-face {
font-family: 'MyWebFontNormal';
src: url('../webfonts/Novecentowide-Normal-webfont.eot');
src: url('../webfonts/Novecentowide-Normal-webfont.eot?iefix') format('embedded-opentype'),
url('../webfonts/Novecentowide-Normal-webfont.ttf') format('truetype'),
url('../webfonts/Novecentowide-Normal-webfont.woff') format('woff'),
url('../webfonts/Novecentowide-Normal-webfont.svg#webfont') format('svg');
}
#font-face {
font-family: 'MyWebFontBold';
src: url('../webfonts/Novecentowide-Bold-webfont.eot');
src: url('../webfonts/Novecentowide-Bold-webfont.eot?iefix') format('embedded-opentype'),
url('../webfonts/Novecentowide-Bold-webfont.ttf') format('truetype'),
url('../webfonts/Novecentowide-Bold-webfont.woff') format('woff'),
url('../webfonts/Novecentowide-Bold-webfont.svg#webfont') format('svg');
}
All, I just found the main reason cause the incompatibility between browsers is because different browser only depend on the different font file. here is the detail of it . please review it. Another thing we should care about when use this css3 feature is the Mime Type of the Font file. Just make sure the server you used for example IIS is added the right Mime Type for the font file. Otherwise the browser can not recognize the type of the resource. Or sometimes will throw the 404 error although the resource is indeed there. thanks.
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}
I am very confused by an issue I am seeing on my production site.
When I access the site via "www", everything looks like expected and matches my local development environment. The css is spot-on.
But if I access the same site with just the domain name the fonts kind of become larger and the site becomes ugly. Has anyone experienced a similar problem?
Maybe I am missing something as 100 things are flying around for me right now.
The urls in question:
http://www.connect4fitness.com
http://connect4fitness.com
And, yes the DNS entries are correct. Both urls should be serving the same pages!
I'm guessing you're just viewing at the wrong zoom level. What browser are you using? In the version where the fonts are large, make sure you're veiwing at 100% zoom level (generally this is done by hitting Ctrl+0 (that's a zero) or zoom in and out with Ctrl+(either plus or minus +/-). Most modern browsers remember your last zoom level for a specific site, and do differentiate between sub-domains, so you you zoomed in at some point it will remember it only on the http://connect4fitness.com.
If you're using #font-face rules in your CSS, the path(s) to the fonts have to match the domain from which they're requested — this is referred so as the same origin policy.
For example, if you're viewing this page:
http://example.com/about
and the fonts are being served via CSS from:
http://www.example.com/css/screen.css
You'll encounter the same origin policy and the browser will not download the font files (since the fonts specified in the CSS are being served from a different domain. Remember, sub-domains such as www are technically considered a separate domain).
To easiest way to fix the problem is to link to your fonts in your CSS using relative (../) or absolute paths (/), and avoid using your site's FQDN if at all possible..
Good (Relative):
#font-face {
font-family: 'MyWebFont';
src: url('../fonts/webfont.eot');
src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/webfont.woff') format('woff'),
url('../fonts/webfont.ttf') format('truetype'),
url('../fonts/webfont.svg#svgFontName') format('svg');
}
Best (Absolute):
#font-face {
font-family: 'MyWebFont';
src: url('/fonts/webfont.eot');
src: url('/fonts/webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/webfont.woff') format('woff'),
url('/fonts/webfont.ttf') format('truetype'),
url('/fonts/webfont.svg#svgFontName') format('svg');
}
Bad (FQDN):
#font-face {
font-family: 'MyWebFont';
src: url('http://example.com/fonts/webfont.eot');
src: url('http://example.com/fonts/webfont.eot?#iefix') format('embedded-opentype'),
url('http://example.com/fonts/webfont.woff') format('woff'),
url('http://example.com/fonts/webfont.ttf') format('truetype'),
url('http://example.com/fonts/webfont.svg#svgFontName') format('svg');
}