Hello I added a custom font in my css like this:
#font-face {
font-family: dosis;
src: url(Dosis-Regular.otf);
font-weight:normal;
}
#font-face {
font-family: dosis;
src: url(Dosis-SemiBold.otf);
font-weight:bold;
}
It works like this:
<b> This appears bold </b>
But not like this:
p{font-weight:bold;} /* in CSS file */
<p> This does not appear bold </p> /* in HTML file */
Do you have any idea what could be the problem?
it may be over-written somewhere else. try this:
p{font-weight:bold !important;}
Related
It seems this question has been asked numerous time already (such as here). But my issue does not seem to be resolved with the answers provided.
I am attempting to use multiple files for a single font. Each file is for a different style - italics, bold. I have attempted the following:
#font-face {
font-family: matrix;
src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}
#font-face {
font-family: matrix;
font-weight: bold;
src: url('../fonts/chris-simpkins_hack/Hack-Bold.ttf');
}
My HTML contains the following:
<h1>Some Text</h1>
<p><b>Some more text that is bold!</b></p>
Unexpectedly, all the text outputted on the page is using the "...bold.tff" file. Why is this?
I have been able to achieve this easily and quickly in the past and am unsure as to what is different this time.
By browser default, h1 use bold text. See W3School for details.
Simply add h1{ font-weight: normal;} to reset this.
If you don't like the default css by browser, you can use some reset.css or normalize.css.
But, normalize.css treat h1 as bold text, too.
create different classes with font face and assign those classes to expected tags
#font-face {
font-family: matrix;
src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}
.myh1 {
font-family : matrix;
font-weight : 400;
}
.myp {
font-family: matrix;
font-weight:700;
}
example
<h1 class='myh1'>Some Text</h1>
<p class='myp' >Some more text that is bold!</p>
Maybe you must use <em></em> tags for styling because is deprecated in HTML4
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
Or you try change font-weight: bold; to font-weight: 700; and add this style
b { font-weight: 700; }
try this:
#font-face { font-family: 'BrushScriptStdMedium';
src: url('brushscriptstd.eot');
src: local('Brush Script Std'), local('BrushScriptStd'), url('brushscriptstd.woff')
format('woff'), url('brushscriptstd.ttf') format('truetype');}
.classname{ font:21px bold italic Arial;}
I am using webfont in my website, sometimes font which i desired is not applied to text, In order to overcome that i want to load font while building CSSOM it self, so I tried this
body style="font-family: 'customfont'; src: url('XXXX/custom-font.woff2')"
I tried this also
body style="font-family: 'customfont';
But of no use.
You should use font-face inside style tag It might work and it's pretty fast and clean (Put it in head )
<style>
#font-face{
font-family:custom1;
src:url(XXX/fonts/XYZ.ttf);
}
</style>
then use like `style="font-family: 'custom1';
I hope It would be HelpFull
#font-face {
font-family: myFont;
src: url('XXXX/custom-font.woff2');
}
div {
font-family: myFont;
}
Try to #font-face Rule
For inline use in HTML:
<style>
#font-face{
font-family: fontname;
src: url(fontdirectory);
}
</style>
Otherwise, put this in your CSS:
#font-face {
font-family: fontname;
src: url(fontdirectory);
}
Then apply the font to the elements you want.
I have also tried the .ttf version of this font without any results. For some reason the font is not showing up. The url to the font is correct.
#font-face {
font-family: EagleLake; /*a name to be used later*/
src: url('EagleLake.otf'); /*URL to font*/
}
h1{
font-family: EagleLake;
}
Try this format instead, it definitely works:
#font-face {
font-family: EagleLake;
src: url(EagleLake.otf);
}
Your h1 style attribution should then be of font EagleLake.
i have tried adding a font to my webpage using #font-face rule but its not showing
HTML
<!-- language: lang-html -->
<ul>
<li>GREAT</li>
<li>BITE</li>
</ul>
CSS
<!-- language: lang-css -->
body{
font-family:Armata;
font-size:16px;
color:orange;
text-align: center;
background:white;
}
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
you can download the font from here : http://www.moldire.com
You need to put font-face in top of CSS.
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
body{
font-family:Armata;
font-size:16px;
color:orange;
text-align: center;
background:white;
}
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
li
{
font-family:Armata;
}
or if u want to use it for full page then apply it to body tag
Here are my steps to have the font working:
Font face first in css (already mentioned)
Have the type/format of font - EX: src: url(Armata-Regular.ttf) format('truetype')
Make sure your host (local or not) has the MIME type for these fonts
Lastly, would you consider a web font path? Save yourself time by getting a web path embedded font: http://www.google.com/fonts/specimen/Armata
Doing this will save you time skipping last bullet.
Use this on your website
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
and in CSS you will need this :
font-family: 'Armata', sans-serif;
Alright, I'm a CSS newbie so here we go. In a template I'm using there's a stylesheet
head {font-family:Verdana; font-size:16px; color:#000000;}
body
{font-family:Verdana; font-size:12px; color:#ffffff}
a
{color:#ff0000; font-family:Verdana; font-size:30px;}
bluetext
{color:#0000ff;}
tooltip{font-family:Verdana; font-size:11px;
color:#ffffff;}
So I figure it's determining what the font should be for each of these sections. What do I do if I want to use a custom font instead of Verdana for all of these sections? I have the .ttf file, but I don't know what else to do.
Thanks in advance!
First generate font for all browser like woff for Mozilla, eot for IE etc. So, you can generate from http://www.fontsquirrel.com/fontface/generator & http://www.font2web.com/ .
Then write #font-face in your CSS.
#font-face {
font-family: 'font';
src: url('font.eot?') format('eot'), url('font.woff') format('woff'), url('font.ttf') format('truetype');
}
body{
font-family: 'font';
color:#fff;
font-size:12px;
}
.head {font-size:16px; color:#000000;}
a {color:#ff0000; font-size:30px;}
.bluetext {color:#0000ff;}
.tooltip{font-size:11px;}
You need to use font-face for that. The basic implementation is:
#font-face {
font-family: CustomFontName;
src: url(http://path-to/customfont.ttf);
font-weight:400;
}
Then just use it like any other font in any other style rule.
p {
font-family: CustomFontName, Helvetica, Arial, sans-serif;
}
You must use this into your css file :
#font-face {
font-family: your_font;
src: url('your_font.ttf');
}
In order to work on IE, you should export another version of your font with .eot extension, and add another src property.
Edit:
Here is an usefull link about using #font-face : http://www.webistrate.com/css3-custom-fonts-using-font-face/
Just first install this font on your server/system/root.
& then apply like this in your css
#font-face {
font-family: 'myriadproregular'(i.e.custom font name);
src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype");
}
and if you want more than one font you can do the same
#font-face {
font-family: 'myriadprocond';
src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype");
}
#font-face {
font-family: 'myriadprosemibold';
src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype");
}
just use the font name where ever you want to use
such as
p
{
font-family:"custom font name"
}