I am trying to make something really simple: add 3 fonts to an html page.
I have looked at tons of examples but none have solved my problem. Maybe I am lacking something in the way it is written. I am actually not sure.
My html:
<html>
<head>
<title>Fuentes</title>
<link type="text/css" rel="stylesheet" href="Fuentes.css">
</head>
<body>
<p class="a">This is a paragraph, shown in Roboto font.</p>
<p class="b">This is a paragraph, shown in Bellefair font.</p>
<p class="c">This is a paragraph, shown in the Kavivanar font.</p>
</body>
</html>
And my .css:
#font-face {
font-family: "Roboto";
src: url(https://fonts.google.com/specimen/Roboto) format("truetype");
}
#font-face {
font-family: "Bellefair";
src: url(https://fonts.google.com/specimen/Bellefair) format("truetype");
}
#font-face {
font-family: "Kavivanar";
src: url(https://fonts.google.com/specimen/Kavivanar) format("truetype");
}
p.a {
font-family: "Roboto", Roboto, sans-serif;
}
p.b {
font-family: "Bellefair", Bellefair, sans-serif;
}
p.c{
font-family: "Kavivanar", Kavivanar, sans-serif;
}
That's definitely not how to use Google fonts... You're not even linking to an actual font, you're linking to the support page.
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
First go to the page: https://fonts.google.com/specimen/Roboto
Then click this:
Then it will create a little box in the corner. Click that box, and you will see this. Now you have the actual code:
You should add stylesheet link in your html for each google font you want to use. eg
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
for roboto font in your html and then use font-family: 'Roboto', sans-serif;in your css.
I have looked through other peoples answers to the question and followed the instructions on google and just cannot get it to work. Here is what I have used.
#import url('https://fonts.googleapis.com/css?family=Archivo+Black|Playfair+Display:400,700i,900');
The worst part is that Playfiar Display is working fine, Archivo is not at all.
For reference, georgialee.design is the URL. (works on every browser except for internet explorer)
Thank you so much! I'm sure it'll be some silly mistake :)
In header section you import it
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
or
<style>
#import url('https://fonts.googleapis.com/css?family=Archivo+Black');
</style>
In style.css file
body{
font-family: 'Archivo Black', sans-serif;
}
Copy this code into the < head > of your HTML document:
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
In your CSS file, use the following rule to set the font-family:
// if you only want to change h1 fonts, use this selector
h1 {
font-family: 'Archivo Black', sans-serif;
}
For example:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<style>
// default font for everything in the body
body {
font-family: 'Playfair Display', serif;
}
// make all h1 Archivo
// note: if you want h2, h3 etc to be archivo as well you need to add the respective selector
body h1 {
font-family: 'Archivo Black', sans-serif;
}
</style>
</head>
<body>
<div>rest of your page...</div>
</body>
</html>
see more examples here
see here to find out more about css selectors
I am trying to use the font Lato Regular in my html/css. The problem is, whenever I load the html file, it shows the regular font (in blahblahblah). I inspected that element, and it detects that the font-family should be 'LatoWeb'. However, LatoWeb shows the regular system font. I am running this in Linux Firefox btw
This is my HTML code (html code is saved under app/views/static_pages)
<!DOCTYPE html>
<html>
<head>
<title>UPrint</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/stylesheets/Semantic-UI-CSS-master/semantic.min.css">
<script type="text/javascript" src="../../assets/stylesheets/Semantic-UI-CSS-master/semantic.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/stylesheets/landing.css">
<link rel="stylesheet" type="text/css" href="../../assets/stylesheets/latostyle.css">
</head>
<body>
<div class="landing-page-description">
<img class="ui centered medium image" src="../../assets/images/logo.png">
<p class="regular"> blah blah blah</p>
</div>
</body>
</html>
This is my css code filename landing.css (css codes saved under app/assets/stylesheets)
(Fonts are saved in app/assets/fonts)
#font-face {
font-family: 'LatoWeb';
src: url('../fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
src: url('../fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
url('../fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/Lato-Regular.ttf') format('truetype');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}
body {
background-color: #3fabad;
}
.landing-page-description {
position: relative;
}
.regular {
font-family: 'LatoWeb';
}
Please try !important. I'm not sure it's working or not. but u should try. because the default fonts overwrite our own fonts.
I was able to get a Google font for Lato. It seems that using a font from your computer is a problem with Mozilla Firefox :( have to edit about:config
This should be comment but not enough reputation
Check in your browser console (Firebug) if your paths are resolved correctly.
I have a little experience with css, and learning it day by day, but I need to figure this out.
I have a little problem with defining the styles for the page.
My page contains the following sections:
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
</head>
.
.
.
.
<article>
<header>
<h1 class="txtName">Your pathway to success starts here</h1>
</header>
<p class="txtDesc">
SomeText.................SomeText
</p>
</article>
and I have the .css file containing the following section:
article h1
{
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
The text inside the header is displayed with correct styles, however, text inside the paragraph is not displayed correctly. Looks like it is not recognizing given styles.
It displays the right font-family, but does not recognize font-weight.
What am I doing wrong here? Need some help.
Thank you
Link : https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
As you can see there is styles for fonts like "Light 300 Italic" or "Extra-Bold 800". You must select that styles for bolder or lighter fonts. Then you can use font-weight in css otherwise it doesnt works.
Dont Forget: When you select "light 300" you can use font-weight:300. So font-weight:200 is not make any differences. If you select too much font styles it will take more time to load fonts from google when opening your page. You can see performance indicator on right.
Your link tag should look like
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
You need to include each of the font weights that you want in the URL.
Your styles should be:
article h1
{
color: #0140be;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
You select which font style you want with the font-weight attribute.
JSFiddle
Using Google Webfonts in an HTML email I ran into font substitution issues in Outlook (2007,2010, etc.) that didn't occur prior to incorporating webfonts.It ignores the font stacks and goes right to Times.
This happens despite using inline fallback font stacks.
I've noticed similar issues that have been posted here before, but only as a general question, not tied to the use of webfonts. Previously all of the font fallbacks worked correctly. I'm using Litmus to conduct the email testing.
Does anyone know why this might be happening?
Link to Litmus: https://litmus.com/pub/53a33c7/screenshots
Originally linked fonts in CSS like so:
<link href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300' rel='stylesheet' type='text/css'>
I also tried using #font-face and self hosted files after seeing a possible solution in another answer, but it didn't work (I updated class names too):
Except from font-face attempted workaround:
<!--[if !mso]><!-->
#font-face {
font-family: 'droid_serif';
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot');
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif') format('svg'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff') format('woff'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
<!--<![endif]-->
Outlook specific override CSS seems to work, but there are priority issues. I don't believe Outlook recognizes the !important declaration so I've been working towards more specific selections. However, I still don't understand why this is happening and if there is a simpler fix.
Outlook Font Override Excerpt:
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
h1 { font-family: 'Georgia',serif !important; font-weight:normal; }
h1 a { font-family: 'Georgia',serif !important; font-weight:normal; }
h2 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; font-weight:normal; }
h3 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
.cover,img.cover,a.cover {
display: block;
visibility: visible;
td { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
.droid { font-family: 'Georgia', serif; }
}
</style>
<![endif]-->
Example of problematic code:
<td height="30" colspan="3" align="left" valign="middle" class="featured">
<h2 style="text-align: left; padding: 0; margin: 0; color: #00799f; font-family: 'Roboto',arial, helvetica, sans-serif; font-size: 21px; font-weight: 100; background: none; border-bottom: 1px solid #b1d6e2; text-decoration: none; line-height: 36px; mso-line-height-rule: exactly;">cover story</h2>
</td>
UPDATE:
I've tried the suggestion in the answers to put the webfont import code inside conditional tags that exclude Outlook to no avail.
<!--[if !mso]><!-- -->
#import url(http://www.example.css);
<!--<![endif]-->
AND
<!--[if !mso]><!-- -->
#import url(http://fonts.googleapis.com/css?family=Oxygen);
<!--<![endif]-->
UPDATE II (SOLUTION):
With all the help offered it's clear a number of seemingly minor issue all could cause this problem. The font-face method seems to be preferable to #import. Having the webfont name not be the same as the local font can cause the same issue, but that's just not what was happening with this particular email.
I had tried conditional code early on to hide the webfont import code from Outlook <!--[if !mso]><!--> altogether.
The problem was I did this within a CSS style tag in the head section. Simply placing this code in its own style tag as shown below made the difference.
I confirmed it's working as I was able to remove the extra workaround CSS code I had used to detect for version of Outlook 2007 and greater to restore h1, h2 values to the standard font stack.
<!--[if !mso]><!-->
<style type="text/css">
#font-face {
font-family: 'oxygenlight';
src: url('http://www----/fonts/oxygen-light-webfont.eot');
src: url('http://www.----/fonts/oxygen-light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.-----/fonts/oxygen-light-webfont.woff') format('woff'),
url('http://www.-----/fonts/oxygen-light-webfont.ttf') format('truetype'),
url('http://www.-----/fonts/oxygen-light-webfont.svg#oxygenlightlight') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
<!--<![endif]-->
UPDATE: Here is a
technique
to call webfonts with fallback to the font stack in all versions of
Outlook that break
Try declaring your webfont if NOT Outlook instead. The webfont might be problematic for Outlook, so not calling it at all might work. Worth a try...
Edit:
This issue has occured before with Outlook breaking when your first declared font is in quotes. This seems like an Outlook bug/limitation that is unavoidable unfortunately.
To get Outlook to use your font-stack instead of substituting your web-font with whatever font Outlook chooses add add a conditional comment which will only be read by Outlook to assign your font-stack backup fonts. Define your web-font but do not define it in the conditional comment so Outlook will ignore the web-font, go straight for it's conditional comment and just display Arial.
<style>
#import url('http://www.yourdomain.com/webfont.css');
</style>
<!--[if gte mso 9]>
<style>
.webfontsubstitute { font-family: arial, sans-serif; }
</style>
<![endif]-->
</head>
<body>
<a href="#" target="_blank" style="font-family:superwebfont,arial,sans-serif;">
<span class="webfontsubstitute">WEB FONT STYLED TEXT HERE</span></a>
I've been having this problem too and have just found quite a simple fix. Once you've imported your web font, #media screen { } can be used to single out clients which support media queries, and these happen to be the ones which support web fonts. Thus, simply specifying the font-family declaration inside and outside of this selector lets you hide specific fonts from email clients such as Outlook, so your next appropriate fallback font will be displayed, and your web font will appear nicely in clients that support it.
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
.h1 { font-family: 'Arial', 'Helvetica', sans-serif }
#media screen {
.h1 {
font-family: Open Sans, 'Arial', 'Helvetica', sans-serif
}
}
Incidentally, Campaign Monitor suggests that #import is better than #font-face in emails in general.
I remember having a similar issue awhile back. In the end I think it was the #import causing the problem and I had to use a different method to pull in the fonts.
Instead of using the #import go with a #font-face method.
#font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
src: local('Oxygen'), local('Oxygen-Regular'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/eAWT4YudG0otf3rlsJD6zOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
Then use the font as you would normally:
h1 {
font-family: 'Oxygen', sans-serif;
}
The issue is probably occurring because your user has locally installed version of the fonts and there is a conflict.
Try #font-face import (this is the way Google WebFonts works anyways), and simply rename the font-family to something different.
E.g.
#font-face {
font-family: 'droid_serif';
to:
#font-face {
font-family: 'droid_serif_alt';
Be sure to reflect the change in the rest of your markup!
You have to use "mso-font-alt" for Font-Fallback (Outlook 2010,2013,2016):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
....
<style type="text/css">
#font-face {
font-family: 'droid_serif';
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot');
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif') format('svg'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff') format('woff'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
mso-font-alt: 'Arial';
}
...
</style>
</head>
Another trick to override custom css declarations:
<!--[if mso]>
<style>
body,table tr,table td,table th,a,span,table.MsoNormalTable {
font-family: 'Arial', 'Helvetica', 'sans-serif' !important;
}
.custom-headline{
font-family: 'Times New Roman', 'serif' !important;
}
</style>
<![endif]-->
Please also have a look at: https://litmus.com/community/code/36-outlook-and-fallback-fonts