How do I refer to assets within a CSS file?
I am using Play Framework 2.1.3 (Scala).
#font-face
{
font-family: RockSalt;
src: url('...something.../assets/fonts/MyFont.ttf');
format('truetype');
}
There's nothing magic about this topic in Play , just use relative paths to your font files in your CSS file. ie. if you have css and fonts folders on the same level it will be:
src: url('../fonts/MyFont.ttf');
if you are using default route for assets it can be also path that is relative to app's root:
src: url('/assets/fonts/MyFont.ttf');
Related
I would like to preload a custom font. I'm using rails 6 with webpack.
In config/_fonts.scss :
#font-face {
font-family: 'customfont';
src: font-url('customfont.eot?81236734');
src: font-url('customfont.eot?81236734#iefix') format('embedded-opentype'),
font-url('customfont.woff2?81236734') format('woff2'),
font-weight: normal;
font-style: normal;
font-display: swap;
}
I import this font in my application scss :
#import "config/index";
But I would like to preload this font. What's the best pratice to do that ?
If I am not mistaken you have to add a link tag in head of the view as per this article : https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Then for the href use the asset_pack_url helper in order to point to the right file.
Also be careful the asset_path_url needs to point to the folder where your compiled asset resides without mentionning "public/packs"
Then you probably have to use something like <%= asseet_pack_url 'media/fonts/my-font.woff' %> or something like that
(Also I am considering you are using Webpack to deliver images/css and fonts. If you are using the asdset pipeline just use the usual helpers)
Recently had same question. Here is what I did for Rails 6 with webpack.
Per my understanding webpack produces manifest.json which you can find in public directory of your app (it is configured in webpacker.yml).
When you open manifest.json you should also see references for fonts.
In my manifest it appeared similar to the following:
"media/images/some-font.woff2": "/packs/media/images/4d419d560889218c146f.woff2"
Now when you know that the pack path is available, it is easy to construct preloading in head section (example in haml):
= preload_link_tag(asset_pack_path('media/images/some-font.woff2'))
I'm very confused about LESS and in particular, the Font Awesome local files in a template I'm using.
I apparently have Font Awesome 4.3 and I've just downloaded 4.7. Of the files common to my project and the downloaded zip file, I'v overwritten the fonts and the less folders. Shouldn't that be enough to have my project use the latest icon set? - It's not as the old icons are working, but the new ones are not.
If I'm not recompiling less (do I even have to???), what else would I need to look for to get the new icons working?
EDIT:
In the main css file for the template, I've found some code related to Font Awesome:
#font-face {
font-family: 'FontAwesome';
src: url('dev-plugins/fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('dev-plugins/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('dev-plugins/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('dev-plugins/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('dev-plugins/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('dev-plugins/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
In that same file is reference to the FA icons - example:
.fa-times-circle-o:before {
content: "\f05c";
}
.fa-check-circle-o:before {
content: "\f05d";
}
So am now assuming my whole template needs recompiling?
I've worked it out by doing the following:
access the source files for the template
replace the Font Awesome LESS files with the latest version from their zip download
replace the Font Awesome font files with the latest
with the new files in place, re compile the main CSS LESS file
overwrite the outputted CSS with the one in my project
I'm using using Windows so I used WinLess to compile the LESS file.
So the answer to my question is: yes - I did need to recompile some LESS because the Font Awesome details are embedded (for reasons beyond me) in the main CSS file.
I'm trying to reduce the http requests on my website by combining multiple CSS files. I'm copying and pasting them in the order they are right now when it all works but when I try using this giant combined CSS file certain icons aren't showing up. The problem seems to be with a font-awesome CSS file, as when I separate that out the icons show up.
I thought that multiple CSS files functioned exactly the same as if you were to combine them in order but this does not seem to be the case for me. I don't know whether maybe it's because the combined CSS file is too big (466 kb) or that I'm combining minified and normal files, I've checked that all the selectors are the exact same but it's not showing the same specific icons.
Is there something about combining CSS files that I'm missing?
Font Awesome makes reference to a fonts directory where the font files are stored. In your combined CSS file you will need to make sure that either the fonts folder is still in the right spot relative to your CSS file or you will need to alter the path to the fonts that font awesome is using.
Below is the snippet Font Awesome uses to reference the fonts. You may need to change the ../fonts/ to ./fonts/ if your stylesheet and fonts folder are in the same directory.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Normally the CSS for font awesome is stored in a CSS folder. So the CSS tries to find fonts in the fonts folder one level higher than the CSS.
You can try with minifier CSS. you have to reduce the weight this way.
check link: CSS minifier
I have a .ttf font file that I need to use in my Angular.js application. I don't know how to import it and access it in my css files.
Could someone give me some direction in using this font file with Angular/CSS?
Including a font has nothing to do with angularjs. You have to declare it in a CSS file:
Take this chunk of my own as an example, declared in a stylesheet:
#font-face {
font-family: 'Durant';
src: url('../fonts/DurantBold.eot'); /* IE9 Compat Modes */
src: url('../fonts/DurantBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/DurantBold.otf') format('opentype'), /* Legacy iOS */
url('../fonts/DurantBold.svg#Durant-Bold') format('svg'), /* Legacy iOS */
url('../fonts/DurantBold.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/DurantBold.woff') format('woff');
font-weight: bold;
}
Remember that the paths are relative to the css file.
Today, most of the file formats are supported by most browsers - I don't know, concretely, the incompatibilities among browsers and fonts. This style is somewhat old.
Besides, I have all of those files (1 file per font, per format, per weight variation, per style variation - highly frustrating). You will not include configs for files you don't have.
If you have only .ttf files you only need this snippet in the .css file:
#font-face {
font-family: 'Durant';
src: url('../fonts/DurantBold.ttf') format('truetype');
font-weight: bold;
}
remember to actually include the css file where you declared this chunk, in the page where you will use it. If you use states (ngRouter / ui.router), then include the font in the MAIN page, not in the partials.
remember to have the font files (.ttf) in a location accessible by the declaration in this css file either being:
Absolute URL / CDN: this needs no explanation.
relative-to-site url: a path starting with / refers the path being relative to document root, as always.
relative url: a path not starting with / is relative to the current css file.
I know I wrote that many times but it always causes headaches when forgotten.
I am creating a Google Chrome extension.
And I want to use background-image attribute for some of the elements that I define through CSS. But I am not sure how the url() should be given. I tried relative URL, but it tries to fetch the image relative to the site's domain! Not relative to the extension's source directory.
The stylesheet is included to my extension via the manifest file as follows:
...
"content_scripts": [
{
"matches": ["http://www.myblahblahsite.com/"],
"js": ["core.js"],
"css":["styles.css"]
}
],
...
Also, I like to do the same with custom fonts too using the #font-face
For example:
#font-face {
font-family: 'abcCustom';
src: url("fonts/abcCustom.ttf") format('ttf');
}
This won't properly consider the font's path relative to the extension!
Any ideas or suggestions?
Thanks.
You need to make it an absolute url for your extension, the best way to do this would be like this:
#font-face{
font-family: 'abcCustom';
src: url('chrome-extension://__MSG_##extension_id__/fonts/abcCustom.ttf') format('ttf');
}
This is part of the i18n api.
Have you thought about encoding your images and fonts as Base64.