I use font-face in CSS with some custom font.
#font-face {
font-family: 'Some font';
src: url('Somefont.ttf');
}
html {
font-family: 'Some font';
font-size: 16px;
}
On Mac OS everything is working perfectly but on Windows the font is displayed ugly, one letter could be bigger than another. With different font-size letters are displayed differently.
Here is the print screen, the letter "r" is bigger than other letters:
I tried to fix it with different font-face options but it didn't help.
Related
I have some CSS for a text input in a table.
input.login-form__username {
-webkit-appearance: none;
font-family: "Poppins-Regular";
width: 20vw;
}
For some reason the font-family does not work correctly in Safari on macOS. It still displays the input box in Apple's OS font. This does work correctly in Chrome and other browsers, but not Safari.
Am I missing something that would make it work?
You should see this link, some fonts doesn't work on safari like you said, to solve it you could add another equal font that works on safari, doing something like this:
code {
font-family: "Times New Roman", Georgia, serif;
}
If multiple family names are used, the browser will select the first one it finds either embedded on the page using #font-face or installed on the user's operating system.
Safari should be able to take TTF Files no matter what version.
#font-face {
font-family: 'MyFontFamily';
src: url("fonts/Poppins-Regular.woff") format('woff'),
url("fonts/Poppins-Regular.ttf") format('truetype');
}
Using the normal CSS font-face does not appear to work properly on the new Windows 10 Edge browser. Works fine on IE11 and all other browsers. Has anyone else seen this? Seems like a bug in the browser.
Here’s the CSS we’ve been using.
#font-face {
font-family: "Univers";
src: url("../fonts/univers-webfont.eot");
src: local(Univers), url("../fonts/univers-webfont.eot"), url("../fonts/univers-webfont.svg"), url("../fonts/univers-webfont.ttf"), url("../fonts/univers-webfont.woff");
font-weight: normal;
font-style: normal;
}
.button_black {
font-family: "Univers";
font-size: 18px;
color: #slb-off-black-1;
}
Short Answer
Put quotes around the font name when using the local("Font Name") syntax.
Explanation
"Univers" renders fine in both Edge and Firefox. Your "Please log in..." element, though, is targeting "Univers Condensed", which renders in Edge only if you use local("Univers Condensed") with quotes. That is probably because Edge is more strict that Firefox is. MDN says...
src URL for the remote font file location, or the name of a font on the user's computer in the form local("Font Name"). You can specify a font on the user's local computer by name using the local() syntax. If that font isn't found, other sources will be tried until one is found.
Some Snips
Here are some screen shots that show the problematic CSS and HTML on your site.
Univers Condensed
No Quotes on local()
I have imported a font in my code like this:
#font-face {
font-family: 'BYekan';
src: url('/Contents/Fonts/BYekan.eot');
src: url('/Contents/Fonts/BYekan.woff') format('woff'),url('/Contents/Fonts/BYekan.ttf') format('truetype'),url('/Contents/Fonts/BYekan.svg') format('svg');
font-weight: normal;
font-style: normal;
}
When I run my code in Chrome, sometimes some characters are shown like squares.
As soon as I resize the window, the characters go normal and they're displayed correctly!
I have <meta charset="utf-8"> in my code so the problem is somewhere else.
Any ideas? Thanx in advance.
Found the solution!
If we don't set font-size for out texts, the default font size is 1em. And apparently Chrome has problems with this font size for some fonts!
So I just set font-size something else (for example font-size: 1.001em) and now the fonts are displayed correctly :)
Try and check another font.
May be the errors in your font file.
I am curretly creating a simple website. In the contact information section, I am adding this html entry ☎ for phone (right before the phone number), and this html entry ✉ for email address (right before the email address). The idea is to display those two characters as solid black characters (or any color for that matter if I choose to change the font color in CSS).
Anyway, what I ended up with is the emoji character represented by those two codes. I do not want this. I do not want the emoji representation to be displayed. I would like to see html representation as shown in the following two links:
http://www.fileformat.info/info/unicode/char/260e/index.htm
http://www.fileformat.info/info/unicode/char/2709/index.htm
(in the two links above, notice the 'phone' and the 'envolope' at the top of the page, this is what I want).
The font I am using is 'Lucida Console', and it is part of developing a theme in WordPress.
How can I do this?
Update
This seems to be a problem with WordPress. My html is part of a WordPress theme. When I try the solution with standalone web-pages, it works. However, when I try it within a theme set of files, only emoji is displayed.
So the question now becomes, how do I ensure this works in WordPress properly?
Update 2
It is suggested that this is question is a duplicate of Inconsistent Unicode Emoji Glyphs/Symbols
This is not a duplicate question. Just because they both deal with emoji, does not make them both duplicates. My question deals with emoji showing up in a web page when using a WordPress theme, the other question deals with inconsisten emoji characters in mobile devices.
You should include a webfont with support for the characters you want to use.
To include an icon font in your CSS, use the following code :
#font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.emoji {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
You can then include your symbol like this:
<span class="icon">☎</span>
<span class="icon">✉</span>
If you don't know a webfont that supports your character, you can easily create one yourself using the Icomoon App. See also my open source Emoji icon font for an example of an Icon font with support for Emoji characters, which I created with the Icomoon App.
More info:
Create webfont with Unicode Supplementary Multilingual Plane
symbols
If I'm not wrong this is what you want
#phone{
font-family:Lucida Console;
font-size:32px;
color:red;
}
#email{
font-family:Lucida Console;
color:#e3e3e3;
font-size:30px;
}
<div id="phone">PHONE ☎</div>
<div id="email">EMAIL ✉</div>
To force the font renderer to use the non-emoji version, you can try using a Variation Selector.
<div>PHONE EMOJI ☎️</div>
<div>EMAIL EMOJI ✉️</div>
<div>PHONE TEXT ☎︎</div>
<div>EMAIL TEXT ✉︎</div>
See more: http://unicode.org/Public/8.0.0/ucd/StandardizedVariants.html
I'm trying to use the Avenir Next Condensed font at a weight 100 (so very light). It works fine on all browsers I've tried apart from iOS where it shows up as italics. Any ideas how to fix this?
Here's a test page, when viewed on an iPad (or the iPad simulator) the text is in italics.
<html>
<style>
div {
font-family: 'Avenir Next Condensed';
font-weight: 100;
font-style: normal;
}
</style>
<div>Why is this italic?</div>
</html>
There's no font on iOS called "Avenir Next Condensed", there are however fonts named "AvenirNextCondensed-Italic" and "AvenirNextCondensed-UltraLight" amongst others. When you specify a font that doesn't exist it tries to fuzzy match against the fonts it has but it doesn't always get it right. Easy fix is just to specify the correct font: "AvenirNextCondensed-UltraLight" in this case.
There's a list of fonts available on iOS here: http://iosfonts.com/