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.
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 was browsing a website earlier with a family of fonts that I didn't recognise as being available for web.
You can view them on this page http://www.etq-amsterdam.com/collection/mid-1-white
According to inspect element, the fonts are:
#font-face {
font-family:AvenirNextLTPro-Demi;
src:url(fonts/28C41E_0_0.eot);
src:url(fonts/28C41E_0_0.eot?#iefix) format("embedded-opentype"),url(fonts/28C41E_0_0.woff)format("woff"),url(fonts/28C41E_0_0.ttf) format("truetype") }
#font-face {
font-family:AvenirNextLTPro-Regular;
src:url(fonts/28C41E_1_0.eot);
src:url(fonts/28C41E_1_0.eot?#iefix) format("embedded-opentype"),url(fonts/28C41E_1_0.woff) format("woff"),url(fonts/28C41E_1_0.ttf) format("truetype") }
I tried using the "font-family:AvenirNextLTPro-Regular;" line as I would do with other typefaces but it didn't work. Is this easily achievable or are they likely to have bought a license to use the font (if that's even possible)?
The font-face tag loads the fonts from files, in this case, from http://www.etq-amsterdam.com/css/fonts/28C41E_0_0.woff, so you would need to also have those fonts loaded on your server in order to access them from the CSS
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.
I was wandering how can I link font-family in css to a font in your folder. Like PHP you can use your font in your folder.
Example Code:
CSS:
font-family: verdana;
This is what I mean:
font-family: foldername/font
Is there a code for that? or I have to use PHP to browse my own font?
#font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
Just found this one on "A List Apart", haven't checked myself but this webbie is one of the most respectful resources for designers online so i guess your best shot is to give it a try.
It is not possible do like:
font-family: foldername/font
Fonts are read by the browser from the client machine from a specific location, you can not change it that way.
Jordan,
This should help you:
Using #font-face
You are misunderstanding this. PHP can use server-side fonts to generate an image. The font itself is never shown to the client, just the rendered results.
To be able to use a non-standard font in the user's browser, you will have to package the font along with the site.
There are various techniques to do this, all with various degrees of browser support. Here's a good article on the various available techniques, their upsides and downsides. Also check out the duplicate link.
Note that only because you paid for a font, this does not mean necessarily that you are allowed to re-distribute it embedded in a web site! Always check your font license.