I am trying to get a hosted Avenir LT W01_55 Roman webfont to display in an HTML email for iOS devices.
The font is hosted here 'http://fast.fonts.net/cssapi/af395689-2c2c-43f9-9e8f-68fdef40ecac.css'
I am using the #import method like this in the head tags
'<style type="text/css">
#import url('http://fast.fonts.net/cssapi/af395689-2c2c-43f9-9e8f-68fdef40ecac.css');
td {
font-family: 'Avenir LT W01_55 Roman', Arial, Helvetica, sans-serif;}
.bold {
font-family: 'Avenir LT W01_55 Roman', Arial, Helvetica, sans-serif;}'
And reference it in the HTML content like this.
'<td style="border-collapse: collapse; font-family:'Avenir LT W01_55 Roman', Arial, Helvetica, sans-serif; font-size:25px; line-height:34px; color:#1d1d1d; margin:0;font-weight:bold;">'
It works on the web version but not after sending the test emails. Am I coding it incorrectly?
Related
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
#font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
This bit of code is available on https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face. It is supposed make the sentence "This is Bitstream Serif Bold" appear in the VeraSeBD font. However it simply does not.
I can change fonts to arial for example. Using this code, the font is different:
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
#font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: arial }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
How does one proceed when even copy pasting sample code still does not make it work?
The setup for the test is using a PHP server running on localhost on a windows machine
If this does not work then it is probably CORS you're dealing with. Please do not use the java2s website as a reference for html and css because this site is very very old and not up-to-date.
First, the browser will try to load the modern woff2 font. If it fails then it will try to load the older woff font. The ttf font is a fallback for very old browsers/devices. At the end, if no fonts can be loaded , it falss back to the default serif font.
edit all fonts fail to load. Reason: they has been blocked by CORS policy.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Font Sample</title>
<style>
#font-face {
font-family: 'Bitstream Vera Serif Bold';
font-style: normal;
font-weight: 400;
src: local('Bitstream Vera Serif Bold'),
url('https://mdn.mozillademos.org/files/2468/VeraSeBd.woff2') format('woff2'),
url('https://mdn.mozillademos.org/files/2468/VeraSeBd.woff') format('woff'),
url('https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf') format('truetype');
}
body {
margin: 0;
font-family: "Bitstream Vera Serif Bold", serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
I changed the code into this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Font Sample</title>
<style>
#font-face {
font-family: 'Bitstream Vera Serif Bold';
font-style: normal;
font-weight: 400;
src: url(VeraSeBd.ttf)
}
body {
margin: 0;
font-family: "Bitstream Vera Serif Bold";
font-weight: 400;
font-size: 50px;
line-height: 1.5;
}
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
And downloaded the font, and placed it in the root directory
It seems to have fixed the problem. Thank you for your assistance
I'm trying to replicate a simple example from MDN and it's not working.
html file
<body>
Hello world!
</body>
css file
#font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", Arial;
font-size: 10rem}
Live codepen example.
Google served font like Montserrat has a lot of different styles:
Thin, Extra-Light, Light, Regular, etc...
I could not find a way to specify a style with CSS.
Using Font-weight can access only some of them as can be seen in this CodePen
<link href='//fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800'
rel='stylesheet' type='text/css'>
<p class="w100">This is 100 weight</p>
body {
padding: 0 20px;
font-family: 'Montserrat';
font-size:40px;
}
.w100 {
font-weight: 100;
}
I want to use the Extra-Light style, but regular is the lightest I get.
Is there a straight forward solution to this?
Update:
It was a browser problem. My Chrome has issues with fonts. The code i posted works just fine.
The Google fonts page will actually tell you how to do it and includes a weight select utility. If you want the thinnest style, this is it for Montserrat (different fonts have different weights available):
HTML:
<link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">
Compare that to yours, it has redundant weights and two errors (href='// instead of href="https:// and hin instead of thin)
CSS:
font-family: 'Montserrat', sans-serif;
font-weight: 100;
If you want additional weights, add them like this:
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300" rel="stylesheet">
Remember that you only want to specify those that you are actually going to use, as they will need to be downloaded, hence increasing your page's load time.
Here is a working example for Montserrat. If 100 isn't thin enough for you, you're out of luck.
* {
font-family: 'Montserrat', sans-serif;
}
.w100 {
font-weight: 100;
}
.w200 {
font-weight: 200;
}
.w300 {
font-weight: 300;
}
.w400 {
font-weight: 400;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400" rel="stylesheet">
</head>
<body>
<p class="w100">This is 100 weight</p>
<p class="w200">This is 200 weight</p>
<p class="w300">This is 300 weight</p>
<p class="w400">This is 400 weight</p>
</body>
</html>
After importing the font link from google fonts in your index.html. Create a global.css file consisting css code of Montserrat font family with different font weights.
I'm using this font in my react project.
import or link font from google fonts. Mine looks like this
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
</style>
It's very useful for you to go through the css file to use each variant in font family.
.thin {
/* Montserrat Thin = 100 */
font-weight: 100;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.extralight {
/* Montserrat Extra Light = 200 */
font-weight: 200;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.light {
/* Montserrat Light = 300 */
font-weight: 300;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.regular {
/* Montserrat Regular = 400 */
font-weight: 400;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.medium {
/* Montserrat Medium = 500 */
font-weight: 500;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.semibold {
/* Montserrat Semi-bold = 600 */
font-weight: 600;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.bold {
/* Montserrat Bold = 700 */
font-weight: 700;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.extrabold {
/* Montserrat Extra Bold = 800 */
font-weight: 800;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.black {
/* Montserrat Black = 900 */
font-weight: 900;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
I am using the Chrome browser and I have set up my html as follows:
html {
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
It's my understanding that this would normally mean that a 1rem is equal to 10px. I have more CSS below:
table.code pre > code {
margin: 0;
font-family: "xxxConsolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-size: 1.6rem;
}
HTML:
<table class="code">
<tbody>
<tr>
<td>01</td>
<td><pre><code>xxx</code></pre></td>
</tr>
</tbody>
</table>
However the text appears big and when I check it's equal to 20px.
Can someone explain what's happening?
You need to normalise the base font size for more than just the html element. <code> is inheriting some size from <pre>.
html, pre {
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
DEMO fiddle
My previous answer works but I'm not convinced it does so for the right reasons.
Sizing both pre and code works and doesn't seem such of a hack:
replace
table.code pre > code {...
with:
table.code pre, table.code code {
margin: 0;
font-family: "xxxConsolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-size: 1.6rem;
}
UPDATED DEMO fiddle
I am trying to embed css style sheet in one of the html but its not working.Can anyone help me out ,your help would be appreciated.
Following is the cide which i have tried.
Css:
<head>
<title>Embedded Style Sheets</title>
<style type=”text/css”>
<!--
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
-->
</style>
</head>
HTML:
<html>
<head>
<title>Embedded Style Sheet </title>
<link rel=”stylesheet” type=”text/css”
href=”D:\SelfStudy\HTML\16-Embedded.css” />
</head>
<body>
<p>This page is using an emebedded style sheet... </p>
</body>
</html>
Remove all HTML markup from the CSS file. It should contain only what you now have between <!-- and --> (without those constructs). In the HTML document, fix the link tag as follows, assuming that the CSS file is in the same directory:
<link rel="stylesheet" type="text/css"
href="16-Embedded.css" />
Your .css file should just be the styles like:
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
The css file shouldn't have the html tags or you can add the styles to the head of the html file where it is being used.
http://www.w3schools.com/css/css_howto.asp
I think you are trying to embed an external CSS source file. You know we can embed css in html in three ways and they are:
1. External
2. Internal and
3. Inline
I think here you are trying to embed the first one.
To do so firstly you have to create a file with .css extension and it may be something like you mentioned 16_embeded.css. In this file you have to put just the CSS code not any HTML tags. That means you should put just the following code into your 16_embeded.css file.
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
Now you have to create another file with the extension .html and then put the HTML code portion you mentioned above in this file(.html). Hope it's working well.
Please check the href portion where you are giving the file name is correct or not. Here I should mention that your HTML code portion is correct if the css file path is correct.
Thanks