I downloaded a new font and stores in in ${RootFolder}/font.
In styles.css file I wrote:
#font-face {
font-family: roboto;
url('../fonts/Roboto-Italic.ttf');
}
h1 {
font-family: roboto;
}
In html I wrote:
<h1> hello </h1>
And still I don't see that font has changed.
Do you know what I did wrong?
Try using it like this:
#font-face {
font-family: "roboto";
src: url('fonts/Roboto-Italic.ttf');
}
h1 {
font-family: roboto;
}
Use google fonts https://fonts.google.com/specimen/Roboto
Just import this into the css. Replace the #font-face with:
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
And use like font-family: roboto;
in your font-face add src: url('../fonts/Roboto-Italic.ttf'); instead of url('../fonts/Roboto-Italic.ttf');
https://www.w3schools.com/CSSref/css3_pr_font-face_rule.asp
Related
Im trying to change my primary font on bigcartel. Heres what I have so far:
#font-face {
font-family: 'kollektifregular';
src: url('kollektif-webfont.woff2') format('woff2'),
url('kollektif-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
The font isn’t changing on my site so please let me know what to fix, thank you!
Using #font-face defines a font, but does not apply it. If you want to apply it somewhere, you can simply say:
h1 {
font-family: 'kollektifregular';
}
or if you want to use it everywhere:
* {
font-family: 'kollektifregular';
}
I want to use fontlero font for my page and I downloaded the .ttf file. And I include it in my main CSS but this gave me some other font. here is my css code:
#font-face {
font-family: FONTLERO;
src: url(fonts/FONTLERO.TTF);
}
.customfont {
font-family: "FONTLERO";
src: url('../fonts/FONTLERO.TTF') format('embedded-opentype'),
url('../fonts/FONTLERO.TTF') format('opentype');
}
.story h1 {
font-family: FONTLERO;
font-size: 120px;
}
Path should be inside the CSS folder like below
css/fonts/FONTLERO.TTF
I have a problem importing a font to my CSS file, and I can't understand the problem.
The code:
#font-face {
font-family: 'Reg';
font-style: normal;
font-weight: 400;
src: local('Reg'), url(carmelit.ttf) format('ttf');
}
body{
font-family: 'Reg';
}
This is not working, and not because I'm overriding it later on. The file "carmelit.ttf" is in the same folder as the CSS file.
format('ttf') should be format('truetype')
You can also remove the local info unless you're supporting ancient versions of IE.
You should also try like this:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Here is the Ruby on Rails view code
<style type="text/css">
#font-face {
font-family: 'MyFont';
src: url('<%= asset_path('pricedown.ttf') %>');
}
h1.my-font {
font-family: "MyFont", Verdana, Tahoma;
font-size: 50px;
}
</style>
<h1 class="my-font">the rascals</h1><hr>
The code's output is like this
The custom Font is of course loaded but I am not getting it like what I saw by opening the actual font file... Actual font file looks like this..
As you can see, letters like 'h' and 'r' not showing properly.
Is it because I missed something in the CSS part?
Try to fresh download and use the font.
h1.my-font {
font-family: "MyFont";
font-size: 50px;
}
should work
I have a bookmarklet that inserts a widget into any site's pages. The styling of the widget is being broken by a certain site that has the following CSS #font-face declaration:
#font-face {
font-family: "helvetica";
src: url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.eot?iefix") format("eot"),
url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.woff") format("woff"),
url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.ttf") format("truetype"),
url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.svg#svgFontName") format("svg");
}
The widget that my bookmarklet inserts uses helvetica everywhere and on this one site it looks horrible because the browser is mapping helvetica to the #font-face declaration of that name rather than the standard helvetica system font.
The question: is there any way to override/bypass this #font-face declaration or create another #font-face declaration that maps to the system helvetica font?
Unless the stylesheet overrides it by referencing the stylesheet with !important after your widget's stylesheet, this could work:
#font-face {
font-family: 'ProperHelvetica'; /* Make a name for the "proper" Helvetica */
src: local('helvetica'); /* Assign it to the Helvetica font on the user's system */
}
.your-widget {
font-family: 'ProperHelvetica', helvetica, sans-serif !important; /* Make everything
in your widget use the "proper" Helvetica and if the user doesn't have it,
use the site's helvetica. */
}
You can add the following css to create a custom font name that maps to a local installed font:
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica");
}
For the styling of the widget you should use this:
font-family: mycustomuniquefontname, Helvetica, sans-serif;
If you are using more font styles such as bold and italic, you have to define all of them:
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica");
}
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica Bold");
font-weight: bold;
}
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica Italic");
font-style: italic;
}
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica Bold Italic");
font-weight: bold;
font-style: italic;
}
As soon as I submitted this question I got some inspiration. What I found works is the following...
Create a the following css rule:
#font-face {
font-family: 'RealHelvetica';
src: local('helvetica');
}
In the elements that require the real helvetica system font specify the font-family as 'RealHelvetica' instead of just helvetica:
.widget {
font-family: 'RealHelvetica',helvetica,sans-serif !important;
}
Wrap your widget in an iframe. Don't know if it the best solution, but it is a solution.
http://jsfiddle.net/bwcNX/
var $frame = $('<iframe style="width:200px; height:100px;">');
$('body').append( $frame );
setTimeout( function() {
var $doc = $($frame[0].contentWindow.document.documentElement);
$doc.html("<head><title>abc</title></head><body><div>def.</div></body></html>");
$doc.find('div').append('<div>ghi.</div>');
}, 1 );
Bonus: Should future proof your widget against most other CSS or font related problems.