Menu
Ive googled alot trying to figure out how to embed fonts on a webpage. As i understand it you should upload the fonts to your webpage in .ttf and .eot formats. and the use @font-face in a stylesheet.
I have placed the Kingthings_Italique.eot and Kingthings_Italique.ttf in the root of my webpage.
Createt a stylesheet like this.
.MyStyle
{
/* For IE */
@font-face
{
font-family: 'Kingthings Italique';
src: url('Kingthings_Italique.eot');
}
/* For Other Browsers */
@font-face
{
font-family: 'Kingthings Italique';
src: local('Kingthings Italique Regular'),
local('KingthingsItalique-Regular'),
url('Kingthings_Italique.ttf') format('truetype');
}
}
First i refer to it like this
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
And the i try to use it like this
<asp:Label ID="lbl" runat="server" Font-Bold="True"
Font-Size="30pt" Text="TEST123" CssClass="MyStyle"></asp:Label>
But no matter if i use ie8 or chrome2 the font isnt changed.
If I understand http://randsco.com/?p=680&more=1&c=1 correct it should be possible
If I open the source in ie8 should I then be able to see the font name? because if I search for king through the ie8 code i find nothing
951
To change font type purely with HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
Complete HTML/CSS Course 2022 Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.
In order for the embedded font feature to work (in browsers supporting it) you've also got to apply the new font-family to a style selector.
For instance
h1 {
@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
}
won't do the trick, even though it will indeed load a font (if it's a valid URL) -- because all we've done is load the font. We still need to actually apply it, so
@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
h1 {
font-family: CustomFont;
}
both loads the custom font and applies it to your CSS selector (in this example, h1).
You'll almost certainly want to read a tutorial about @font-face (Krule has already suggested a good one above with links to free fonts which can be used with it.) Ditto to all the warnings above about graceful degeneration, as this is still not a universally supported feature.
134
This isn't really something you can, or should do. The majority of the web has settled on some basic fonts (serif, sans-serif etc) and it is then up to the browser to decide. You can specify multiple fonts and have the browser downgrade if it isn't available:
font-family: Kingthings Italique, sans-serif
This is probably the best strategy, if people have the font it will display, otherwise it will become a generic font.
26
Although using @font-face is still not recommended due to lack of widespread support, there is a way to use custom fonts in modern browsers (most of them). However don't forget to provide backup solution for graceful degradation in older browsers.
Anyway, you should check this tutorial for more details.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
