I used the #font-face this way
#font-face {
font-family: 'SteelTongs';
src: url('../fonts/SteelTongs.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
section.page_heading .logo a {
font-size: 40px;
font-family: 'SteelTongs';
text-shadow: 0px 2px rgba(0,0,0,0.36);
color: #fff;
text-decoration: none;
float: left;
margin-right: 25px;
Now, what happens is the sample text normally in .ttf file shows in the logo container
Edit:
See http://www.had.omarsalim.biz
Here is a screen shot:
Notice the Header
Please help
I tested in chrome and firefox
I'm also tested with the SteelTongs web font in firefox and chrome, it is not supported,the font link is
abstractfonts- steeltongs ,U just change the font.
Related
🍌 🙇♂️ 😖 👋 🐒 🥂 😢 🤔 😠 🤩 🙄 🥺 👐 😉 😠 🤯 🥒 😾 🤣 😈 😮 🙏 👍 ❤️ 😱 🥱
I am trying to replace a web based emoticon system based on a series of gif images that I implemented around 2008 sort of time with characters from the unicode set. The list of emojis that I display above is my choice of icons to replace the equivalent emoticon set I was using. Not perfect, but close enough.
Except that they are not in colour!
When I paste them , as I pasted them here into gedit, gedit displays them all in colour. However even though I took the font that I think gedit is using (Dejavu Sans Mono) loaded it into a web page using #font-face there are displays, as here in mostly black and white, with just a couple in colour. Am I doing something wrong?
Here is part of my css
.item {
height: 60px;
display: flex;
flex-direction: row;
font-family:'DejaVu Sans Mono', Helvetica, sans-serif;
scroll-snap-align:start;
border-radius: 5px;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.31);
margin:0 5px 5px 3px;
}
#font-face {
font-family: 'DejaVu Sans Mono';
src: url('/fonts/DejaVuSansMono.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
I found a solution that works on my Chrome Desktop browser, my Android Phone and my Apple Ipad.
I downloaded this font
https://github.com/googlefonts/noto-emoji/blob/master/fonts/NotoColorEmoji.ttf
Put it in my /fonts directory where the web server could find it.
and then used the following in my CSS
#font-face {
font-family: 'NotoColorEmoji';
src: url('/fonts/NotoColorEmoji.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
and
.item {
height: 60px;
display: flex;
flex-direction: row;
font-family:'NotoColorEmoji', 'Roboto', Helvetica, sans-serif;
scroll-snap-align:start;
border-radius: 5px;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.31);
margin:0 5px 5px 3px;
}
Now all my chosen emoji are in color.
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
On my website I'm using a custom font which I have uploaded. It seems to be choosing when to work intermittently. It works on some computers/browsers, but not on others. It is also mapped correctly.
This is my code:
<style type="text/css">
#font-face {
font-family: 'AgencyFBRegular';
src: url('agencyr.eot');
src: url('agencyr.eot?#iefix') format('embedded-opentype'),
url('agencyr.woff') format('woff'),
url('AGENCYR.TTF') format('truetype'),
url('agencyr.svg#AgencyFBRegular') format('svg');
}
h3 { font-family: 'Agency FB', sans-serif; font-size: 26px; font-weight:normal; text-align: left; line-height: 100%;
border-bottom: 1px solid #484848; padding-bottom: 5px; margin-bottom:7px;
</style>
I thought it was working everywhere until I used a friend's laptop to view it.
Can you see where I'm going wrong?
UPDATE:
I have updated font CSS. It seems to be working, but now not on iOS.
The following code should work:
#font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.eot") /* EOT file for IE */
}
#font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.ttf") /* TTF file for CSS3 browsers */
}
h3 {
font-family:'Agency FB', sans-serif;
font-size: 26px;
font-weight:normal;
text-align: left;
line-height: 100%;
border-bottom: 1px solid #484848;
padding-bottom: 5px;
margin-bottom:7px;
}
You need change file name of your font without Uppercase. Like this: from AGENCYR.TTF to agencyr.ttf
and in your css file:
src: url('agencyr.ttf');
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.
I have an inline heading (h1) with a background-color on the heading, but on Mac OS in both safari and Firefox it does not seem to stretch around the font. With a websafe font it works fine. Line height is set according to the font-size.
Any suggestions?
See visual expamle:
http://www.flickr.com/photos/hegerokenes/5038724235/
#font-face {
font-family: 'FedraMonoStd-Medium';
src: url('fonts/fedramonostd-medium-webfont.eot');
src: local('☺'), url('fonts/fedramonostd-medium-webfont.woff') format('woff'), url('fonts/fedramonostd-medium-webfont.ttf') format('truetype'), url('fonts/fedramonostd-medium-webfont.svg#webfontNCPrZ83i') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-size: 22px;
background-color: #999895;
line-height: 38px;
display: inline;
color: #fff;
padding: 3px;
}
try a little more padding, this should work without messing up the line-height. say
padding: 12px 3px 3px 3px;
at least it did with the font i was using...
Try floating left or display:inline-block instead, so it can be "blocky".