From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
And that's how it looks on my website :
Any ideas?
Looks like the browser is trying to display the font bold and repeating the gray pixels (from the thin lines) next to each other. Try using font-weight: normal (The font-weight:bold is inherited from the h1 element).
Related
I have a html form generator like this. In this form generator users only can select a font icon from list. I did like it but I need to add new option that user can add custom font icons and uses it.
For implementing this option I try to do it like The Beginner's Guide to Icon Fonts in WordPress but I encountered a issue.
In downloaded custom icon font files exist a style.css file that I added content of them to my website CSS file (I have one CSS file and I can't add two css file for custom icon file) like this:
#font-face {
font-family: ico1;
src: url('fonts/ico1.eot?411a7m');
src: url('fonts/ico1.eot?411a7m#iefix') format('embedded-opentype'),
url('fonts/ico1.ttf?411a7m') format('truetype'),
url('fonts/ico1.woff?411a7m') format('woff'),
url('fonts/ico1.svg?411a7m#ico1') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: ico2;
src: url('fonts/ico2.eot?gz3b2b');
src: url('fonts/ico2.eot?gz3b2b#iefix') format('embedded-opentype'),
url('fonts/ico2.ttf?gz3b2b') format('truetype'),
url('fonts/ico2.woff?gz3b2b') format('woff'),
url('fonts/ico2.svg?gz3b2b#ico2') format('svg');
font-weight: normal;
font-style: normal;
}
i {
font-family: ico2, ico1 !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
If user generates multiple icon fonts with same content ("\e901") like below:
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And uses this html file:
<i class="icon-comprehensive"></i> // First font icon (ico1)
<i class="icon-document-center"></i> // Second font icon (ico2)
Only the first one ("ico1") is applied for both of i tags. I think this issues related to
font-family: ico2, ico1 !important;
Is there any way to do it?
Thanks advance.
I found a solution for you.
i {
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon1{
font-family: ico1 !important;
}
.icon2{
font-family: ico2 !important;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And in HTML:
<i class="icon1 icon-comprehensive"></i> // First font icon with .icon1 class
<i class="icon2 icon-document-center"></i> // Second font icon with .icon2 class
I am using footable in my rails application.I implemented sorting and pagination for a page.Sorting and pagination working fine.But sortable glyphicon icon not showing on table headers.
I have included
In style sheets
footable.core.css
fonts
footable.eot
footable.svg
footable.woff
footable.ttf
In javascript directory
footable.all.min.js
But I didnt get those icons.Is there anything I am missing.Help me.
Hei there, I had the same problem. I just used the predefined Glyphicons instead of the footable ones and it worked.
In the footable.core.css modify like this:
#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'); font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: 'Glyphicons Halflings';
src: url('~/fonts/glyphicons-halflings-regular.svg#footable') format('svg');
font-weight: normal;
font-style: normal;
}
}
.footable.breakpoint > tbody > tr > td > span.footable-toggle {
display: inline-block;
font-family: 'Glyphicons Halflings';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
padding-right: 10px;
text-align:center;
font-size: 14px;
color: #888888;
}
.footable > thead > tr > th > span.footable-sort-indicator {
display: inline-block;
font-family: 'Glyphicons Halflings';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
padding-left: 5px;
}
And voila! It should work. In the code above i just show the snippets that had been modified. For the glyphicons just search "bootstrap glyphicons hex" and will find the codes for any icon you wanna use.
I am trying to embed a font with css #font-face as a light font. It works fine in Firefox, but not in IE11. In IE11 font-weights bold and regular work fine, but not font-weight light. In the following code, the text displays as Oswald regular:
#font-face {
font-family: Oswald;
font-weight: 300;
src: url('oswaldlight.eot');
src: url('oswaldlight.eot?#iefix') format('embedded-opentype'), url('oswaldlight.woff') format('woff'), url('oswaldlight.ttf') format('truetype');
}
div.h-title {
font-size: 62px;
letter-spacing: 3px;
font-family: Oswald, sans-serif;
font-weight: 300;
color: #7a7a7a;
text-transform: uppercase;
line-height: 1.3em;
}
I have reviewed the the following similar posting, but the solution they recommend does not work.
#font-face IE9 font-weight doesn't work
In the following code, the text actually displays as sans-serif:
#font-face {
font-family: Oswald-light;
src: url('oswaldlight.eot');
src: url('oswaldlight.eot?#iefix') format('embedded-opentype'), url('oswaldlight.woff') format('woff'), url('oswaldlight.ttf') format('truetype');
}
div.h-title {
font-size: 62px;
letter-spacing: 3px;
font-family: Oswald-light, sans-serif;
color: #7a7a7a;
text-transform: uppercase;
line-height: 1.3em;
}
Any ideas how I could resolve this?
Edit:
Chrome is somehow rendering the fonts i use via #font-face incorrectly. Which i found as i changed the font family of the inspected element to arial. The reason this might be, is because as i was searching for a fix on how chrome renders fonts so they appear more smooth instead of pixelated, i found that you could swap the order of the font formats and put the svg on top which would cause chrome to render it perfectly. As seen here.
So either the order is messing them up, or simply the font is broken in some way.
Now the question is, how do i use this font without breaking the site and keeping the fonts smooth?
Here is the #font-face code i use:
#font-face {
font-family: 'alegreya_scregular';
src: url('../includes/fonts/alegreyasc-regular-webfont.eot');
src: url('../includes/fonts/alegreyasc-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/alegreyasc-regular-webfont.svg#alegreya_scregular') format('svg'),
url('../includes/fonts/alegreyasc-regular-webfont.woff') format('woff'),
url('../includes/fonts/alegreyasc-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.eot');
src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg'),
url('../includes/fonts/droidsans-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'droid_sansbold';
src: url('../includes/fonts/droidsans-bold-webfont.eot');
src: url('../includes/fonts/droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-bold-webfont.svg#droid_sansbold') format('svg'),
url('../includes/fonts/droidsans-bold-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have some rendering issues on chrome. For some reason, the links right side gets cut off so the underlines will only fill half the of text, and the divs on the right side will not break off the words to a new line. It only happens some of the time and if i refresh the page a couple of times (differs how many times) it will fix itself eventually. Images are below.
Note: The site is in danish.
Images, underlined the issues in red:
http://i.stack.imgur.com/zJHXD.jpg
What causes this, and how do i fix it?
Note: This is for the navigation links
HTML:
<ul class="nav">
<li class="first"></li>
<li>Forside</li>
<li>Booking</li>
<li>Galleri</li>
<li>Begivenheder</li>
<li>Events</li>
<li>Politik</li>
<li>Kontakt</li>
</ul>
CSS:
.header .nav {
position: absolute;
overflow: hidden;
font-size: .70em;
bottom: -8px;
right: 16px;
}
.header .nav li {
float: left;
background: #171717 url(../images/site/nav_divider.png) repeat-y right;
text-transform: uppercase;
} .header .nav li:hover {
background: #1a1a1a url(../images/site/nav_divider.png) repeat-y right;
}
.header .nav .first {
width:2px;
height:31px;
margin-bottom:-0.95em;
}
.header .nav li a {
display: block;
padding: .75em .85em .75em .75em;
color: #e0e0e0;
text-decoration: none;
}
After a bit of searching on #font-face and chrome behaviour, i found a solution to the problem. Apparently moving the svg to the top will make the rendered font break the layout, so instead you should keep the original formatting and add a special media query, which will render the font smoothly in chrome while not breaking the layout.
Example:
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.eot');
src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-webfont.ttf') format('truetype'),
url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
}
I have two font face styles in my css, both are identical, but only one doesnt work in firefox? i have tried changing the speech marks, adding a local version, changing the files root, and urls, and various other things, i just cant understand why one would work and the other wouldnt, here is my code:
#font-face {
font-family: 'AlienLeague';
src: url('fonts/alien5.eot');
src: url('fonts/alien5.eot?#iefix') format('embedded-opentype'),
url('fonts/alien5.woff') format('woff'),
url('fonts/alien5.ttf') format('truetype'),
url('fonts/alien5.svg#alien5') format('svg');
font-weight: normal;
font-style: normal;
}
#title {
width: auto;
font-family: "AlienLeague", sans-serif;
font-size: 34px;
color: #fff;
float: left;
margin: 0px 40px 0px 40px;
}
I used font squirrel so please dont mention that and heres a link: http://aawilson.co.uk/assign1/ (its the top left heading "space and beyond")
Thanks in advance.