I'd like to use Sigil to change font family to embedded ones. I believe I've made everything right in CSS. I imported the "1984" font in Sigil.
I have read this tutorial: http://www.pigsgourdsandwikis.com/2011/04/embedding-fonts-in-epub-ipad-iphone-and.html and the sample works fine with ADE 3.0 but if I open it, don't edit the file and save, it wouldn't show the embedded files.
#font-face {
font-family: 1984, serif;
font-style: normal;
font-weight: normal;
src:url("../Fonts/1984.ttf");
}
.s8{
color: #000000;
font-family: "1984.ttf";
font-size: 125.5000%;
font-style: normal;
font-variant: normal;
font-weight: bold;
letter-spacing: 0.0000em;
margin-bottom: 0.0000%;
margin-top: 0.0000%;
padding-left: 0.0000%;
padding-right: 0.0000%;
text-align: left;
text-decoration: none;
text-indent: 0.0000%;
text-transform: none;
}
What could I do?
Thanks!
font-family: "1984.ttf"; looks like it should just be font-family: 1984;
Also note that zero values in CSS (i.e. 0.0000%;) can simply be replaced with 0
Related
I have two style sheets, a ltr and an rtl version. Take the following snippet
#if $text-direction == 'ltr' {
.arrow-link:before {
content: "\e021";
font-family: 'iconfont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
display: inline;
padding-right: 5px;
vertical-align: middle;
}
}#else {
.arrow-link:after {
content: "\e023";
font-family: 'iconfont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
display: inline;
padding-left: 5px;
vertical-align: middle;
}
}
This works as expected using english. But If i swap for hebrew text the icon is palced ont he wrong side and Im not sure why. This fiddle explains better, the last span with hebrew text places the after element before.
https://jsfiddle.net/2zze9q8z/
I have used the skin editor:
http://skin.tinymce.com
to style my text editor.
However, I don't see how I can change the font type and size.
In the skin file there is a font folder and it contains:
icomoon.ttf
icomoon-small.ttf
icomoon.eot
icomoon-small.eot
etc.
On my website I style my text as follows:
font-family: Verdana,Geneva,sans-serif;
font-size: 11px;
How should I do this for the skin I have created?
first of all generate webfont:
http://www.fontsquirrel.com/tools/webfont-generator
you will download pack of files. U need to copy:
*.eot
*.woff
*.ttf
*.svg
to Skin for TinyMCE css folder
in Skin for TinyMCE, there's file named:
skin.min.css
on top of this css file you need to include font declaration
#font-face {
font-family: 'arialregular';
src: url('arial-webfont.eot');
src: url('arial-webfont.eot?#iefix') format('embedded-opentype'),
url('arial-webfont.woff') format('woff'),
url('arial-webfont.ttf') format('truetype'),
url('arial-webfont.svg#arialregular') format('svg');
font-weight: normal;
font-style: normal;
}
you will find it in stylesheet.css, which was generated in font squirrel
then find in
skin.min.css
font family declaration and replace it with font name generated by font squirrel, in my example it will by :
font-family: 'arialregular';
theoretically it should work, hope it helps!
The Verdana, Geneva font family is web safe so you will not need to add files to the font folder.
The classes that handle the editors css are as follow:
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
background: transparent;
text-decoration: none;
color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
-webkit-tap-highlight-color: transparent;
line-height: normal;
font-weight: normal;
text-align: left;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
direction: ltr;
}
So to change the font family and size you will need to add this to your css file.
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
font-family: Verdana,Geneva,sans-serif;
font-size: 11px;
}
The file that has the above code needs to be called after the Bootstrap.min.css file in the header otherwise it will be overwritten.
Hope that helps.
Try to use:
font-family: 'icomoon-small.ttf';
This will work
I am trying to make the font in h1 less bold. It seems like the letters are just to fat.
CSS:
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 110px;
text-align: center; margin: 0px; }
#font-face {
font-family: 'ballparkweiner';
src: url('ballw___.eot');
src: url('ballw___.eot?#iefix') format('embedded-opentype'),
url('ballw___.woff') format('woff'),
url('ballw___.ttf') format('truetype'),
url('ballw___.svg#ballparkweiner') format('svg');
font-weight: normal;
font-style: normal;
}
h2 { margin: 0px; text-align: center; font-size: 40px; color: #FFFFFF; font-family: Cambria;}
body {background-color: #000000;}
h3 {text-align: center; color: #FFFFFF; }
#footer { font-weight: bold; text-align: center; font-family: Audimat;
clear: both; width:48%;
border-radius: 8px;
background-color:black;
text-align:center; margin-right:auto;
margin-left:auto; color: #FFFFFF; }
From the information I gathered on-line, most said to use font-weight: lighter;
but that doesn't validate when I use the css validator. Any ideas?
Add this:
h1 { font-weight: normal; }
By default, browsers use bold weight for h1. Since your #font-face declares only normal weight typeface, (some) browsers will algorithmically bold the glyphs (i.e., make the strokes wider using some simple method).
I checked your css validate, where did you checked? Probably you checked for css2 validation. Check here this one is original/best http://jigsaw.w3.org/css-validator/validator
I actually just added the font weight line (I had it under the #font face instead )
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 110px;
text-align: center; margin: 0px; font-weight: lighter; }
some elements on my website display perfectly, while other elements of the same font look grainy and choppy. I can't figure out why since I specify the style in the same way.
Here's my website:
http://violetoeuvre.com/
The side bar navigation (me, about, writing contact) is totally fine while the paragraph, h2, and footer styles are grainy and look like a rough version of the same type face.
CSS:
/* Fonts */
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
Funky styles:
h2 {
font-family: 'Playfair Display', sans-serif, 20px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
h3 {
font-family: 'Playfair Display', sans-serif, 12px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
#foot a:link {
font-family: 'Playfair Display', sans-serif;
font-size: 15px;
font-weight: 100;
color:#000;
text-decoration: none;
letter-spacing:0.2em;
}
These are functioning fine:
#emma_home a:link{
font-family: 'Playfair Display', serif;
font-size: 75px;
font-weight: 200;
color:rgba(255,255,255,1);
text-decoration: none;
letter-spacing:-4px;
}
#nav_menu a:link{
font-family: 'Playfair Display', serif;
font-size: 30px;
font-weight: 100;
color:rgba (255,255,255,1);
text-decoration: none;
text-align: center;
letter-spacing:0.2em;
}
#side_wrapper_text a:link{
font-family: 'Playfair Display', sans-serif;
font-size: 32px;
font-style: italic;
font-weight: 100;
color:#000000;;
text-decoration: none;
text-align: right;
letter-spacing:0.2em;
}
Also, on a PC the top Emma and Navigation (writing, blog, contact) are about 20 pixels ABOVE the black line, but on my Mac, the letters touch the white like I want.
What gives with these discrepancies??
Thanks.
I think you should move font-size property from font-family tag
and add it
font-family: sans-serif;
font-size : 12px;
check this W3 Schools they define 2 properties
Browsers behave differently with css some adapt the error some not
EDIT
You can save yourself from repeating code by putting the selector that have same styles mostly and then you can overwrite that style. for ex
h2,h3 {
font-family: 'Playfair Display', sans-serif;
font-size : 20px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
h3 {
font-size: 12px;
}
I see your a link has font weight property double than you defined for other so that may be the case for a tags but i dont see any other significant difference
I was confused as to why Playfair Display appeared grainy in my headings and paragraphs, but NOT in my sidebar navigation.
After some frustration, I realized that the typeface just looks bad at a certain (small) font.
Search for Playfair:
http://www.google.com/fonts/
As you can see, Normal 400 looks very weird, but in larger, bold, or italic styles, it looks just fine. The only thing to do was to choose a similar typeface for smaller styles, so I'm using Jacques Francois.
I'm a designer that works mostly in web but occasionally print as well. I think your issue may actually be with the Playfair font itself which I have just discovered is missing certain font styles when it displays on PCs (Macs look fine). I would test with another font before losing much more time.
As far as I can see IE prefers ttf format over woff and that specific exports is wrong. I simply downloaded the google font mercurial repo any converted original (otf) files with font squirrel, now it works.
The layout for my main navigation will shift incorrectly if the font used is too large (actually if too wide).
The first font in the font family looks great at a specific font, however the second font (which will be used if they do not have the first) is too wide and will shift the layout.
I did find this similar quesiton which was because the font was too tall. The answer was to use the ex unit because it is based off height.
Is there a unit I can use for width, or is there a way to specify the font-size for each font in the font-family?
Consider supplying similar fonts as alternatives. For instance:
font-family: Arial, Helvetica, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
That way, the alternative font won't make the layout break.
Ideally for fonts I would suggest using standard classes such as x-small (extremeley small), small, medium, med-small, large, med-large, x-large etc., and use these classes for different font sizes. Only if you want something really big, you can always use <h1>, <h2> tags. I would use % as the standard for all of these. In my usage with various fonts, they rarely have broken the below classes used.
.body {
font-family: arial,helvetica,clean,sans-serif;
}
.x-small {
font-size: 77%;
letter-spacing: normal;
}
.small {
font-size: 85%;
letter-spacing: normal;
}
.med-small {
font-size: 92%;
letter-spacing: normal;
}
.medium {
font-size: 100%;
letter-spacing: normal;
}
.med-large {
font-size: 107%;
letter-spacing: normal;
}
.large {
font-size: 114%;
letter-spacing: normal;
}
.x-large {
font-size: 122%;
letter-spacing: normal;
}
.x2-large {
font-size: 131%;
letter-spacing: normal;
}
.x3-large {
font-size: 138.5%;
letter-spacing: normal;
}
.strong {
font-weight: bold;
}