Hi guys I have a question
I want to use FuturaPtBook, but it isn't displayed in html as the real font.
What can I do ?
<span></span> Hello
You can use the #font-face rule.
Either obtain or create your custom font file.
Upload the font file(s) to your server under your Web root.
Add this code to either your CSS or <style> tags in the HTML header:
#font-face{
font-family: Futura Book;
src: url('the URL the file should be downloaded from');
}
I'm using the Amatic SC 700 normal from google fonts.
This is the link on google fonts : https://www.google.com/fonts/specimen/Amatic+SC .
The issue is that right now the char ? is converted in ® .
The css code I used is:
#import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);
body {
font-family: 'Amatic SC', cursive;
font-style: normal;
font-weight: 700;
}
The html looks like this :
<html> ???? </html>
This is a screenshot of the issue :
This is the jsfiddle link: http://jsfiddle.net/m4vev43a/
I tested this issue on:
Chrome Version 42.0.2311.90
Firefox 37.0.1
Opera 12.16
Any idea how I can fix this?
Are my browsers getting crazy?
Or it's a bug in the font?
Update:
When using :
#import url(http://fonts.googleapis.com/css?family=Amatic+SC);
So without the suffix :400,700 the question mark character is displayed properly.
Unfortunately using the above code + bold text is totaly messing up with the letter spacing in Chrome, Firefox, Opera.
This is a known issue with the bold version of the Amatic font, as can be seen in this bug report from November, 2011. Your font was implemented correctly, it's just that the font file itself has a bug.
A workaround is to use the regular variant for question marks. I know that's hardly a great solution but it seems there's not much else you can do.
One possible workaround I've used to recover this situation.
Note: is not perfect if you need to trust the letter spacing for each browser.
Actually the idea is :
define again the Amatic font in addition the std one, but without the :700
generate a special class to handle just the sentences with the question mark
#font-face {
font-family: 'Amatic';
src: url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5FtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
.has-question-mark {
font-family: Amatic;
}
I used Icomoon to create a special glpyh for a logo so it will always display in emails, but I cant figure out how to get it to display... I linke the font in my CSS by using
CSS:
#font-face {
font-family: "Cog";
src: url(http://oddmachine.com/links/Cog.ttf) format("truetype");
}
The code I recieved from icofont was U+e600
HTML:
<span style="font-family: Cog;">&#e600;</span>
Can anyone help me out here?
Im pretty sure you didn't use the url correct. Try
src: url('http://oddmachine.com/links/Cog.ttf') format("truetype");
My bad. I was thinking I could use a character code to insert the Icon, but rather I had to create a class and use that to display the character. I was searching in the wrong places the first time through.
If you only have one glyph in your .ttf you might want to try including it as a data uri rather than making a request #font-face
Check out this page with some explanation.
https://css-tricks.com/data-uris/
If you're including the entire font-set then I wouldn't recommend doing this, as it will make your email so large it will truncate some clients.
I want to use cusotom fonts for my website that is like this :
myfile.php
<p class="custom-fonts">here i want to apply fonts</p>
In fonts folder i have placed this font gurbaniwebthick.ttf and using it in css like this
style.css
#font-face {
font-family: "My Custom Font";
src: url(.../fonts/gurbaniwebthick.ttf) format("truetype");
}
But this is not working for me what should i do please help me with it ,
#font-face {font-family: "My Custom Font"; src: url('../fonts/gurbaniwebthick.ttf') ;}
use the font-family as
class{
font-family: My Custom Font;
}
And also I guess you are not pointing the file correctly.
Add this to your CSS file:
.custom-fonts {font-family: "My Custom Font";}
Basically with the #font-face you define that the name "My Custom Font" should point to the specified url. After that in the CSS file you can use "My Custom Font", and the browser will know where to load the file from.
Also make sure that the font file is reachable where you specified it.
Hope this helps.
You have done the first two steps you need, but there is one further step required. This is to associate your new font-face with the class of the p tag, like so:
p.custom-fonts {
font-family: 'My Custom Font'
}
You can see an example of this from Google Web Fonts: http://www.google.com/fonts#QuickUsePlace:quickUse/Family: (and some example CSS: http://fonts.googleapis.com/css?family=Wellfleet)
I have a standalone HTML document I want to distribute, without any external dependencies. I'm using a non-standard font in this document that only some of my users will have installed.
For those users that do not have the font installed, I am including a copy of the font in an embedded SVG document at the top of the <body>. (I'm using a one-glyph font for this example, the real document is using a complete font.)
<svg style="display: none;"><defs>
<font id="MyFontElement">
<font-face font-family="MyFont" />
<glyph unicode="A" horiz-adv-x="950" d="M0,0L0,100L100,100L100,200L0,200L0,300L100,300L100,400L200,400L200,500L300,500L300,600L400,600L600,600L600,500L700,500L700,400L800,400L800,300L900,300L900,200L800,200L800,100L900,100L900,0L600,0L600,100L700,100L700,200L800,200L800,300L100,300L100,200L200,200L200,100L300,100L300,0L0,0M300,400L600,400L600,500L300,500L300,400Z" />
</font>
</defs></svg>
SVG fonts do not look as nice as ordinary fonts, so I only want the SVG font to be used if the font is not installed locally. If the font was defined in an external SVG document, I could use it at a lower priority than the locally-installed font like this: (fiddle)
<style>
#font-face {
font-family: "My Font";
src: local("My Font"), url("fonts.svg#MyFontElement") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
Unfortunately, none of the obvious variations seem to work for a font in the current document: (fiddle)
src: local("My Font"),
url("./#MyFontElement") format("svg"),
url("./#MyFontElement"),
url("#MyFontElement") format("svg"),
url("#MyFontElement");
Even without a #font-face declaration, the font is already available in the document as MyFont, the font-family specified in the <font-face />. However, this will be used at a higher priority than a native font named MyFont, so it is not an solution.
I hoped that I might be able to refer to it as local("MyFont")... (fiddle)
src: local("My Font"), /* local */
local("MyFont"); /* embedded */
...but that doesn't work either.
I could give the embedded font a different name and use it at a lower priority, style="font-family: LocalFont, EmbeddedFont", but I'm allowing users to import snippets from local files into the document and those local files will refer to the font only by the standard name. It would be possible to rewrite these references when they're imported, but I don't like that solution.
How do I refer to an SVG font embedded in the current document from a #font-face declaration?
Convert the font to a data URI and embedded it in the CSS declaration: (fiddle)
<style>
#font-face {
font-family: "My Font";
src: url("data:application/octet-stream;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+CiAgPGZvbnQgaWQ9Ik15Rm9udEVsZW1lbnQiPgogICAgPGZvbnQtZmFjZSBmb250LWZhbWlseT0iTXlGb250IiAvPgogICAgPGdseXBoIHVuaWNvZGU9IkEiIGhvcml6LWFkdi14PSI5NTAiIGQ9Ik0wLDBMMCwxMDBMMTAwLDEwMEwxMDAsMjAwTDAsMjAwTDAsMzAwTDEwMCwzMDBMMTAwLDQwMEwyMDAsNDAwTDIwMCw1MDBMMzAwLDUwMEwzMDAsNjAwTDQwMCw2MDBMNjAwLDYwMEw2MDAsNTAwTDcwMCw1MDBMNzAwLDQwMEw4MDAsNDAwTDgwMCwzMDBMOTAwLDMwMEw5MDAsMjAwTDgwMCwyMDBMODAwLDEwMEw5MDAsMTAwTDkwMCwwTDYwMCwwTDYwMCwxMDBMNzAwLDEwMEw3MDAsMjAwTDgwMCwyMDBMODAwLDMwMEwxMDAsMzAwTDEwMCwyMDBMMjAwLDIwMEwyMDAsMTAwTDMwMCwxMDBMMzAwLDBMMCwwTTMwMCw0MDBMNjAwLDQwMEw2MDAsNTAwTDMwMCw1MDBMMzAwLDQwMFoiIC8+ICAgIAogIDwvZm9udD4KPC9kZWZzPjwvc3ZnPgo=") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
There's one caveat: you can't use an ID specifier (#MyFont) with a data URI like this. Therefore you can only have a single font in the encoded file, rather than having multiple and referring to them individually. (Not that you'd want to; duplicating the data for multiple embedded fonts in the declaration for each font would be a huge waste of space.)
Specify the local font name first in the css, then the embedded font name:
p {
font-family: MyFontLocalName, MyFontEmbeddedName;
}
http://jsfiddle.net/gilly3/xX6Bv/5/
If the MyFontLocalName is installed on the user's computer, that font will be used, otherwise MyFontEmbeddedName will be used.