first of all, i want to say that i searched and found many questions like this, and i almost tried every way of solving the problem. but they didn't work. and please consider that this problem is not for all of the pages in firefox. it's just for 1 page.
i have a very simple html page like this :
<html>
<head>
<meta charset="utf-8">
<style>
#font-face{
font-family: 'BYekan';
src: url('http://bloglikecms.com/tempblogfa/BYekan.eot?#') format('eot'), /* IE6�8 */
url('http://bloglikecms.com/tempblogfa/BYekan.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('http://bloglikecms.com/tempblogfa/BYekan.ttf') format('truetype'); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
}
body{
font-family: 'BYekan',tahoma !important;
text-align: right;
}
</style>
</head>
<body>
<p>سلام</p>
</body>
</html>
In safari, it works well. but in firefox, it doesn't show my custom font. this problem is just for this page. i visit many websites with custom fonts and firefox shows that pages correctly with the custom fonts. so i want to know why this happens with my page and where i did wrong.
Thanks in advance.
You can Download font files and save them in same directory where you have the html file and it will work for all browsers :
#font-face{
font-family: 'BYekan';
src: url('BYekan.eot') format('eot'), /* IE6�8 */
url('BYekan.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('BYekan.ttf') format('truetype'); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
}
Mention <!DOCTYPE html> and try once..
Related
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
I have downloaded a folder full of svg and otf-files. They contain a font that I would like to use in my html-document. Here's what the folder looks like:
First question:
Which of the files should I use? I understand that "process.svg" and "process-yellow.svg" probably have different colors, BUT, when we have one "process-yellow.svg" and one "process-yellow.otf", which one should I use?
Second question:
How do I use the font in my HTML document? So far I've tried this:
In the html16.html style-element:
<style type="text/css">
#font-face {
font-family:'Process';
src: url('/fonts/process.svg#process') format('svg');
}
p.text1 {
width: 140px;
border: 1px solid black;
word-break: keep-all;
font-family: 'Process';
}
</style>
In the html16.html body-element:
<body>
<b>word-break:keep-all</b>
<p class="text1">Tutorials Point originated from the idea that there exists-a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
But it doesn't do anything to the font. It just looks like it would look without me changing the font.
EDIT: It should be added that importing woff-fonts works for me, like I did here:
#font-face {
font-family:Process;
src: url(https://www.tutorialspoint.com/css/font/SansationLight.woff);
}
If web embedding is allowed. You can generate other font type files from here, which works for the older browsers.
#font-face {
font-family: 'Process';
src: url('/fonts/process.eot') format('embedded-opentype'); /* IE9 Compat Modes */
src: url('/fonts/process.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/process.woff') format('woff'), /* Modern Browsers */
url('/fonts/process.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/process.svg#process') format('svg'); /* Legacy iOS */
}
This should work. Please check with below syntax.
#font-face {
font-family: novalight;
src: url('/static/src/fonts/novalight.otf');
}
.proximanovalight {
font-family : novalight, sans-serif;
}
Try This - Import like so,
#import url('https://fonts.googleapis.com/css?family=El+Messiri');
Then use:
font-family: 'El Messiri', sans-serif;
I trying to use local font to apply styles in html, below is the code.Font is not getting applied for harlow class used element
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src:local("C:\Users\Website\fonts\Harlow_Solid_Italic.ttf");
}
.harlow{
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
I made the following changes and I got the result
Quotation marks for font-family
Using of URL instead of local
Changing of "\" to "/"
Note:
Use of the local css function throws an error in the developer console saying resource is not loaded. See the modified code below.
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: "myFirstFont";
src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");
}
.harlow {
font-family: "myFirstFont";
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
Use the correct path for file.
your path does not work on the host. because your host has no drive 'c:/...' or anythings like this.
so you can use
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src:url("/fonts/Harlow_Solid_Italic.ttf");
}
.harlow{
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
Use font face in all the format types according to the browser compatibility
Just add bellow code before all the styling of your css file and then you can use this font family for any selector inside within your css file.
#font-face {
font-family: 'CustomHeading';
src: url('./fonts/SFAtarianSystem.ttf') format('embedded-opentype'), /* Internet Explorer */
url('./fonts/SFAtarianSystem.ttf') format('woff2'), /* Super Modern Browsers */
url('./fonts/SFAtarianSystem.ttf') format('woff'), /* Pretty Modern Browsers */
url('./fonts/SFAtarianSystem.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/SFAtarianSystem.ttf') format('svg'); /* Legacy iOS */
}
You can do that with this code. I tried it on multiple sites and it worked pretty well.
#font-face {
font-family: myFirstFont;
src:url("D:\Files\Design\Fonts\SF-Pro-Text-Font-Family");
}
* {
font-family: myFirstFont !important;
}
How can I add more that one font in a CSS file? I have tried the following but it doesn't seem to work.
#font-face {
font-family: 'Inspira_Reg';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Bold';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Italic';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Medium';
src: url('http://myfonturl.com');
}
And then to use the font, I simply set the font-family property in the CSS IDs like so:
#titleSection {
margin: 25px 5px auto auto;
font-size: 11px;
text-align:left;
font-family: 'Inspira_Reg';
color: black;
}
But it doesn't seem to work. The font doesn't seem to get recognized, it just seems to use Arial or whatever the default is.
I am using the latest version of Google Chrome and the font types I am using are TTF files.
Thanks, Dan.
The #font-face rule allows custom fonts to be loaded on a webpage.
Once added to a stylesheet, the rule instructs the browser to download
the font from where it is hosted, then display it as specified in the
CSS.
For cross browser compatibility, It seems that font-face requires multiple definitions. For example, this is from a CSS-tricks article:
#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 */
}
An alternative to using this would be to use an import (which would need to be placed at the start of your css file)
Something like:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
which could then be used via:
font-family: 'Open Sans', sans-serif;
This could be used for multiple fonts, by importing them at the top of your CSS, and using the font-family declaration.
For many different fonts, and more information on using them, you could have a look here on google fonts
well every thing looks good except for the font url. you should give the local address of your font. let me give you an full example buddy:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule.</p>
</body>
</html>
so place your font the html folder and use the code :)
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 */
}