I am struggling to use a custom font in my HTML page.
Below is the HTML code I tried so far with the Font DENSE, downloaded from https://www.behance.net/gallery/10231891/Dense-typeface ,
it is saved in the same folder as my HTML file MyPage.html.
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: "Dense-Regular";
src: url("/Dense-Regular.otf");
}
.Font {
width: 430px;
margin: 0 auto;
padding: 0;
text-align: left;
color: #cbd9ef;
font-family: 'Dense-Regular';
font-size: 140%;
}
</style>
</head>
<body>
<div><p class = "Font">This is a paragraph.</p></div>
</body>
</html>
Can somebody point out what's wrong? I am newbie in HTML so apologies for any trivial mistake I might have made here.
Thanks for your time.
Please remove '/' in the font property 'src'. It should be like this
#font-face {
font-family: "Dense-Regular";
src: url("Dense-Regular.otf");
}
Hope this helps. Go through these links for reference.
https://css-tricks.com/snippets/css/using-font-face/
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
this:
src: url("/Dense-Regular.otf");
needs to be this:
src: url("Dense-Regular.otf");
note the lack of the forward slash in the url.
<p class = "Font"> should be <p class="Font">
Edit:
Are the MyPage.html and the Dense-Regular.otf both in the root folder of your website?
This is the syntax in CSS3:
#font-face {
font-family: font_name;
src: location [format];
}
Links for details:
1. http://www.brenkoweb.com/tutorials/css3/css3-font-styling/font-styling-in-css3-and-the-atfont-face-rule
2. http://www.brenkoweb.com/tutorials/css3/css3-font-styling/font-descriptors-in-css3
Concretely, in combination with HTML header:
CSS
#font-face {
font-family: 'ElegantIcons';
src: url("fonts/elegant-icons/ElegantIcons.eot");
src: url("fonts/elegant-icons/ElegantIcons.eot?#iefix") format("embedded-opentype"), url("fonts/elegant-icons/ElegantIcons.woff") format("woff"), url("fonts/elegant-icons/ElegantIcons.ttf") format("truetype"), url("fonts/elegant-icons/ElegantIcons.svg#ElegantIcons") format("svg");
HTML
<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
Related
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.
The main problem was that the font was displayed differently than it should, although everything was connected correctly.
I managed to find the source in html and css where it is shown how to use this font and it began to appear as it should.
The only suggestion as to why the font did not work is that this font in ttf format does not work on the web.
Thank u everyone for the help!
/* #### Generated By: http://www.cufonfonts.com #### */
#font-face {
font-family: 'Voya Nui';
font-style: normal;
font-weight: normal;
src: local('Voya Nui'), url('VoyaNui_1.15_4.woff') format('woff');
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
<body>
<h1 style="font-family:'Voya Nui';font-weight:normal;font-size:65px">018.0204 BIOLOGICAL CHRONICLE</h1>
</body>
</html>
You can't do <link rel="stylesheet" href="fonts/VoyaNui_1.15_4.ttf">.
You need to use #font-face in css or style.
#font-face {
font-family: 'VoyaNui';
src: url('./fonts/VoyaNui_1.15_4') format('woff2'),
url('./fonts/VoyaNui_1.15_4') format('woff'),
url('./fonts/VoyaNui_1.15_4') format('ttf');
}
One more thing, I use woff and woff2, because it has a good compression, but be careful with some browsers (IE).
See in caniuse https://caniuse.com/#search=woff and https://caniuse.com/#search=woff2
Assuming your pasted stylesheet is styles.css, add the font-face definition before your body rule:
#font-face {
font-family: 'VoyaNui',
src: url('fonts/VoyaNui_1.15_4.ttf');
}
body {
font-family: 'VoyaNui';
}
Then remove the <link> to the font, it will not work.
You need to generate the fonts from online web font generator and after the generation of fonts put the woff and woff2 generated fonts in your fonts folder.
#font-face {
font-family: 'VoyaNui';
src: url(./fonts/VoyaNui_1.15_4) format('ttf'), url(./fonts/VoyaNui_1.15_4) format('woff'), url(./fonts/VoyaNui_1.15_4) format('woff2');
}
i was tying to add a new malayalam unicode font to web page.
<style type="text/css">
#font-face {
font-family: "Meera";
src: url(Meera.ttf) format("truetype");
}
p{
font-family: "Meera";
}
</style>
<p>മലയാളം</p>
have Meera.ttf and this is my CSS code
but font doest changed it still displays the text in default font of the browser (Nirmala UI)
Is there any error in my code?
Thanks in advance
<style type="text/css">
#font-face {
font-family: "Meera";
src: url(Meera.ttf) format("truetype");
}
p{
font-family: "Meera";
}
</style>
<p>മലയാളം</p>
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 tried adding a font to my webpage using #font-face rule but its not showing
HTML
<!-- language: lang-html -->
<ul>
<li>GREAT</li>
<li>BITE</li>
</ul>
CSS
<!-- language: lang-css -->
body{
font-family:Armata;
font-size:16px;
color:orange;
text-align: center;
background:white;
}
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
you can download the font from here : http://www.moldire.com
You need to put font-face in top of CSS.
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
body{
font-family:Armata;
font-size:16px;
color:orange;
text-align: center;
background:white;
}
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
li
{
font-family:Armata;
}
or if u want to use it for full page then apply it to body tag
Here are my steps to have the font working:
Font face first in css (already mentioned)
Have the type/format of font - EX: src: url(Armata-Regular.ttf) format('truetype')
Make sure your host (local or not) has the MIME type for these fonts
Lastly, would you consider a web font path? Save yourself time by getting a web path embedded font: http://www.google.com/fonts/specimen/Armata
Doing this will save you time skipping last bullet.
Use this on your website
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
and in CSS you will need this :
font-family: 'Armata', sans-serif;