I'm using a customized webfont on my page and I'm having some rendering issues in different platforms. The alignment of the text in the blocks is somewhat different in linux and windows. Here's an example:
Chrome in Linux:
Chrome in Windows:
They're both using the same version of the font (otf), the styles are exactly the same (same line-height and margins).
Here's the source of the font-face:
#font-face {
font-family: 'Calibre Regular';
src: url('fonts/Calibre-Regular.eot') format('embedded-opentype'),
url('Calibre-Regular.otf') format('opentype'),
url('fonts/Calibre-Regular.woff') format('woff'),
url('fonts/Calibre-Regular.ttf') format('truetype'),
url('fonts/Calibre-Regular.svg#Calibre-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
Is there any way to solve this?
This is can be caused by webkit when rendering custom fonts try using -webkit-font-smoothing. The default value of which is subpixel-antialiased. Try setting:
h1,h2,h3,h4,h5,h6 {
-webkit-font-smoothing: antialiased;
}
Alternative solution
If the above doesn't work then this may work, I had a similar issue before with chrome and randomly found this fix on the interent. Not sure where but it basically forces Chrome to use the SVG version of the font.
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'nameOfFontFamily';
src: font-url('url/to/svgfont.svg') format('svg');
}
}
Browsers render elements different - could be the issue even if its the same browser. Define margin, padding and line-height in your CSS - you could use a 'reset.css'.
Try this:
p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
line-height: 1.4;
}
Related
I have downloaded a folder full of svg and otf-files. They contain a font that I would like to use in my html-document. Here's what the folder looks like:
First question:
Which of the files should I use? I understand that "process.svg" and "process-yellow.svg" probably have different colors, BUT, when we have one "process-yellow.svg" and one "process-yellow.otf", which one should I use?
Second question:
How do I use the font in my HTML document? So far I've tried this:
In the html16.html style-element:
<style type="text/css">
#font-face {
font-family:'Process';
src: url('/fonts/process.svg#process') format('svg');
}
p.text1 {
width: 140px;
border: 1px solid black;
word-break: keep-all;
font-family: 'Process';
}
</style>
In the html16.html body-element:
<body>
<b>word-break:keep-all</b>
<p class="text1">Tutorials Point originated from the idea that there exists-a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
But it doesn't do anything to the font. It just looks like it would look without me changing the font.
EDIT: It should be added that importing woff-fonts works for me, like I did here:
#font-face {
font-family:Process;
src: url(https://www.tutorialspoint.com/css/font/SansationLight.woff);
}
If web embedding is allowed. You can generate other font type files from here, which works for the older browsers.
#font-face {
font-family: 'Process';
src: url('/fonts/process.eot') format('embedded-opentype'); /* IE9 Compat Modes */
src: url('/fonts/process.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/process.woff') format('woff'), /* Modern Browsers */
url('/fonts/process.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/process.svg#process') format('svg'); /* Legacy iOS */
}
This should work. Please check with below syntax.
#font-face {
font-family: novalight;
src: url('/static/src/fonts/novalight.otf');
}
.proximanovalight {
font-family : novalight, sans-serif;
}
Try This - Import like so,
#import url('https://fonts.googleapis.com/css?family=El+Messiri');
Then use:
font-family: 'El Messiri', sans-serif;
I have a select element in my DOM, and I'm applying my own font through some CSS:
#font-face {
font-family: myFont;
src: url('myFont.woff');
}
body select{
font-family: myFont;
}
In Chrome, Firefox and IE the font looks fine. But in Safari v9.0.2, once the select is clicked, the font is lost.
I inspected it using WhatFont and got the following:
So it looks like this -apple-system - regular font has overwritten my own.
Is this standard Safari behavior?
Can I do anything about it?
try this i hope it will be work.
<style>
#font-face {
font-family: 'BebasNeueRegular';
src: url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.eot?') format('eot'),
url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.woff') format('woff'),
url('https://cdn.css-tricks.com/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.ttf') format('truetype'),
url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
I'm trying to load local fonts with custom names. Everything works perfectly in all browsers except IE, as always. The font isn't being rendered in bold or italic. I can't seem to understand what I'm doing wrong here.
Here is a demo:
http://jsfiddle.net/maitreyjukar/5ga5k2oa/
I am loading the font using the following CSS
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
font-weight: normal;
font-style: normal;
}
for all combinations of font-weight and font-style.
This is not only not an IE-specific issue it doesn't work on other browsers like Firefox.
Just write one font-face Rule istead of four like this:
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
}
Here is My Solution: http://jsfiddle.net/deepak__yadav/1eed9na5 i hope you will understand what you did wrong.
It's not an IE-specific issue - I'm on Firefox 38 and it doesn't work here either...
local sources are usually used to search on a user's machine before pointing to a URL, in order to speed things up.
However, you seem want to solely use locally installed fonts with a certain fallback order.
To achieve this, you could simply do the following:
body {
font-family: Arial, Helvetica, sans-serif;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
Bonus tip: Combine the bold and italic classes and you don't need an additional class bolditalic.
JS-Fiddle
you can define your font like below example, this will work in all the browsers.
#font-face {
font-family: 'ProximaNovaRegular';
src: url('../fonts/ProximaNovaRegular.eot');
src: url('../fonts/ProximaNovaRegular.eot') format('embedded-opentype'),
url('../fonts/ProximaNovaRegular.woff2') format('woff2'),
url('../fonts/ProximaNovaRegular.woff') format('woff'),
url('../fonts/ProximaNovaRegular.ttf') format('truetype'),
url('../fonts/ProximaNovaRegular.svg#ProximaNovaRegular') format('svg');
}
How can I add more that one font in a CSS file? I have tried the following but it doesn't seem to work.
#font-face {
font-family: 'Inspira_Reg';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Bold';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Italic';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Medium';
src: url('http://myfonturl.com');
}
And then to use the font, I simply set the font-family property in the CSS IDs like so:
#titleSection {
margin: 25px 5px auto auto;
font-size: 11px;
text-align:left;
font-family: 'Inspira_Reg';
color: black;
}
But it doesn't seem to work. The font doesn't seem to get recognized, it just seems to use Arial or whatever the default is.
I am using the latest version of Google Chrome and the font types I am using are TTF files.
Thanks, Dan.
The #font-face rule allows custom fonts to be loaded on a webpage.
Once added to a stylesheet, the rule instructs the browser to download
the font from where it is hosted, then display it as specified in the
CSS.
For cross browser compatibility, It seems that font-face requires multiple definitions. For example, this is from a CSS-tricks article:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
An alternative to using this would be to use an import (which would need to be placed at the start of your css file)
Something like:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
which could then be used via:
font-family: 'Open Sans', sans-serif;
This could be used for multiple fonts, by importing them at the top of your CSS, and using the font-family declaration.
For many different fonts, and more information on using them, you could have a look here on google fonts
well every thing looks good except for the font url. you should give the local address of your font. let me give you an full example buddy:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule.</p>
</body>
</html>
so place your font the html folder and use the code :)
I have a problem with font rendering in Firefox and Chrome on Windows systems.
Here is the font face:
#font-face {
font-family: 'Museo500';
src: url('../fonts/museo500/MuseoSans_500-webfont.eot');
src: local('?'),
url('../fonts/museo500/MuseoSans_500-webfont.woff') format('woff'),
url('../fonts/museo500/MuseoSans_500-webfont.ttf') format('truetype'),
url('../fonts/museo500/MuseoSans_500-webfont.svg#webfontr3rD8cn7') format('svg');
}
and here is a input class:
input {
font-family: Museo500, sans-serif;
letter-spacing: 0;
color: #ff0000;
margin: 0px;
padding: 10px;
font-size: 20px;
font-weight: normal;
}
I cannot understand how on IE8 the font is rendered well and on Firefox and Chrome the font is not render correctly. If someone can give me a suggestion I'll be grateful.
Or maybe a font that replaces museo500, museo700.
Thank you.
I have answered a similar question here: Font-Face Not loaded
You may need to add the types via .htaccess or MIME types to IIS.