#font-face HattoriHanzoLight does not work - css

I downloaded the font from this site:
http://www.fontsquirrel.com/fonts/Hattori-Hanzo
Here's my code:
<style type="text/css">
#font-face {
font-family: 'HattoriHanzoLight';
src: url('hattori_hanzo.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body style='font-family: HattoriHanzoLight; font-size: 19px;'>
content
</body>
My html file and my font file are in the same directory.
Why do I still see the default font?

This code is working for me so the only way this won't work is because you either have;
the file permission is not correct
the file (from the archive is capitalize and not in your code is not)
you copy and paste from a source that has an invisible character

Related

To show characters "ă" and "â" in my website from Poppins font, I need to load 2 different font files. How can I load only one single file?

In order to show the character ă în my website, I need to load from google fonts the next font: https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2
To show the character â in my website, I need to load from google fonts the next font: https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2
Here you can see what I'm talking about:
For ă:
<style>
#font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
}
h1{
font-family:Poppins;
font-size:46px
}
</style>
<h1>ă â</h1>
https://jsfiddle.net/y75on1fb/
For ă:
<style>
#font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
}
h1{
font-family:Poppins;
font-size:46px
}
</style>
<h1>ă â</h1>
https://jsfiddle.net/z3vn9cx1/
Not sure why is this happening, but what should I do to load only one font file ?
Not sure where you got the gstatic URLs, but those appear to be locators for cached, character-subsetted variants of the Poppins Reglar font (or, maybe actually the Poppins Bold font). If you go to the Google Fonts page for Poppins and select Regular, they'll provide you with the specific lines of HTML or CSS they recommend you use to use the font in your site. For one way of doing this, use this in your HTML and CSS:
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
</style>
h1{
font-family:Poppins;
font-size:46px
}
If you want to use a subsetted font to optimize load times, you can use the Google Font API to indicate text that needs to be supported and then include both those characters (URL-encoded) in the text:
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap&text=%c4%83%c3%a2');
</style>
See https://developers.google.com/fonts/docs/getting_started or
https://developers.google.com/fonts/docs/css2 for more info on the API.

What will browser(Chromium) do if you load one and the same font file from two different locations?

What will browser(Chromium) load and use if we have the following case:
Inside css file we load local font like
<style>
#font-face {
font-family: 'Gotham';
font-style: normal;
font-weight: 400;
src: url('fonts/Gotham-400-Book.woff2') format('woff2'),
url('fonts/Gotham-400-Book.woff') format('woff');
}
</style>
and inside html we have same font loaded through some CDN like:
<link href="http://fonts.cdnfonts.com/css/gotham" rel="stylesheet">
then in our css styles we use it like
font-family: 'Gotham', sans-serif;
note Gotham is used here only for example purpose.

external css and #font-face

all. I've referenced SO often and appreciate the community and expertise. Great site! I'm a noob member, so bear with me.
PROBLEM: embedded files not loaded/displayed
ROOT DIR has two dirs: plugins and project
plugins has files mycss.css and 4 font files (2 woff, 2 ttf)
mycss.css
#font-face {
font-family: 'ALG';
src: url('ALGbvs.woff') format('woff'),
url('ALGbvs.ttf') format('truetype');
}
#font-face {
font-family: 'BVS';
src: url('BitstreamVeraSans.woff') format('woff'),
url('BitstreamVeraSans.ttf') format('truetype');
}
index.html contains (excerpts)
<head>
...
<!-- font-family: ALG and BVS -->
<link href="../plugins/mycss.css" rel="stylesheet" type="text/css" />
...
<style>
body {
font-family: ALG;
background-color: #F9EFE2;
margin: 0;
}
</style>
</head>
I thought I was referencing the css file and the fonts correctly, but they are not loaded/displayed in the body. What am I missing? Thanks for all reads and replies.
First of all use #font-face with more generalize way like,
use this font-face generator tool to generate font-face files for all major browsers Font-Face Generator
#font-face {
font-family: "ALG";
src: url("myfont/ALGbvs.eot");
src: url("myfont/ALGbvs.eot?#iefix") format("embedded-opentype"),
url("myfont/ALGbvs.woff") format("woff"),
url("myfont/ALGbvs.ttf") format("truetype"),
url("myfont/ALGbvs.svg#ALG") format("svg");
font-weight: normal;
font-style: normal;
}
Then check that you are mentioning font file paths correctly, let's assume your folder for all fonts say 'myfont' is in same folder where you have saved your css file.
Then your body tag will be like,
body {
font-family: "ALG";
}
You missed to define source in your css. Add full font url location like this:
#font-face {src: url("../plugins/ALGbvs.ttf");}

roboto font not working in css

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);

Font not loading properly

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

Resources