I'm trying to upgrade to FontAwesome 5 and it won't work. We run our website through OrchestraCMS that is native to Salesforce.
I've downloaded Version 5 and uploaded, as is, to my Static Resources. Then in my Visualforce Components Page Header I have added the below code:
<apex:stylesheet value="{!URLFOR($Resource.FontAwesome, '/FontAwesome/css/fontawesome.css')}" />
We use CSS pseudo elements, so I've updated all the classes according to the instructions:
.expired::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f017";
color: #886E3A;}
I've tried unzipping and uploading only the webfonts and css files, but that still doesn't work.
Any suggestions would be appreciated.
The official documentation tells you everything about "Hosting Font Awesome Yourself":
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Also please note that what was for example <i class="fa fa-home"></i> in version 4,
that is now <i class="fas fa-home"></i> in version 5.
(I think this could be your main problem.)
This is also well documented here:
https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
After reading this two page I linked, I'm sure you will able to make it work.
Also check your browser's network tab to see if the needed css and font files for FontAwesome have been downloaded successfully. You know... no red lines and 404 :)
This may have been how my website was built in Salesforce, but for those having the same problem as me, I suggest the following:
Copy the fontawesome.css (remove the '../' from the URL at the bottom of the file) and the webfonts folder into your zip file in the static resources.
Then refer to your stylesheets:
These instructions are slightly different to the Font Awesome website, as uploading their zip file and referencing it didn't work for me.
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.
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.
I've been using fontawesome for one of my web projects and it works fine when I use the CDN link as its stylesheet but when I want to have everything locally and download FontAwesome(zip file) from the website, it becomes messy and shows multiple icons as some kind of bad zoom problem over its png file of icons.
the only change is
this
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
into this
<link src="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet">
Again, the problem isnt that its not working, its how it shows multiple icons.
Assure you have downloaded the full package with correct version from the FontAwesome website and use a correct link, such as:
<link href="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet" >
Reset your browsers cache.
Assure that the or element you use, uses the FontAwesome font family. For example:
<i class="fa-pencil" title="Edit"></i>
but
<i class="fa fa-pencil" title="Edit"></i>
It won't work if you have something as the following in your CSS:
* {
font-family: 'Josefin Sans', sans-serif !important;
}
If you are using IE, just dont...
If this doesn't work, just give it one hour or two(trust me sometimes browser plays jokes on itself), if problem was persistant, check https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting
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.
Newbie question. I did meteor add fortawesome:fontawesome which was successful. Then in my client folder I created style.css with
body {
font-family: FontAwesome;
}
But its not having any effect. Other default fonts such as monospace, sans-serif are working fine.
I dont mind downloading and adding css, fonts etc but to which folder should I copy them to? client or public?
FontAwesome is a font icon set library, it would make little sense to use it globally on the body.
You need to add markup to your templates to insert icons in your website using this syntax :
<i class="fa fa-user"></i>
Have a look to FontAwesome docs to discover every icons and options available : http://fortawesome.github.io/Font-Awesome/icons/
Inside your template you have to use i tags:
<i class="fa fa-camera-retro fa-lg"></i>
For more information check the examples in the official page: http://fortawesome.github.io/Font-Awesome/examples/
you have a wide variety of icons to use: http://fortawesome.github.io/Font-Awesome/cheatsheet/