Hello,
I am working on adding Font Awesome to my website.
On the Font Awesome github page it says simply:
"Install FontAwesome.otf and visit the copy & paste page. Happy designing"
Please can someone advise me - do I need to install all those other files that come in the folder downloaded from github? Those other files being:
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
Thank you
Yes :) I would install all of them. They are font files for different browser support.
Upload the files to your website and use #font-face in CSS
http://www.font-face.com/
This ensures the most amount of users will be able to see your font.
Here's an example:
#font-face {
font-family: 'myFont';
src: url('includes/fonts/DejaVuSans-webfont.eot');
src: url('includes/fonts/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/LDejaVuSans-webfont.woff') format('woff'),
url('includes/fonts/DejaVuSans-webfont.ttf') format('truetype'),
url('includes/fonts/DejaVuSans-webfont.svg#DejaVuSansBook') format('svg');
font-weight: normal;
font-style: normal;
}
body{ font-family: myFont, arial; }
Related
How do I use fonts such as Agency FB, Berlin Sans, Century Gothic etc. in my webpage which, when searched on Google fonts redirect to other sites like
https://store.typenetwork.com/foundry/fontbureau/fonts/agency-fb?src=GoogleFonts
https://www.fonts.com/font/monotype/century-gothic/regular
and if uploaded to Font Squirrel, display the following message
'Font Bureau has requested that their font Agency FB Regular be blacklisted by the Generator. You will not be able to convert this font.'
I have tried the following codes (which worked with fonts which are not of this type)
#font-face
{
font-family: 'airstrike';
src: url('fonts/airstrike-webfont.woff2') format('woff2'),
url('fonts/airstrike-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Please experts, help me out with this basic (but detrimental to the design of my webpage) problem as this is one of the last ones remaining in my webpage.
Problem solved. I downloaded similar fonts of copyrighted originals from https://www.whatfontis.com/ took the .ttf file and uploaded it to https://www.fontsquirrel.com/ where it got converted into two files of .woff and .woff2 extensions and a sample stylesheet was provided. I just copied the code in my .css file and modified it accordingly. Here is the code i used
#font-face
{
font-family: 'agency';
src: url('fonts/agency-webfont.woff2') format('woff2'),
url('fonts/agency-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
How can I test a webpage on my own machine as if I didn't have a certain font?
E.g. My web page uses the font Roboto. My computer has the Roboto font installed locally. How can I see what this webpage will look like on a computer without that font installed?
Assume that the font isn't included in the web page through some CDN or other method.
Deactivate or uninstall the font temporarily or alter the stylesheet to not include the declaration when requested from localhost.
Rename the font family in your CSS, so instead of defining the font family like this -
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto.eot');
src: url('../fonts/roboto.woff') format('woff'),
url('../fonts/roboto.ttf') format('truetype'),
url('../fonts/roboto.svg') format('svg');
font-weight: normal;
}
Which will use system font if Roboto is installed, Change it to something like this -
#font-face {
font-family: 'Roboto_web'; //notice the name here
src: url('../fonts/roboto.eot');
src: url('../fonts/roboto.woff') format('woff'),
url('../fonts/roboto.ttf') format('truetype'),
url('../fonts/roboto.svg') format('svg');
font-weight: normal;
}
So the font Roboto_web is something which is not installed in your system so it will always use web font. This way you will not have to uninstall or disable it from system.
And in the CSS you can use it like this-
.sample_class{font-family:"Roboto_web"}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Add this into your head.
I'm using #font-face on my site and it does not work, 404 error on the .woff file. I have the fonts located at the root but could not find fonts
this is my font css file what is problem?
#font-face {
font-family: '---_2regular';
src: url('----regular-webfont.eot');
src: url('----regular-webfont.eot?#iefix') format('embedded-opentype'),
url('----regular-webfont.woff') format('woff'),
url('----regular-webfont.ttf') format('truetype'),
url('---regular-webfont.svg#---_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
You must contact your Hosting company. Then They must add .woff extension to mime types.
Possible, your problem can been solved.
All you can read about woff and having them on your site:
http://www.google.com/fonts
Ensure your fonts located in the same directory as the css file, unless you have specified a path otherwise.
Give http://www.fontsquirrel.com/tools/webfont-generator a try, it gives an example HTML page with the font embedded, hopefully it should point you in the right direction!
I am making a music blog and I'd like to be able to use BebasNeueRegular on my Wordpress site. Obviously, this is possible considering goldenscissors does it on their site (the titles for the widgets on the side and the title of the post are both using BebasNeueRegular).
I did a Google search for this, and only found how to install Google Web Fonts to Wordpress, but BebasNeueRegular is not a Google Web Font. Any help?
P.S. you can download the font here.
Read about font-face.
In your example, you can see by yourself this fragment in the style.css:
#font-face {
font-family: 'BebasNeueRegular';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
}
I am trying to embed my custom font in my website, got a link folder from http://www.fontsquirrel.com/fontface/generator this site after uploading a font on this site, it gives me this CSS:
#font-face {
font-family: 'VoltaEFTU-Regular';
src: url('voltaeftu-regular-webfont.eot');
src: local('☺'),
url('voltaeftu-regular-webfont.woff') format('woff'),
url('voltaeftu-regular-webfont.ttf') format('truetype'),
url('voltaeftu-regular-webfont.svg#webfonttKmU3jX8') format('svg');
font-weight: normal;
font-style: normal;
}
But it's not working on my machines. How can I embed a font in my website?
Thanks
Mayur Mate
If I were doing it, I would take a look at how the Google Font API works…
#font-face code looks correct, but if you want use this font example in <p> you must use font-family: 'VoltaEFTU-Regular'; in this element. Look into generated demo.html file.