I downloaded font from google fonts website but font family is not working after
coding as mentioned below
is there anyone who can help me out...
My Font is located inside "project_dir/fonts/Opensand-Bold.ttf"...
and css file is in "project_dir/css/style.css"
and below is my css code...
#font-face{
font-family: 'myFont';
src: url('../fonts/Opensand-Bold.ttf');
}
h1{
font-family: 'myFont';
}
And below is my hthl file in "public_dir/page.html"
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
<h1>This is heading text </h1>
<p>This is paragraph text </p>
</body>
</html>
not working....
You used just .ttf format. It doesnt work all browsers. Maybe it is not compatible with your browser. Use other formats too.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
After you checked this code could you tell me the result. Is that helpfull
Related
I have a website with a custom font (Gotham Book). All containers like this:
<span>TEXT IN GOTHAM </span>
Get height of 0 on Mac (Chrome and Safari, not on Chrome for Win). Same containers work fine with other fonts like Arial, or Roboto or whatever.
The font is in the CSS like this:
#font-face {
font-family: 'Gotham Book';
src: url("/assets/fonts/GothamBook.ttf")
}
Do i have to specify something else?
I think your font was not getting loaded for some reason and you need to debug that on mac (you should check your console for any error)
I would suggest to link all font file format which you have got with that font
, see below code for example
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
I also suggest to add fallback font as if your font was not loaded it will take other font
font-family: 'MyWebFont', Arial, sans-serif;
I have a bit of code that I'm using to create barcodes using a Code39r.ttf font.
When using it on my local machine it seems to work fine
<html>
<head>
<style>
#font-face {
font-family:code;
src: url(Code39r.ttf);
}
#myFont {
color:#111111;
font-size:180px;
font-family:code;
}
</style>
</head>
<body>
<p id="myFont">123 456</p>
</body>
</html>
As soon as I try to load the font from an online source it never seems to load
https://jsfiddle.net/jhc7p69p/2/
not sure what could have gone wrong or if there is a reason for this
you use custom font you require more font file like.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
I have two local files
index.html
NotoEmoji-Regular.ttf
I have downloaded NotoEmoji-Regular.ttf from google.com/get/noto/.
The index.html contains this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Emoji</title>
<style>
#font-face {
font-family: "Noto Emoji Regular";
src: url("NotoEmoji-Regular.ttf");
}
span {
font-family: "Noto Emoji Regular";
}
</style>
</head>
<body>
Emoji: <span>🖕</span>
</body>
</html>
When I open the index.html in my browser, it does not display the text in the span in Emoji. Using Chrome DevTools (F12 in Chrome) it says the span does have the correct Noto Emoji Regular font.
How do I display an Emoji icon from this font?
1- Make sure your directory is correct.
2- You should add format of font src:
#font-face {
font-family: "Noto Emoji Regular";
src: url('NotoEmoji-Regular.ttf') format('truetype');
}
3- 🖕 is not correct with Noto Emoji font. Try with: ℹ (ℹ)
For cross browsers, you have to convert to web fonts, example:
#font-face {
font-family: 'Noto Emoji Regular';
src: url('NotoEmoji-Regular.eot'); /* IE9 Compat Modes */
src: url('NotoEmoji-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('NotoEmoji-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('NotoEmoji-Regular.woff') format('woff'), /* Pretty Modern Browsers */
url('NotoEmoji-Regular.ttf') format('truetype'), /* Chrome, Safari, Android, iOS */
url('NotoEmoji-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
In html5 i have used a custom font(Universe 55 font). I downloaded .ttf file,used with #font-face rule & checked with IE,Chrome,mobile browsers. It doesn't work, but in websites they say browsers will support this font-type.
Do i need to use any other file formats for font.
I have used #font-face rule as,
#font-face
{ font-family: 'Universe2';
src: url("C:\Users\..\Desktop\Fonts\Univers LT 55 Roman.ttf"); }
.custfont
{ font-family: 'Universe2';
font-size:25px; }
<body><div class='custfont'>This is a customized font</div></body>
You have to link it via the project for example your project is at d:/projectname inside you have font file you link it like this in CSS:
#font-face {
font-family: 'MyFont';
src: url('myfont.eot'); /* IE9 Compat Modes */
src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('myfont.woff') format('woff'), /* Modern Browsers */
url('myfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('myfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Add the Univers LT 55 Roman.ttf in your project...
Hi I am trying to learn to use font-face to add a different font to my browser but I seem to be missing something in the code because the style is not applying. Here is my code:
<div id="logo">
<img src="img/header/THANATHOS.png" alt="Logo"/>
<p>a gamers community</p>
</div>
<style>
#font-face {
font-family: 'HarlowSolid';
src: url('Fonts/normal/HarlowSolid.eot'); /* IE9 Compat Modes */
src: url('Fonts/normal/HarlowSolid.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Fonts/normal/HarlowSolid.woff') format('woff'), /* Modern Browsers */
url('Fonts/normal/HarlowSolid.ttf') format('truetype'), /* Safari, Android, iOS */
url('Fonts/normal/HarlowSolid.svg#svgFontName') format('svg'); /* Legacy iOS */
}
div#logo p{
font-family: HarlowSolid , Helvetica , sans-serif;
}
</style>
What am I doing wrong here?
Make sure you've either wrapped it in <style> /* Code Here */</style> tags, or put it in your style sheet.
Also check that the path to the file you've written that code in.
So if it's in /css/style.css and harlowSolid.woff is in root folder called fonts, then your code would need to be url('../Fonts/normal/HarlowSolid.woff')
Also check that the browser you're testing has support for font-face. Though with the conditionals you've included it should be unlikely to face a problem.
Just to confirm: The actual code you've posted is correct, so check your file exists/structured properly.
If you're using Chrome/Safari/FF, you can usually right click -> Inspect Element, look out for the red cog symbol in the bottom right corner which will denote coding/resource errors. (Click it to see the description of the problem.)
Are the second src right?
Have a look at http://www.w3schools.com/css3/css3_fonts.asp
#font-face {
font-family: 'HarlowSolid';
src: url('Fonts/normal/HarlowSolid.eot'); /* IE9 Compat Modes */
**src:** url('Fonts/normal/HarlowSolid.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Fonts/normal/HarlowSolid.woff') format('woff'), /* Modern Browsers */
url('Fonts/normal/HarlowSolid.ttf') format('truetype'), /* Safari, Android, iOS */
url('Fonts/normal/HarlowSolid.svg#svgFontName') format('svg'); /* Legacy iOS */
}