What's the difference between the fontawesome.min.css and all.min.css files in version 5 of the fonts?
fontawesome.min.css include only the common icon pack.
In the all.min.css, you got all features of fontawesome (thin, light, brand, solid, regular) as explained on their website.
Related
I cannot get Font Awesome to work on any of my three Windows 10 machines. All my computers have been updated from 8.1. I don't know when it stopped working, here is what I do know:
Symptoms:
The font does not show. When double-clicked and opened with default Windows font viewer, it shows a default Arial-like typeface instead of slab serif Font Awesome
After installation, when browsed with Character Map - it again displays some kind of system-default font (and none of the icons)
Opened in Adobe programs it shows all alphanumeric characters and icons as blank square outlines.
So far I have tried:
Removing any and all font awesome files from the system and installing the font again
Installing just OTF, just TTF as well as both
Restarting, rebooting, system cleanup
Downloading older versions of the font
I am new to StackOverlow, so can't post images. Links below:
Double-clicking FontAwesome.otf file
Attempting to view in Character Map
EDIT: I had a friend with Windows 8.1 try it -- same problem!
One practical way is to convert .otf format to .ttf using Fontlab.
The solution is discussed here.
Font Awesome 5 is known to work on Windows 10. Here are instructions to install for Desktop Use. We recommend that you use the OTF files for desktop applications, because they support ligatures (i.e. type the icon name and the icon glyph appears).
I need help please, I'm using a Custom font for my new website design which I had to do download. On my computer website looks good with this new font. Unfortunately it is not the case for any other user who did not download this custom font.
pls see: www.vanessawiacekwebs.com
I have tried use Font Face but it does not work and I do not know why ?
Font: Marathon II; http://ufonts.com/q177208
Thank you,
You're incorrectly directly linking to the font source.
Your incorrect CSS code:
#font-face {
font-family: Marathon II;
src: url(http://ufonts.com/q177208);
}
You need to download the fonts, upload them to your file directory and then use the #font-face rule to link to font files.
A multitude of beginner's tutorials exist online: https://css-tricks.com/snippets/css/using-font-face/
There is an easy way and a hard way. The easy way is to use Google Fonts. Web Fonts were a huge PITA, and Google Fonts makes it easy.
https://www.google.com/fonts
There are other options, but after 20 years of web development, this is the only solution I use.
I got a psd from my client using Museo Slab 900 and Museo Sans. The fonts are not in my computer. They are paid fonts. So I don't think I can use font face. Does that mean I have to make it an image? It there any alternative to solve this problem?
Museo Slab Webfont. FontSquirrel seem to have a free web font license. Make sure you keep all licensing with the typeface intact and you should be fine.
The license says:
"Direct Linking or Embedded Opentype Files with the #font-face CSS property (ONLY for FREE fonts)
If the font is a free font ($0.00 license fee), you may use this font for Font-Face embedding, but only if you put a link to http://www.exljbris.nl on your page and/or put this notice /* A font by Jos Buivenga (exljbris) -> http://www.exljbris.com */ in your CSS file as near as possible to the piece of code that declares the Font-Face embedding of this font."
However, read the license carefully. This might not apply to this specific font, though, I see no reason for it to not considering the font is free to download.
The free version only includes a weight of 500.
Easiest wayGet link of the font you want from Google and add that link in head tag :<link href="http://fonts.googleapis.com/css?family=Ruthie" rel="stylesheet" type="text/css"/><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Chewy:regular|Architects+Daughter:regular"/>and add its name in css : h1 {font-family:'Chewy'}div{font-family:'Ruthie'} I hope you got it.
I have been trying to use Helvetica font while creating the pdf but the font is not reflected back in pdf.
I did some google and found some solutions but none are workable.
Tried Solution 1
I found similar thing here :
Font issue
Tried the last solution mentioned over there
workaround is to define #font-face in your css and have src link
to external host that is accessible by wkhtmltopdf
But the solution is not working.
Tried Solution 2
I also tried to use google font api, but result is still not workable.
helvetica font
here is an example
Example of custom font
Tried Solution 3
I tried doing it using css property #page.
But that also is not working.
What is the approach for a workable solution.
The easiest way to fix wkhtmltopdf's font problems is to Base64 encode the font (you can use this tool) and include it in your CSS:
#font-face {
font-family: 'Helvetica';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
This works with all fonts (including Google Fonts), and guarantees cross-platform compatibility across different machines and operating systems.
For me loading fonts from Google Fonts didn't work. And putting base64ed binary into a CSS file seems a little to much for me(Korean types are several megabytes). I'd recommend to install the fonts you need to use on the machine. For Ubuntu you can simply download fonts files from Google Fonts and copy the files in to $HOME/.fonts directory and run fc-cache command in command line to rebuild the fonts list.
$ mkdir ~/.fonts
$ copy your-font-file.ttf ~/.fonts/
$ fc-cache -fv
For a Rails application you can symlink
$ ln -s /your/app/root/assets/fonts ~/.fonts
Then you will be able to list all available fonts.
$ fc-list
Nimbus Sans L:style=Regular Italic
URW Palladio L:style=Roman
Century Schoolbook L:style=Bold Italic
Nimbus Sans L:style=Bold
URW Chancery L:style=Medium Italic
Nimbus Roman No9 L:style=Regular
Century Schoolbook L:style=Bold
Century Schoolbook L:style=Italic
Nimbus Sans L:style=Regular
....
To add to the fray, using wkhtmltopdf 0.12.1 (with patched qt) on linux this worked for me:
#font-face {
font-family: dejaSansMono;
src: url('file:///usr/share/fonts/dejavu/DejaVuSansMono.ttf');
}
I.e., specifying the path to the .ttf. Simply naming a font-family, any font-family, did not work even if it did in the browser.
expanding baxangs answer for linux (x64) users: you install the ttf font file in /usr/share/fonts/font-folder/font-name
and then in your css file use the fontname which is listed in fc-list, you don't need to use #font-face, just use the fontname in your css
example Verdana.ttf======
copy from local machine to server into /usr/share/fonts/Verdana/Verdana.ttf
fc-list to get the fontname (most likely it'll be Verdana)
Then use in your css P{ font-family: 'Verdana'}
and that's it! took me a while to get it fixed.
I had the same problem with PT Sans from google. What worked for me was the following process:
Download PT Sans from google and runt it through fontsquirrel
generator
Place the #font-face (I only used the ttf) in the css (in my case was in html
head of a php file)
Note that I did not use base64 and it worked as expected.
Hope it helps
To convert HTML to PDF by wkhtmltopdf try to avoid woff font face. Use trutype format of the Google Web Fonts with base64 encode.
Recently I tried to use a google web font from Google Web Fonts. But in browser it shows correctly but it doesn't show after converting HTML to PDF.
Then after searching lots of from web at last I found tools to encode fonts to base64 encoded format and also got CSS for #font-face.
I use some fonts in my new website that do not exist by default on normal user computers.
After some search I got that there are some tools that might help, like Google web-fonts.
Fonts that I used are : Bebas , Sansation and Quicksand
But I couldn't find them on Google web fonts.
How do I do use these fonts ?
And what are other cross browser solutions?
Different fonts are created by different font foundries. Not all fonts will be found in the same place. And not all fonts are available to be used as web fonts because of font-licensing.
Fonts are not always free and good fonts are rarely free.
You can usually find out if a font is available as a web font, and who owns the font by googling the font name plus "#font-face".
You absolutely should know where you'll be getting the fonts you'll be working with in advance. If you have three fonts that come from three different font-services then that's bad. Firefox especially wont like it much and you'll have some pretty bad fout problems.
Fortunately for you, all those fonts are available through font-squirrel
Bebas
http://www.fontsquirrel.com/fontfacedemo/Bebas
Sansation
http://www.fontsquirrel.com/fonts/Sansation
Quicksand
http://www.fontsquirrel.com/fonts/Quicksand
What you will want to do is download all those fonts, them run them through the #font-face generator
http://www.fontsquirrel.com/fontface/generator
HOWEVER It reads to me like you don't really understand what #font-face is, or how it works. So I'd recommend reading up on it some more.
I am not sure what exactly you mean, but if you want to convert your website's font into a custom font which is viewable for the visitor, you could try use the curfon solution.