I'm almost 100% sure what I'm doing is exactly correct Here's what I have so far:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="homepage.css"/>
</head>
<body>
<div id="menu">
<p>THE BIG BLUE SITE OF SAILING KNOWLEDGE</p>
</div>
</body>
</html>
CSS:
#font-face: {font-family: "ostrich-reg"; src: url('Fonts/ostrich-regular-webfont.ttf'); }
#font-face: {font-family: "ostrich-light"; src: url("Fonts/ostrich-light.ttf"); }
#font-face: {font-family: "collab"; src: url("Fonts/ColabThi.otf"); }
#menu {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
height: 100vh;
width: 27%;
background: #2d5dac;
text-align: center;
}
#menu p {
color: white;
font-family: ostrich-reg;
font-size: 60px;
}
There's really not much there, not much room for error, so I thought it was my file. I got the file from Font Squirrel, which from what I've heard is a pretty reliable source (I've used them several times before myself), but just for fun I ran it through their webfont generator and it still didn't work. Also, I've straight up tried using another file and got the same result (it was another format as well - .0tf). So I've got no idea. Any suggestions?
By the way, I know this won't work on IE, I literally just started making the site today and I'm not too concerned with that yet.
Here's what happens when I try filtering for fonts:
So, as long as I'm doing this right, I'm pretty sure that means the fonts aren't loading. Which is weird, because I'm pretty sure the path is indeed correct... The Fonts folder is in the same folder that the .html file is in, and the fonts are directly in the Fonts folder.
I used this font on one of my project. I used something like this in my CSS file (still I use my all font in this manner only)
CSS
#font-face {
font-family: 'OstrichSansCondensedLight';
src: url('ostrich-light-webfont.eot');
src: url('ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),
url('ostrich-light-webfont.woff') format('woff'),
url('ostrich-light-webfont.ttf') format('truetype'),
url('ostrich-light-webfont.svg#OstrichSansCondensedLight') format('svg');
font-weight: normal;
font-style: normal;
}
But I used .eot, .woff, .ttf, .svg files. And yes it was working on IE8+ because I used src: url('ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),
let me know if you are facing any issue or any font file is missing I can try to find that for you.
Related
I'm using #font-face to try and load a custom font on my website, at least on google chrome.
Still, I'm having a hard time doing so... can anyone help?
<style type="text/css">
#font-face {
font-family: Folks;
url(http://www.vtxfactory.com/Folks-Normal.ttf) format('truetype'),
}
body {
background-color: #000000;
text-align: center;
color: #FFF;
font-family: Folks;
}
</style>
The font name is "Folks" but I'm only using "Folks-Normal" as I don't use the bold version. The font is already allocated on the directed url source.
You can see on http://www.vtxfactory.com/ that when you enter, font-family changes to Times New Roman and don't load my custom font.
Best Regards,
Rui Farinha.
I think you've missed required src property and semicolon at the end:
#font-face {
font-family: Folks;
src: url('http://www.vtxfactory.com/Folks-Normal.ttf') format('truetype'); //<-- semicolon
}
Change the url in the CSS to path
#font-face {
font-family: Folks;
src: url(/path/to/your/font/file/Folks-Normal.ttf) format('truetype'),
}
you can use this service too
http://www.font2web.com/
I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder.
In my XHTML i mentioned the CSS Path,
'<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />'
AND my CSS file have styles like,
#font-face {
font-family:roboto-bold;
src: url('../fonts/Roboto-Bold.tff') #ttf;
}
.UX_FontClass {
font-family: roboto-bolditalic !important;
font-size : 25px !important;
}
also mentioned XHTML in OutputText as styleClass="UX_FontClass "
Even though font is not working in any browser. What i did wrong with my code? OR Anything i missed out?
You should use google fonts, its really easy to use.
https://www.google.com/fonts#UsePlace:use/Collection:Robot
example
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Hello World</p>
</body>
You are using custom font so you need to add a few font type format as well; like ttf, eot and svg for iphone, ipad devices.
Note: Some browsers supports different font type that's why you need
ttf,svg or eot.
#font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
Remember after that you need to add this code in class UX_FontClass
.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }
The error is in defining a font named roboto-bold in the #font-face clause, but trying to use a font named roboto-bolditalic later on. That is not the same family!
Solution: make sure the names match.
You probably meant
font-family:'roboto-bold'; font-style:italic;
or, since you're defining the size too, you could use the font shorthand
font:italic 25px 'roboto-bold';
And there's no need for the !important.
Why not use Google fonts?
Place in the header of your html:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500italic,500,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
Use in your css:
font-family: 'Roboto', sans-serif;
its really easy to use in css.
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);
Here is the Ruby on Rails view code
<style type="text/css">
#font-face {
font-family: 'MyFont';
src: url('<%= asset_path('pricedown.ttf') %>');
}
h1.my-font {
font-family: "MyFont", Verdana, Tahoma;
font-size: 50px;
}
</style>
<h1 class="my-font">the rascals</h1><hr>
The code's output is like this
The custom Font is of course loaded but I am not getting it like what I saw by opening the actual font file... Actual font file looks like this..
As you can see, letters like 'h' and 'r' not showing properly.
Is it because I missed something in the CSS part?
Try to fresh download and use the font.
h1.my-font {
font-family: "MyFont";
font-size: 50px;
}
should work
How to make #font-face work in my Wordpress template ?
this is the css code
#font-face {
font-family: 'BorisBlackBloxx';
src: url ('http://www.make-sport.ru/wp-content/themes/make-sport/fonts/borisblackbloxx-webfont.eot');
src: url ('http://www.make-sport.ru/wp-content/themes/make-sport/fonts/borisblackbloxx-webfont.eot?#iefix') format('embedded-opentype'),
url ('http://www.make-sport.ru/wp-content/themes/make-sport/fonts/borisblackbloxx-webfont.woff') format('woff'),
url ('http://www.make-sport.ru/wp-content/themes/make-sport/fonts/BorisBlackBloxx.ttf') format('truetype'),
url ('http://www.make-sport.ru/wp-content/themes/make-sport/fonts/borisblackbloxx-webfont.svg#BorisBlackBloxxRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.logo a{
font-family: 'BorisBlackBloxx', helvetica, arial;
font-size: 72px;
color: #000000;
text-decoration: none;
}
this is HTML markup
<div class="grid_12">
<h1 class="logo">
MAKE SPORT
</h1>
</div> <!-- logo end -->
I read all the posts on this site and not one of them was not help me.
T tryed make different things with the paths and take the #font-face code from css to the html in the tag, nothing works
How do you think, that's wrong ?
Looks like the targeting is correct, but the font isn't read properly. Try placing the font embedding code in your main style sheet (style.css). Preferable near the top of the document.
I just looked through the source of your site.
The only place I could find that you were trying to use the 'BorisBlackBloxx' font was on .logo a, however the text in there is in an image.
It should go without saying that font files can not change the font used in images. Are you using this somewhere else on the page that I am not seeing.
Also, if thats the case, have you tried a variety of browsers?
I am trying to use a custom font for the text of part my site and am having trouble figuring out why my script isn't recognizing the font. I uploaded 'ParisJetAime.otf' to my /font/ folder off my main html folder and I included this in my script:
#font-face {
font-family: h1style;
src: url(font/ParisJeTAime.otf)
}
#text {
font-size: 30px;
color: #ffffff;
font-family: ParisJeTAime.ttf;
margin: 220px auto auto 130px
}
My test div tag looks like this:
<div id="main">
<form method="post" action="">
<div id="text">
Font Test
</div>
<input type="text" name="q" id="search" />
<input type="submit" name="submit" id="submit" value="Go!" />
</form>
</div>
Am I missing a piece of code? The text displays but in standard Tahoma rather than the one I want. Thanks!
EDIT:
USed fontsquirrel and have this as new code:
#font-face {
font-family: 'ParisJeTAimeRegular';
src: url(fonts/'parisjetaime-webfont.eot');
src: url(fonts/'parisjetaime-webfont.eot?#iefix') format('eot'),
url(fonts/'parisjetaime-webfont.woff') format('woff'),
url(fonts/'parisjetaime-webfont.ttf') format('truetype'),
url(fonts/'parisjetaime-webfont.svg#webfontysiEwOWy') format('svg');
font-weight: normal;
font-style: normal;
}
#text {
font-size: 30px;
color: #ffffff;
font-family: parisjetaime-webfont.ttf;
margin: 220px auto auto 130px ;
}
still no luck - any ideas?
You are using it wrong, it should be #font-face and the font-family defines the name you want to use, so in your case:
#font-face {
font-family: 'ParisJeTAime'; // the name you want to use
src: url('font/ParisJeTAime.otf');
}
#text {
font-family: 'ParisJeTAime', Arial, etc.; // the name you defined for your font
}
Also note that the #font-face declarations need to be on the top of your css file, before any other style declarations.
Apart from that, you are going to run into cross-browser problems as all browsers use different types of fonts so just the .otf is not going to cut it (I don´t even know which browser uses .otf...). You´ll need a list of different source files (.eot, .woff, .ttf, etc.) to get it working in the most used browsers.
Edit: After your edit, you are still using it wrong, you need an # instead of an # and you need to use the correct name in your #text:
#font-face {
font-family: 'ParisJeTAimeRegular';
src: url(fonts/'parisjetaime-webfont.eot');
src: url(fonts/'parisjetaime-webfont.eot?#iefix') format('eot'),
url(fonts/'parisjetaime-webfont.woff') format('woff'),
url(fonts/'parisjetaime-webfont.ttf') format('truetype'),
url(fonts/'parisjetaime-webfont.svg#webfontysiEwOWy') format('svg');
font-weight: normal;
font-style: normal;
}
#text {
font-size: 30px;
color: #ffffff;
font-family: 'ParisJeTAimeRegular';
margin: 220px auto auto 130px ;
}
Check this for fonts that are not web safe - fontsquirrel
One thing you need to figure out is if you have the rights to use that font. The use of fonts online (both in practice and licensing issues) is tricky. Luckily, there are a few services that makes this easy (and legal).
http://typekit.com/
http://www.google.com/webfonts