Font does not load using html - html

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

Related

How to use outside fonts in CSS

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;

How do I change the font-family of a <button> element?

This is my only CSS
#font-face {
font-family: 'thefont';
src: url('fonts/the-font.otf');
font-style: normal;
}
body {
font-family: 'thefont';
}
When I do a <button>Hi</button> the font ends up being -apple-system.
If I actually assign the font to button, it will make the font appear.
Does anyone know why it's not affecting the body and everything inside it?
In addition to the info below, to ensure your custom font is being taken into account for the button, you need to apply
button {
font-family : inherit;
font-size: 1em;
}
to all button elements.
You can inspect how they do it there:
http://purecss.io/buttons/
or there:
http://getbootstrap.com/css/#buttons
Also make sure that your font is exported in several different formats so that it is supported by all platforms.
You can use FontSquirrel Generator to export your font to all formats.
Your CSS should look a bit like that:
#font-face {
font-family: 'thefont';
src: url('the-font.eot'); /* IE9 Compat Modes */
src: url('the-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('the-font.woff2') format('woff2'), /* Super Modern Browsers */
url('the-font.woff') format('woff'), /* Pretty Modern Browsers */
url('the-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('the-font.svg#svgFontName') format('svg'); /* Legacy iOS */
}

CSS - Include multiple fonts in one CSS file

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 :)

Font won't render in different browsers

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');
}

Can Outlook 2010 use a web font in an html email?

I've tried several things, including wrapping the css. Any ideas on how to get an html email Outlook 2010 to use a webfont and not default to a preinstalled font?
Here is some of the stuff I've tried:
<style type="text/css">
#font-face {
font-family: 'thegirlnextdoor';
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /* IE9 Compat Modes */
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff') format('woff'), /* Modern Browsers */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg') format('svg'); /* Legacy iOS */
}
</style>
The following technique does not require repetitive use of conditional comments. I have tested this extensively:
Inline your web-safe font family as usual, but with an extra classname on the element. (If you're using an automatic CSS inliner, it's OK to specify your web-safe fonts with the rest of your CSS using the .webfont classname.)
<td style="font-family: arial, sans-serif;" class="webfont">Text</td>
In the <head>, override the web-safe font family with your webfont like so:
<style type="text/css">
#import url(http://mysuperjazzywebfont.com/webfont.css);
#media screen { /* hides this rule from unsupported clients */
.webfont {
font-family: "Super Jazzy Webfont", arial, sans-serif !important;
}
}
</style>
Note: wrapping the .webfont class in the simple #media screen query simply prevents Outlook 07, 10 and 13 from mistakenly using Times New Roman instead of your fallback fonts. Reference
These clients display the web font:
Apple Mail
iOS Mail
Android 4.2 Stock Mail Client
Lotus Notes 8
Outlook 2000
Outlook 2011
AOL Webmail (in browsers that support #media)
The following Outlook versions get Arial:
Outlook 2002
Outlook 2003
Outlook 2007 (instead of Times New Roman)
Outlook 2010 (instead of Times New Roman)
Outlook 2013 (instead of Times New Roman)
... and numerous other more predictable clients get Arial.
Outlook '03, '07, '10 and '13 do not support webfonts. Outlook '00 and '11 do.
You also have to be mindful of the fallback. If you put in a quoted font declaration, or a webfont in the stack, unsupported Outlook versions will revert to Times New Roman, completely ignoring your font stack. After much testing, this seems to be the best solution across all clients.
Put this in your header style tag:
#import url(http://fonts.googleapis.com/css?family=Lobster);
Use it like this:
<font style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;">
<!--[if (!mso 14)&(!mso 15)]><!--><font style="font-family: Lobster, 'Lobster', Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;"><!--<![endif]-->
Your text here
<!--[if (!mso 14)&(!mso 15)]><!--></font><!--<![endif]-->
</font>
This should work in clients that support webfonts, and gracefully fall back to the font-stack in the rest. You could also declare your outer stack in a <td> if you prefer.
Yes I know, Lobster is an ugly webfont, but it worked well for testing...
I really like Zougen Moriver's answer. Although I worry about the <head> being stripped.
I tried hiding the font stack in a conditional statement but it didn't work for me. Neither did the #import. So I wrapped each block of copy with a font tag like so:
<span style="font-family: ProximaNova-Reg, Arial, sans-serif; font-size: 16px; color: #333333; mso-line-height-rule: exactly; line-height: 20px; text-align:left;"><font face="Arial, sans-serif;">It’s an unforgettable night of friends, thrills, memories and laughs topped off with a performance by TBD on the Music Plaza stage. No senior should miss this once-in-a-lifetime experience.</font></span>
It worked during testing.
This way if the <head> ever gets stripped then the fall back to Aril remains intact.
The down side is that it's tedious work to put that <font> around every block of copy.
I like Josh Harrison's answer. But do you have to repeat this on 'mobile' breakpoints? i.e. have
#media screen {
h1 { font-family: Merriweather,Georgia,serif !important; }
h2 { font-family: Merriweather,arial,sans-serif !important; }
p { font-family: Merriweather,arial,sans-serif !important; }
}
#media screen and (max-width: 660px){
#main_table { width:92% !important; }
h1 { font-family: Merriweather,Georgia,serif !important; }
h2 { font-family: Merriweather,arial,sans-serif !important; }
p { font-family: Merriweather,arial,sans-serif !important; }
}
I personally have never tried to do this, but since you have defined the font face, I would try the following to see if it will get applied:
html, body{
font-family: 'thegirlnextdoor', sans-serif !important;
}
If you have additional preferences to the font-family on 'thegirlnextdoor' not downloading properly, you can add it after it like I have done with adding the sans-serif font-family.
Do note that if using this in a web mail client, the snippet my have undesirable effects. If that is the case, you will need to find the section to apply it to. For example, only apply it to p tags. In most case, it would probably be safest to define a class and apply it yourself:
<style>
#font-face {
font-family: 'thegirlnextdoor';
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /* IE9 Compat Modes */
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot? #iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff') format('woff'), /* Modern Browsers */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg') format('svg'); /* Legacy iOS */
}
.fancy-font {
font-family: 'thegirlnextdoor', sans-serif !important;
}
</style>
And apply it like so:
<span class="fancy-font">My e-mail title</span>
Edit
Upon finding this link and glancing over it, #font-face isn't supported by Word or Outlook. If you really want to use the font, odds are you will have to install the font to all computers that could receive the e-mail and have a suitable fallback in-case it isn't installed.