I want to include a custom font in my CSS like this:
#font-face
{
font-family: TheFont;
src: url(fonts/SourceSansProLight.ttf);
}
The CSS is served with Grails 2.3 and the CSS is modified to become this
#font-face
{
font-family: TheFont;
src: url(resource:/css/fonts/fonts/SourceSansProLight.ttf);
}
The resulting font url scheme is unknown and browsers can't open that file. Chrome, for example, reports:
GET resource:/css/fonts/fonts/SourceSansProLight.ttf net::ERR_UNKNOWN_URL_SCHEME
/css/fonts is prepended to the original URL as well.
How can I instruct Grails to leave the font-face URL exactly as it is?
The solution was to disable CSS processing in Config.groovy:
grails.resources.rewrite.css = false
I found the tip how to do that on the Grails mailing list.
A better solution I think is proposed by dmahapatro at: https://stackoverflow.com/a/22849288/2286664
You need to ensure your font files are known to the Resources plugin.
The following worked for me in my Config.groovy, adapt it based on your paths:
grails.resources.adhoc.includes = [
'/images/**', '/css/**', '/js/**', '/img/**', '/fonts/**'
]
You'll needed to run grails clean after making this change.
Related
I have a website that uses Flask, and I use Flask-Assets with the libsass filter. Here is some of my SCSS code:
#font-face {
font-family: AnakAnak;
src: url("/static/anakanak.ttf");
}
This usually works fine. However, when I set the APPLICATION_ROOT config value of my Flask app to /otherpath, the font file is now at /otherpath/static/anakanak.ttf, but the CSS still points to /static/anakanak.ttf. How can I fix this? Is there some way I can insert something like this into the CSS?
src: url(url_for('static', filename='anakanak.ttf');
I just figured out a solution. Since the outputted CSS file is also going to be a static file (/static/gen/XXXXXXXX.css), just use a relative URL in the CSS file:
src: url("../anakanak.ttf");
I am trying to use a custom font in my css class using font-face. I have tried two different types of files (.otf and .ttf). I have the custom font files uploaded to an S3 bucket. I have also given public permissions to the font files and attempted using both relative and full url paths.
Is this not supported on aws? I've read some other answers on here that implemented font-face in the same way but had issues with specific browsers.
CSS:
#font-face {
font-family: CustomFontName;
src: url(/pathToCustomName/CustomFontName.ttf);
}
div.testing{
font-family: CustomFontName;
font-size: 150px;
}
HTML:
<div class="testing"> TESTING CUSTOM FONT </div>
The class is clearly recognized but the font is not implemented. Is this an aws issue or am I missing something obvious? Is there another way to use custom fonts on an aws static site?
I see this is an old post so posting this more for other people encountering the same issue.
I struggled with this problem for a while, before I got it working recently.
Theres a a couple of things to check:
Browser cache: It's a good idea to use incognito or clear the cache regularly when developing, the number of times I've made big changes and wondered why I can't seem them is a little embarrassing.
Make sure the path is exactly correct, i.e. no preceding / and capitalisation matches.
For example if your file, Custom_font.ttf is in say a content folder the path would be content/Custom_font.ttf then full line in your css would be:
src: url('content/Custom_font.ttf');
The path is always relative from the file/page you have open or the specified base point if you use <base href="relative/path"> in your html.
Hope this helps
You have to setup a redirection pour your SPA:
https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
You have to specify the format:
#font-face {
font-family: CustomFontName;
src: url(/pathToCustomName/CustomFontName.ttf) format('ttf');
}
And it is recommended to use woff2 for web fonts.
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.
I'm trying to add a custom font to a site, and I'm not sure where I'm going wrong.
In my SASS (bourbon) file, I have
#font-face {
font-family: "officina";
src: url("../fonts/officina/OfficinaSansStd-Book.otf") format("opentype");
}
body {
font-family: officina;
}
pretty basic. I have looked at the source for the page, and I don't see the officina font-file link anywhere. Should there be one? I'm concerned that the path may be the issue I'm having, but I'm not sure how to check this. I'm using rails, but I don't think I need to create a route to the font directly.
I'm also using backbone, and I've placed the font in my assets directory, which is why it is one level up from my css.
Ok, I got this resolved. The problem was that ruby wanted a route. Rather than keep the font in a separate font path, I put it in the media path which already existed, but using the stylesheets path itself in theory would have worked as well.
I would like to know if it's possible to host webfonts on another domain,
My CSS are hosted on Amazon CloudFront and my webfonts too but they don't show up, It was fine when my css were in local.
this is my style.css on CloudFront:
#font-face {
font-family: 'Aller';
src: url('/app/files/fonts/allerdisplay-webfont.eot');
src: local('☺'), url('/app/files/fonts/allerdisplay-webfont.woff') format('woff'), url('/app/files/fonts/allerdisplay-webfont.ttf') format('truetype'), url('/app/files/fonts/allerdisplay-webfont.svg#webfontLZ8nc4vC') format('svg');
font-weight: 900;
font-style: normal;
}
The stylesheet is hosted on CloudFront using a subdomain: static.mydomain.com/style.css
And the Webfont can be downloaded from : static.mydomain.com/app/files/fonts/allerdisplay-webfont.ttf
Unfortunately when the stylesheet is called from mydomain.com it doesn't load it. I was wondering if it's a limitation or something like that.
Thanks
Should be no problem with an absolute path for the URL in the style declaration.
In your code above, you have relative path URLs.
You need an absolute path URL, like:
"http://static.mydomain.com/app/files/fonts/allerdisplay-webfont.ttf" (absolute)
-- not --
"/app/files/fonts/allerdisplay-webfont.ttf" (relative)
Theoretically, depending on the architecture of your subdomain, you might be able to rig up a way to maintain a relative URL, but this would not be worth the trouble. Just use an absolute one and be done with it.
[previous suggestions below were posted before the relevant code was posted]
But Google Web Fonts achieves all this by moving the entire style sheet to the cloud. If you can't get it running inside the style sheet, you might try creating a separate style sheet like that instead.
Note, however, that to get true cross-browser compatibility, you need a bunch of different font file formats... this could be the problem. FontSquirrel has a font kit generator you may want to check out for that.