My web designer told me to use prime regular font in my web site.
I didn't find it.
Any body know how to use the font prime.
body
{
font-family: ...
}
final result:
<style type="text/css">
#font-face {
font-family: 'primelight';
src: url('prime_light-webfont.eot');
src: url('prime_light-webfont.eot?#iefix') format('embedded-opentype'),
url('prime_light-webfont.woff') format('woff'),
url('prime_light-webfont.ttf') format('truetype'),
url('prime_light-webfont.svg#primelight') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: "primelight", Verdana, Tahoma;
}
</style>
go to http://fontfabric.com/prime-free-font/
and download the font
creat a repository in your website : fonts/prime/
put the prime files inside make sure you ve something like this :PrimeLight.otf
alternative :
download the font
convert it with all options # http://www.fontsquirrel.com/tools/webfont-generator
Related
I am hosting fonts in my server and it can be accessed like - https://cdn.mywebsite/fonts/font-name
Now I have a css file (in the same folder as index.html) where I am importing these using #font-face like this:
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name.woff') format('woff');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name-light.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name-light.woff') format('woff');
font-weight: 300;
font-style: italic;
}
...... and a few more
I tried importing this file in my index.html using 2 methods, both returning 404 error in network tab.
1.
<style type='text/css'>
#import url('fonts.css');
</style>
<link rel="stylesheet" type="text/css" href="fonts.css"/>
In #2, I've tried to use src/..../fonts.css and ./fonts.css and /fonts.css (similar tries for #1 too)
I am not sure what's happening and why its not working.
NOW what IS working is adding the css directly within component like this:
<style type="text/css">
#font-face {
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name.woff') format('woff');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name-light.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name-light.woff') format('woff');
font-weight: 300;
font-style: italic;
}
</style>
I'm using node express and react (but that shouldn't matter, I think).
Any help is greatly appreciated.
A few things to look at.
https://cdn/mywebsite.com/fonts/font-name.woff2 is not a valid URL, because cdn is not a valid hostname. You need https://cdn.mywebsite.com/fonts/font-name.woff2 or maybe something like https://cdn.example.com/mywebsite.com/fonts/font-name.woff2 for the woff2 font file object.
Your css needs to mention more than just the woff2 font file to work cross-browser. You need other formats too. Here's an example of part of a workable css file for FontAwesome. (See this. https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css)
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Your favorite search engine will find several online tools for creating web font assets, including the CSS files and the various font file formats.
I'm trying to get the Bebas Neue font to work, I've managed to convert my fonts into their respective types but whenever I load the font in the browser I get errors.
Firebug throws:
downloadable font: download failed
Chrome throws a 404 not found.
I initially had these in their own font folder, but I then decided to move the fonts to the same directory as the stylesheet I was using to try and rule out location problems.
This particular file is a SASS partial called _typography that lives in a folder called global this is the same folder I've directly placed all the fonts into as is.
#font-face {
font-family: 'BebasNeueRegular';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
With a 404 Error - it's 98% going to be because of the path being wrong.
Just a thought - you mentioned that you moved them into a SASS partial? Can this folder be accessed from the site? From my experience, your SASS is going to compile into some sort of public directory.
In order to troubleshoot... theoretically, you should just be able to add www.yourdomaincom/path-to-font/font.eot and come up with a download file.
If you're not, then it really is an issue of the path being where the error lies. As far as why other fonts are working, I wouldn't be able to say without taking a better look at how you have your project set up.
Just my two cents worth to help you troubleshoot!
Make sure your #font-face matches your font-family use on CSS, either:
font-family: 'Bebas Neue'; on everything or:
font-family: 'BebasNeueRegular'; on everything.
Like:
#font-face {
font-family: 'BebasNeueRegular';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
Matches css use:
.selector {
font-family: 'BebasNeueRegular', sans-serif;
}
Or:
#font-face {
font-family: 'Bebas Neue';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
Matches:
.selector {
font-family: 'Bebas Neue', sans-serif;
}
I am trying to add this font : http://www.fonts2u.com/vps-dong-da-hoa.font
to my website. Here is my CSS :
#font-face {
font-family: "VPSDODAH";
src: url(http://localhost/blablabla/wp-content/plugins/buddypress/bp-themes/frisco-for-buddypress/VPSDODAH.ttf) format("truetype");}
#header h1 a {
font-family: "VPSDODAH";}
The URL to the font is correct but it's not working, what can it be ?
Thank you very much.
Not all browser support .ttf. Use a font generator to get all the font types ( I use font2web ) and then just add the fonts via #font-face:
#font-face {
font-family: 'fontName';
src: url('../fonts/fontName.eot');
src: url('../fonts/fontName.eot?iefix') format('eot'),
url('../fonts/fontName.woff') format('woff'),
url('../fonts/fontName.ttf') format('truetype'),
url('../fonts/fontName.svg#fontName') format('svg');
font-weight: normal;
font-style: normal;
}
Read here about browser font support.
You can try this website for your web font generation. If your font exists, you can convert it and get all the #font-face parameters to apply it for your website.
I don't understand how to get this to work, any help would be appreciated;
I'm going off of what I got from this website: http://alistapart.com/article/cssatten
from my style.css
#font-face {
font-family: "JSL";
src: url(http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Neither is the plus sign the issue (tested with my renamed fonts), nor do you have to import a separate css file at the top of your main css file.
However, you may need to have more versions of your font than just the true type. Have a look at Bulletproof #font-face Syntax.
You may use FontSquirrel’s generator to achieve this.
Here is an example of a #font-face embed in my application, which is pinned right at the top of my main css stylesheet.
#font-face {
font-family: 'JustVector';
src: url('../fonts/justvectorv2+webfont.eot');
src: url('../fonts/justvectorv2+webfont.eot?') format('eot'),
url('../fonts/justvectorv2+webfont.woff') format('woff'),
url('../fonts/justvectorv2+webfont.ttf') format('truetype'),
url('../fonts/justvectorv2+webfont.svg#webfontkw9J4lGf') format('svg');
font-weight: normal;
font-style: normal;
}
no
#font-face
Try get inport it:
#import_your_new_cssfile.css
whre you put:
font-face {
font-family: "JSL";
src: url(http://www.fontyukle.net/en/DownLoad-JSL+Ancient.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Is perhaps the "+" sign in the font URL a problem? You might want to URL encode it.
Edit - after hitting the font URL, it looks like you should try to download the ttf file, and refer to it locally, rather than from a remote source. It's prompting me for a Captcha in order to download the file, which is probably why it's not working.
You do need to download the file and refer to it locally,
The link supported there is a download link and requires a Captcha to be downloaded which means it is NOT a direct link to the TTF File.
Depending on the Font you may need to use:
#font-face {
font-family: 'someFont';
src: url('path/to/font/someFont.eot');
src: url('path/to/font/someFont.eot?#iefix'), format('embedded-opentype'),
url('path/to/font/someFont.woff'), format('woff'),
url('path/to/font/someFont.ttf'), format('truetype'),
url('path/to/font/someFont.svg'), format('svg');
font-weight: normal;
font-style: normal;
}
and in CSS:
BODY
{
font-family: 'someFont', Fallback, sans-serif;
font-size: 12px;
...
}
This worked for me when I had issues wityh embedding a custom font.
I really need help with #font-face code.
IT doesn't seem to see my font file.
I tried changing the path to anything I could think of, made new folders, renamed existing ones, put the font file in my root etc.
I'm testing in Firefox and Chrome.
Here are the codes that I tried in my CSS:
src: url(http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(http://www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(../wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/thefalltheme/images/Univers.ttf);
src: url(../thefalltheme/images/Univers.ttf);
src: url(thefalltheme/images/Univers.ttf);
src: url(/images/Univers.ttf);
src: url(../images/Univers.ttf);
src: url(images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/Univers.ttf);
src: url(/Univers.ttf);
src: url(Univers.ttf);
src: url(../Univers.ttf);
Can you find out where I should put the font file or what to change in my CSS to get it to work?
(I also checked the similar questions here and elsewhere on the net and tried using this website to no avail.)
Thanks!
UPDATE:
bozdoz's suggestion doesn't work.
I used FontSquirrel to get the fonts.
This is the CSS:
#font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1{ font-size: 110px;
font-family: 'lane', georgia, serif;
color: #000000;
}
I used the name 'lane' just because bozdoz had it.
All of the fonts are here:
http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/
and these are their names:
univers-webfont.eot, univers-webfont.woof, univers-webfont.ttf, univers-webfont.svg
Are you using it correctly? Here is the format for #font-face. Notice the number of files. You can use Font Squirrel to create all of the necessary fonts for cross-browser compatibility. Also, it looks like you're using WordPress. I believe you have to use absolute paths (i.e. the first one in your list) in CSS on WordPress. Hope this helps.
<style>
#font-face {
font-family: 'lane';
src: url('type/lanehum-webfont.eot');
src: url('type/lanehum-webfont.eot?#iefix') format('embedded-opentype'),
url('type/lanehum-webfont.woff') format('woff'),
url('type/lanehum-webfont.ttf') format('truetype'),
url('type/lanehum-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.font { font-family:"lane", arial, serif; }
</style>
You want to do something like this:
#font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
The font definition file must be relative to your css file. So if your css is at:
/Content/css/main.css
Then your font must be located in the same folder. If you specify
#font-face { font-family: Delicious; src: url('fonts/Delicious-Roman.otf'); }
Then your font definition would be at
/Content/css/fonts/Delicious-Roman.otf
You might want to verify that your server is not blocking your fonts from being downloaded. Try the URL and see if you get a 404 or 403 at the given url.
You should try fontSuirrel's generator, their scripts have been vastly tested and compliant with many browsers. Choose advanced settings when generating your fonts. Certain browsers may not have the ability to use ttf as a font so they provide you with eot woff and ttf
My suggestions from the comments as an answer:
Try with quotes:
url("Univers.ttf");
Check you have font-family or otherwise you cannot use your font in your code:
font-family: "MyFontName";
Your custom font family you would use in css like:
p { font-family: "MyFontName", Arial, sans-serif; }
First of all, thank you all for your great, great help!
There was no problem with the #font-face code.
The problem was with my overall CSS.
You see, my CSS was written like this:
/*
Info
*/
#media screen {
* {
margin: 0px;
padding: 0px;
}
html { background: black url(images/bg.jpg); }
body { font: 14px/1.4 Georgia, serif; }
article, aside, figure, footer, header, nav, section { display: block; }
#font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
etc.
The problem was that #font-face wasn't seen because it was after #media screen!
After I put it in front of #media screen and after /* Info */ it worked flawlessly.
Also, seems like I can use absolute and relative paths when using Wordpress...
Once again, thank you all for all your help!