I am trying to add a custom font to my website. I have tried lots of things but didn't succeed. Here is my css code:
#font-face
{
font-family: myFirstFont;
src: url('ellis.ttf');
}
body
{
margin: 0;
padding: 0;
width: 100%;
cursor: default;
font-size: 11px;
line-height: 1;
font-family: myFirstFont,arial,san-serif;
overflow:auto;
background:#ecf6f7;
}
I know this is not a cross browser case, but I am trying to make work a simple case at first.
add format("opentype"); after URL
apply font like this..
#font-face
{
font-family: 'ellis';
src: url('ellis.ttf');
}
.body
{
font-family: "ellis";
}
on both the font-family declarations add speech marks.
so add to both #font-face and body:
font-family: "myFirstFont";
Or alternatively try this to make sure all code is correct and to make sure its not the code:
http://www.fontsquirrel.com/fontface/generator
It also may sound stupid, but make sure all spellings of fonts and paths are correct.
Are you sure that the font file is being referenced in the right place? The file ellis.ttf will be referenced from wherever the Stylesheet is.
If you have your HTML page at http://website.com/page.html, but your CSS at http://website.com/css/page.css then it'll look for ellis.ttf at http://website.com/css/ellis.ttf.
Related
I am using UI-Grid, part of the AngularUI suite, but I want to switch out some of the glyphicons they use, in particular the arrows for sorting columns.
Everywhere else, I use Bootstrap's glyphicon-chevron-down or glyphicon-chevron-up on my custom tables. So basically I just want to override the UI-Grid sorting icons with the Bootstrap ones. Is there any way to do this? I've tried overriding the UI-grid sorting classes in my CSS but it doesn't seem to have any effect... maybe I'm doing it wrong though.
Here is what the Bootstrap classes look like:
.glyphicon-chevron-up:before {
content: "\e113";
}
.glyphicon-chevron-down:before {
content: "\e114";
}
Here is what the UI-grid classes look like:
.ui-grid-icon-sort-alt-up:before {
content: '\c360';
}
.ui-grid-icon-sort-alt-down:before {
content: '\c361';
}
So in my web-app's CSS file I did this:
.ui-grid-icon-sort-alt-up:before {
content: '\e113';
}
.ui-grid-icon-sort-alt-down:before {
content: '\e114';
}
This might be totally crazy, I have no idea how this stuff works under the hood.
Angular UI's Bootstrap addition is only reformatting the original bootstrap JS into Angular directives. It doesn't include glyphicons. If you add the fully angular-boostrap, you'll get what you are looking for.
You could also just download the glyphicons from bootstrap directly and put this code into your stylesheet or scss partial somewhere:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');
src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
You're changing the content correctly, but you are missing some additional properties that glyphicon uses, most importantly being the font-family.
Whenever the .glyphicon class is added to an element it adds the following:
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
So you will want to replicate those properties as well since your .ui-grid-icon-sort-alt-up likely does not have .glyphicon on it.
I would recommend adding something like this to your custom CSS as well:
.ui-grid-icon-sort-alt-up,
.ui-grid-icon-sort-alt-down {
position: relative;
top: 1px;
display: inline-block;
font-family: "Glyphicons Halflings";
/* ... */
}
To explain what is going on here, Glyphicon is using a custom font that has a bunch of icons for various Unicode characters. \e114 is a reference to a specific character in the font that they created.
You can override css based on how you arrange your <link> tags at the head of your html. For example:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/override.css" />
Moving your css after bootstrap will allow your css to "overide" bootstrap's css.
I'm using a popular posts widget on blogger and I can't get the font to change. Im using a custom font I have everywhere else on my blog. I used this css as a temporary solution
.sidebar h2.title, .sidebar h2 {
display: none;
}
this gets rid of the title, but now I'd like the title back and using:
.sidebar h2.title, .sidebar h2 {
font-family: raleway;
}
doesn't work. I've also tried with the widget Id and some other variations..
.popularposts1 {
font-family: raleway
}
Some help would be greatly appreciated :)
Edit *
I've also tried
.popularposts .widget-title {
font-family: 'Raleway', sans-serif;
}
I'm sure it's something along these lines but i just can't figure out where I'm going wrong
You need to import the font (if you haven't) and also use quotes around the font-family declaration.
#import url(https://fonts.googleapis.com/css?family=Raleway);
.your-class {
font-family: 'Raleway', sans-serif;
}
<div class="your-class">
This is in a different font.
</div>
I'm trying to change font-style for korean letters to 'dotum' (돋움) using css. Does anyone know how to do this? I downloaded dotum ttc file from cool text, moved it into my css folder, and wrote css as below, but still doesn't work.
body {
font-family: "돋움", "Dotum", tahoma;
}
You will have to declare the font first by adding the following to your css:
#font-face {
font-family: Dotum;
src: url('css/Dotum.ttc');
}
After that it's like you already did before:
body {
font-family: "돋움", "Dotum", tahoma;
}
Hope this helps!
I am trying to incorporate CSS before content.
I want to put info icon (i), which is "\e608"
#securityCodeLink:before {
content: "\e608";
}
The output looks like this
But if i try with 2701 or something like that
#securityCodeLink:before {
content: "\2701";
}
It works perfectly fine.
Can any one tell me why is this and how can i fix this?
The icon will only appear if you're using a font which supports it.
On StackOverflow (which uses a font-family of Arial, 'Liberation Sans', 'DejaVu Sans'):
\e608 renders as
\2701 renders as ઍ
I researched a lot about this and finally it get Solved..
The icon will only appear if you're using Specific Font which supports it.
In CSS we need to define the font as below.
#font-face{
font-famiy:'nameOfFont';
src: url(data:application/font-woff;charset=utf-8;base64______format("woff");
}
.requiredFont input[type=radio]{
font-family: nameOfFont;
display: inline-block;
text-decoration: inherit;
}
.requiredFont input[type=radio]{
content: "\E608";
}
.requiredFont input[type=radio]:checked {
content: "\E609";
color: reqired HEX Color;
}
Most Probably It will work...when we design the font for the content in radio button we want..
Following the advice I found via Google, I have the following SCSS, the fonts exist in the directory specified, and FontAwesome is used elsewhere successfully with the i tag.
What am I doing wrong here as a literal keeps appearing in my html?
#font-face {
font-family: "FontAwesome";
src: url('/fonts/fontawesome-webfont.eot'),
url('/fonts/fontawesome-webfont.svg'),
url('/fonts/fontawesome-webfont.ttf'),
url('/fonts/fontawesome-webfont.woff');
}
$fa-exclamation-triangle: "";
.form-error
{
color:red !important;
font-weight: bold;
padding-top: 3px;
font-family: "FontAwesome";
&:before
{
content: $fa-exclamation-triangle;
}
}
input.error
{
font-weight: normal;
background: $validation-red;
color: black;
}
What am I doing wrong here as a literal keeps appearing in my html?
I assume you mean the generated content shows as literally ?
Well, CSS does not know named entities, so unless your CSS was embedded into the HTML document directly (which from the preprocessor syntax I assume it’s not), this named entity does not get resolved as such, and is meant literally at this point.
The CSS notation for including unicode characters is \0xxxx, with xxxx being the hexadecimal character code.