I am trying to us a custom font in my html-file. I have uploaded the font files to github and hosted a css file on github. I checked several times that the links work and that the font-files contain actual fonts. My problem is that the text in the HTML document is displayed in the standard font and not in the 'kievit' font. Can anyone spot my mistake?
Thank you!
The CSS code in kievit.css is:
#font-face {
font-family: 'kievit';
src: local('kievit'),url(https://cdn.rawgit.com/../Kievit-Medium.woff) format('woff');
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-Medium.eot);
}
#font-face {
font-family: 'kievit';
font-style: italic;
font-weight: bold;
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-BoldItalic.woff) format('woff');
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-BoldItalic.eot);
}
<html>
<head>
<link rel="stylesheet"
href="https://rawgit.com/../kievit.css" type="text/css">
</head>
<span style="font-family: 'kievit', sans-serif; font-size: 36px;"> Making the Web Beautiful</span>
<br> <br>
<span style="font-family: 'arial'; font-size: 36px;"> Making the Web Beautiful</span>
</html>
Edit: I changed the font-style to font-family as suggested, but it still does not work. I the first line is still rendered in arial instead of my custom font.
Try font-family: 'kievit' rather than font-style
I'd rather place a comment, however I don't have enough reputation to do so. At first sight your code looks ok, but there could be some other errors behind the screens (blocking network requests, wrong mime-type passing) So it would be easier to debug if you could provide us with a live example.
Related
so I am really new to programming have gotten way in over my head with this website stuff, but I cannot figure out why my text does not display in the custom font. It displays white italics text but I can't get the font to work. Thanks for any help!
<html>
<head>
<title>Webpage</title>
<style>
#font-face
{
font-family: 'my font';
src: url(C:\Users\theuser\Font\My Custom Font.woff2) format('woff2'),
url(C:\Users\theuser\Font\My Custom Font.ttf) format('truetype'),
}
h2
{
font-family: 'my font';
color: white;
font-style: italic;
}
</style>
<h2>Header text</h2>
</head>
<body>
<p style="color:white;">Font testing</p>
<body bgcolor="#000000">
</body>
</html>```
you are on right track but you cannot directly import font from your local machine copy
My Custom Font from where ever you have it save and in your project directory create a folder name it
Fonts and then past your My Custom Font on the root of your project
ex:
myProject
| - js
| - img
| - Fonts <-- here
| - index.html
then inside your index.html you can import them into your project as
#font-face {
font-family: 'MyWebFont';
src: url('./Fonts/My Custom Font.woff2') format('woff2'),
url('./Fonts/My Custom Font.woff') format('woff');
}
I'm building a email on html with the inline css. I need to build it with the google font Open Sans and using the light one with font-weight:300 for the text and the bold one with font-weight: 700 for titles.
I customed on googlefont website the url to have both particularities I needed like that :
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,700" rel="stylesheet">
The fact is that my email seems to apply by default the property 700 to all the page and can't find the 300 one if I put in my inline css the font-weight to 300.
However the 300 weight seems to be applied in a text, but I don't know why or understand the logic that could help me to apply a light weight whenever I want.
Does anyone know how if I can use Open Sans bold and light in the same page in a email html?
here is the codepen :
https://codepen.io/Katchou/pen/zzzLOy
You can use a different font-weight for the title and content
Refer the snippet
h3{
font-family:'Open-sans', sans-serif;
font-weight: 700;
}
p{
font-family:'Open-sans', sans-serif;
font-weight: 300;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<span>
<h3>Heading</h3>
<p>Content</p>
</span>
Or you can use
<span>
<h3 style="font-family:'Open-sans', sans-serif;font-weight:700">Heading</h3>
<p style="font-family:'Open-sans', sans-serif;font-weight:300">Content</p>
</span>
How's this? I can refine my answer if you add more information to the question.
EDIT:
You added a CodePen.
I got your title to show as Open Sans Light.
Check it out!
https://codepen.io/rickydam/pen/QggBja
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
#font-face {
font-family: 'Open Sans Light';
src:url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
</style>
<span>
<font face="Open Sans">
Hello world
</font>
<br>
<font face="Open Sans Light">
Hello world
</font>
<br>
<font face="Open Sans" style="font-weight:700">
Hello world
</font>
</span>
I'm doing everything right according to w3schools.com, but my #font-face font won't work! What am I doing wrong? This is my code with CSS:
#font-face{
font-family: title;
src: url('peach-sundress.ttf') format('ttf');
}
Here is the HTML code:
<div class="box">
<h1 align="center" style="font-family: title;">Keegan Brown Photography</h1>
</div>
You don't need to specify the format separately unless you are using a bunch of different source files for your font for different browser support. Also you need some quotes on your font family, try this;
#font-face {
font-family: 'title';
src: url('peach-sundress.ttf');
}
then use it like this
font-family:'title', sans-serif;
The sans serif is to provide a fallback, just in case. You can remove that if you don't want it.
I am creating an email template. Now i want to use the same font as my website font.
Is there any way to use my site font in email template?
Below is my html.
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: 'XSANS';
src: url('http://new.bama.ir/content/font/XTX-FNT-XEROSANS-REGULAR.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.ab{ font-family: "XSANS";
direction: rtl;
font-size: 16px;
font-weight: normal;
line-height: 22px;
text-align: justify;
color:#919191}
</style>
</head>
<body>
<div class="ab">این برای تست . این برای تست . این برای تست .
</div>
</body>
</html>
Now problem is my font of template is different from website. While receiving an email the font is changed in email. I need same font in email also.
please help me out from this.
Thanks in advance.
You can first convert ttf font to get all needed files here
Here is your css code
#font-face {
font-family:'XTX-FNT-XEROSANS-REGULAR';
src:url('../font/XTX-FNT-XEROSANS-REGULAR.eot');
src:url('../font/XTX-FNT-XEROSANS-REGULAR.eot?#iefix') format('embedded-opentype'),
url('../font/XTX-FNT-XEROSANS-REGULAR.woff') format('woff'),
url('../font/XTX-FNT-XEROSANS-REGULAR.ttf') format('truetype');
}
Using #font-face or other modern techniques in html-emails is not well covered among email-clients, so I'd stay away from any modern things.
Most clients won't fetch external content just just as images are blocked, so are other external resources, such as .eot etc. Some clients might have support for data uris (https://css-tricks.com/data-uris/) but probably not well supported.
Instead, enjoy the 90:ies:
Use tables for layout.
Inline style="color:#123123" only.
Fake any high-importance fonts with graphics. (Logos etc).
#font-face {
font-family: 'BryantMedium';
src:url('fonts/bryant-medium-webfont.eot');
src:url('fonts/bryant-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/bryant-medium-webfont.svg#BryantMedium') format('svg'),
url('fonts/bryant-medium-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This is how I import my fonts, and here is a sample div:
<div id="info">
by <span id="name">USERNAME</span> on <span id="date">24 Nov 2013</span>
</div>
Here is how it looks in the end:
For some reason, when the page is reloaded, this does not happen sometimes. But most of the times, this happens. This also does not happen when I use google fonts.
So I'm wondering what is going wrong here? I think there is an issue with page resources being loaded (fonts in this case) but either way this should not be happening... Any ideas?