Hey so I'm having a little font trouble. I have this font I'm using for a project, however it will only display correctly in chrome. When I try to switch to a different browser it doesn't show up at all and the default font-type displays. Anything I can do to make sure my font will display in every browser heres the snippet of my code.
#p1{
position:relative;
font-family: "Didot HTF";
font-size:120%;
top: 300px;
text-align:center;
white-space: nowrap;
}
<div id="p1">
Content, storytelling and strategy for the multi-screen, multi-channel age
</div>
if you use non-standard fonts in a project I advise you to use # font-face, it needs to use the service to transfer a default font in web font, web font ready to connect like this
#font-face {
font-family: 'SegoePrint';
src: url('../fonts/SegoePrint.eot?') format('eot'),
url('../fonts/SegoePrint.woff') format('woff'),
url('../fonts/SegoePrint.ttf') format('truetype'),
url('../fonts/SegoePrint.svg#SegoePrint') format('svg');
}
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'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'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;
}
on my website my font does not seem to be loading. I added the abel font family to my code. Here is a snippet of what i have tried.
<p style="margin-left: 620px; margin-top: -355px;"
<span style="font-family: 'font-family: 'Abel', sans-serif; font-size: 16px;">Random</span>
</p>
I have tried multiple things including css and nothing seems to work. I know this is a simple concept but i would just like to know how to fix it. I am using bootstrap aswell if that seems like it may cause an issue please tell me.
thanks
You have to load the server path of your font by css:
Check this post to know how to do http://www.newvibe.ca/92weblessons
#font-face {
font-family: 'Bebas Neue';
src: url('http://www.example.com/css/font/BebasNeue.eot'); /* IE9 Compat Modes */
src: url('http://www.example.com/css/font/BebasNeue.eot?#iefix') format('embedded-
opentype'), /* IE6-IE8 */
url('http://www.example.com/css/font/BebasNeue.woff') format('woff'), /* Modern
Browsers */
url('http://www.example.com/css/font/BebasNeue.ttf') format('truetype'), /* Safari,
Android, iOS */
url('http://www.example.com/css/font/BebasNeue.svg#svgFontName') format('svg'); /*
Legacy iOS */
}
Hope this will help you ;)
Try:
<span style="font-family: 'Abel', sans-serif; font-size: 16px;">Random</span>
I'd put the style on the < p> tag not the span tag, I've had issues trying to do that in the past.
Also as an alternative might want to put your style in an external CSS file and just create a class that you assign to your p tag :)
external will make your life alot easier