The font is uploaded into the directory of the child theme and the stylesheet is being called correctly, but the fonts files themselves aren't being applied according to my css declarations. I created a font.css file and I have this code in it.
#import url("https://fast.fonts.net/lt/1.css?apiType=css&c=aac5a6bc-2331-43a2-9ced-f4fc346c41dd&fontids=5672533");
#font-face{
font-family: "Alternate Gothic";
src:url("fonts/ee6f4110-f8b2-468e-a988-889fd8f73ca2.woff2") format("woff2"),url("https://sunnydaykcdev.wpengine.com/wp-content/themes/essence-pro/fonts/d9bf39bd-b8df-4cec-8f40-aa72a922ed70.woff") format("woff");
}
/*
This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts: https://www.linotype.com
*/
The stlye.css and the fonts folder are at the same level in the directory, so I'm pretty sure I have the path right. Please let me know if you have any tips!
Your pointing at a path for a URL property. Try changing fonts/ to the url of the file.
Related
I have seen a couple of projects where they just mention the name of the fonts they want to use in the CSS file without any mention of the source or the TTF or other font files.
eg
code {
font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}
When I remove those fonts via CSS in inspect element I can see the fonts are changed. So the code works. But I don't understand how the browser figures from where the fonts should be downloaded.
The code works even in incognito so not sure if the browser caching the font is a valid explanation.
Notice that the last setting in the font-family list is sans-serif.
If the local system has absolutely none of the other fonts loaded locally then the system will use whatever it has set as its default sans-serif font.
That is why it looks as though 'it works' when you say this:
#Fabrizio Calderan loves trees I checked the system fonts with this css-tricks.com/snippets/css/system-font-stack link. But the mentioned font family is not matching any of the fonts in the system fonts. So the default font should be picked right?
You are right, it picks the default font, but the version that is sans-serif.
As you can see in the above picture,I created a sample.html file and used the font-family for the body tag. So the source provided does not mention in font-family section. in the result, fonts will load from "Fonts" folder in my windows folder. (Of course if you use Windows OS and website locally, mentioned process will be happen!)
There are several ways the browser decides what fonts are downloaded/used:
As user 'Fabrizio Calderan loves trees' stated (paraphrased):
If no sources are provided, they are loaded from the computer running the webpage in a browser.
The programmer uses external APIs or links that embed a font. An example of this is Google Fonts, which lets programmers choose fonts they want (and select them), and embed them using either a <link> tag (put into HTML code) or #import tag (put into CSS file).
The website you are looking at may contain #font-face statements in their CSS, which links a common name (i.e., 'Source Code Pro') to a font file. You can read more about #font-face here and here.
If you can't find evidence of any of these, could you possibly share a link to the webpage's source code?
EDIT
I took a look at the code in the website. It seems like the fonts styling in the display/textarea is:
.displayArea{
font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;
}
And, there doesn't appear to be a source of these fonts, so it is part of the 1st category I listed above. Basically, the fonts in quotes are fonts that may be used if already preinstalled inside the client's computer, if not, the browser goes down the list and keeps checking whether the client has the font installed. The ending font is sans-serif, which is a default font that all computers have, so it serves as a backup in case all other fonts aren't available.
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 use the font named Rexlia. CSS code is so:
#font-face
{
font-family: "Rexlia";
src: url('rexliarg.ttf');
}
.ttf and css file are in same folder. In local font works, but I deploy site to hosting, font-family is Rexlia, but font does not seems like in local. Font lose its design. Is there any way to solve this problem?
Your src path is relative to the website , not the CSS document. If the published path has the CSS in a subfolder, it will not resolve. Try an absolute path with your published version to quickly rule that out.
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.