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
Related
Very entry-level here.
I have a .ttf font file I'd like to use for my blog, but I am unsure of how/where I can get its coding (?). Is this about right?
* {
font-family: 'providence-bold';
src: url('/font/providence-bold.regular.ttf');
}
feel free to skewer this, as I said I've little idea of what I'm doing.
EDIT: Here is a link to the font I'm trying to use. (If it helps) https://ufonts.com/download/providence-bold.html
#font-face {
font-family: 'providence-bold';
src: url('/font/providence-bold.regular.ttf');
}
This is the format I use. Just make sure you're path is correct.
Side note: I don't like using underscores (_) and dashes (-) in variables.
It's recommended to get in the habit of writing variables as camelCase or PascalCase.
I would advice and is a better way to include fonts is by converting it into these formats.
You can get the code from here after you converting your fonts into the formats you wanted -> link
After you convert your fonts it will produce a rar file extract it you will find the font.css where you can find these codes.
#font-face {
font-family: 'providence-bold';
src: url('../fonts/providence-bold.eot');
src: url('../fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/providence-bold.woff') format('woff'),
url('../fonts/providence-bold.ttf') format('truetype'),
url('../fonts/providence-bold.svg#providence-bold') format('svg');
font-weight: normal;
font-style: normal;
}
Be sure to check your url to the fonts' location.
You need to add the link to the font from the url provided here:
https://ufonts.com/download/providence-bold.html
if you add them like this ../providence-bold.html they are relative to your html document. So would need to be installed on your server http://yourname.tumblr.com or whatever.
If you change the urls to point to the resource at ufonts, then it should work.
So
#font-face {
font-family: 'providence-bold';
src: url('https://ufonts.com/fonts/providence-bold.eot');
src: url('https://ufonts.com/fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
url('https://ufonts.com/fonts/providence-bold.woff') format('woff'),
url('https://ufonts.com/fonts/providence-bold.ttf') format('truetype'),
url('https://ufonts.com/fonts/providence-bold.svg#providence-bold') format('svg');
font-weight: normal;
font-style: normal;
}
However these resources must exist at the ufonts url. If it is just a place to download the ttf file, this will not work. They have to be served from somewhere, and tumblr will not allow you to upload font files to their servers.
First of all, you need to get fonts in a proper format. Youca n download them in the required .ttf format at such websites as https://fontsly.com/gothic/celtic or youc an use some converters.
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;
}
I am using YanoneKaffeesatz Font in my wordpress website. So to use this font first I generated code from FontSquirrel. Then I got this piece of code
#font-face {
font-family: 'yanone_kaffeesatz_lightRg';
src: url('yanonekaffeesatz-light-webfont.eot');
src: url('yanonekaffeesatz-light-webfont.eot?#iefix') format('embedded-opentype'),
url('yanonekaffeesatz-light-webfont.woff') format('woff'),
url('yanonekaffeesatz-light-webfont.ttf') format('truetype'),
url('yanonekaffeesatz-light-webfont.svg#yanone_kaffeesatz_lightRg') format('svg');
font-weight: normal;
font-style: normal;
}
Then I paste the code in my css file and paste all the converted fonts(.otf,.svg, .ttf) in my website folder but still my font has not been changed. So can some one tell me why this is happening?
Any help and suggestions will be highly appreciable.
Are the font files in the same dir as your stylesheet? You're currently pointing to that dir. Paths in CSS are relative to the stylesheet, not the root.
root
-css/styles.css
-images/
-fonts/
index.html
With the above structure you would use this as your URL.
url('../fonts/your_font.font;);
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;
}
Generated several webfont kits from FontSquirrel's font generator, put them into css file, they work but only if the files are in the same directory with css file.
How do I make them work while specifying a different directory??
Present code:
#font-face {
font-family: 'ChunkFiveRoman';
src: url('chunkfive-webfont.eot');
src: url('chunkfive-webfont.eot?iefix') format('eot'),
url('chunkfive-webfont.woff') format('woff'),
url('chunkfive-webfont.ttf') format('truetype'),
url('chunkfive-webfont.svg#webfont374IVrsF') format('svg');
font-weight: normal;
font-style: normal;
}
I'd like all the files to live in /assets/webfonts.
I tried /assets/webfonts and ../assets/webfonts ...these do not work...
Thank you, Tom
According to W3C:
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document
So, where are the fonts located relative to your css?
/assets/webfonts/ says to start looking in the root folder.
../assets/webfonts/ looks for the path starting up one directory level
If your assets folder is a subdirectory in the folder where your css is, try assets/webfonts/