Custom .woff format fonts in Sendgrid - how to use? - html

I am trying to figure out how to use custom fonts in Sendgrid. Google fonts work properly, but custom .woff format font doesn´t seem to work. I have tried 3 solutions below. When I use solution nr. 1 in Preview tab it gets applied, but in the email it´s not
Would appreciate any suggestions on the problem.
1.
<head><link href="https://somelink" rel="stylesheet" type="text/css"><style>
* { font-family: 'BrownLight', sans-serif; }
</style></head>
2.
<head>
<style>
#media screen {
font-family: 'BrownLight';
src: url('somelink.woff') format('woff');
}
.text {
font-family: 'BrownLight';
}
</style>
</head>
3.
<head>
<style>
#media screen {
#import url('https://somelink');
}
* { font-family: 'BrownLight', sans-serif; }
</style>
</head>

Twilio SendGrid developer evangelist here.
I assume you have a URL where the WOFF font file itself is hosted. You can then follow what a Google Font would do, like this example.
<head>
<style>
#font-face {
font-family: 'BrownLight';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(YOUR_FONT_URL) format('woff');
}
.text {
font-family: 'BrownLight', sans-serif;
}
</style>
</head>
Though, do note that many clients do not support web fonts. You can see more on adding custom fonts in the SendGrid documentation here.

Related

How do I actually import external fonts to my website (CSS)

I searched the web and look for ways to add an external fonts to the web or CSS. I know we should use #font-face to do that. But, my website doesn't load the font when I reload. Can someone see the problems for me?
This is my codes:
<style>
#font-face {
font-family: 'vcr_osd_monoregular';
src: url('vcr_osd_mono-webfont.woff2') format('woff2'),
url('vcr_osd_mono-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
font-size: 90px;
font-family: "vcr_osd_monoregular", sans-serif;
color: yellow;
}
</style>```
Instead of printing out vcr_osd_monoregular font, it prints out sans-serif. Please help.

#font-face and #font-family not working

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.

Styling a CSS font face to have two custom fonts on a html page

I have a web page that successfully uses one of the two font-faces I have here. I want the user to be able to see a top menu div tag that is styled with the Cubano font while the rest of the text of the page will be open sans. #font-face seems to be just unique so I cant add two font-familys to it.
EDIT: Demo can be seen here on the rate1.html page.
#font-face {
font-family: 'OpenSans';
src: url("fonts/opensans.ttf") format('truetype');
font-weight: normal;
font-style: normal
}
#font-face {
font-family: 'Cubano';
src: url("fonts/cubano-webfont.ttf") format('truetype');
font-weight: normal;
font-style: normal
}
body {
font: 32px/40px 'OpenSans', sans-serif;
color: #777;
}
body div.recent {
font: 32px/40px 'Cubano', sans-serif;
color: #777999;
}
For the Open Sans you can use #import (in .css file):
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
or link it in the <head> :
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
See more options here

Doesn't show supported letters

I'm using Signika Bold as font for my headers. Font is loaded from Google Webfonts. As you can see in the demo, there is a problem with showing letter "Č", both upper and lower case. The letter is on the list of supported fonts on the official Webfonts page.
CSS:
#font-face {
font-family: "Signika";
font-style: normal;
font-weight: 700;
src: local("Signika-Bold"), url(http://themes.googleusercontent.com/static/fonts/signika/v3/7M5kxD4eGxuhgFaIk95pBRsxEYwM7FgeyaSgU71cLG0.woff) format("woff");
}
h1 {
font-family: "Signika", Helvetica, sans-serif;
}
I have also tried typing the letter as HTML entitle (č), but it doesn't help.
<link href='http://fonts.googleapis.com/css?family=Signika:700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
Thanks to Anon, the solution is to check the Latin Extended in the Google font settings. The demo is updated.
CSS:
#font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
src: local('Signika-Bold'), url(http://themes.googleusercontent.com/static/fonts/signika/v3/F587cG5P5ff3TX6w4JlorxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
Or:
HTML:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Signika:700&subset=latin,latin-ext">

Multiple #font-face ignored in epub

I am generating EPUB files with embedded fonts using ebook-convert from the calibre project. When I declare multiple font faces in HTML, it works fine:
<html>
<head>
<style type="text/css">
#font-face{
font-family: "test";
font-style: normal;
font-weight: normal;
font-variant: normal;
src: url(fonts/EBGaramond12-Regular.otf);
}
#font-face{
font-family: "test";
font-style: italic;
font-weight: normal;
font-variant: normal;
src: url(fonts/EBGaramond12-Italic.otf);
}
body{
font-family: "test";
}
</style>
</head>
<body>
This is a test with <i>italic</i>.
</body>
</html>
produces:
but when I convert it to EPUB, I only get the first font for the whole document:
I checked the EPUB. The fonts are embedded properly and the CSS is included. There can't be a conflict with my system fonts since I used "test" as a string to identify the font.
What is wrong with EPUB? Am I declaring the fonts wrong?
This blog post about epub fonts may help