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');
}
Related
I have uploaded the font MTCORSVA.TTF on server and can be accessible with source url too.
But When I implement it using #font-face , it doesnt show up on site.
What am i lacking here?
.bottomtext{
font-family: "MTCORSVA";
color: red;
}
/*fonts*/
#font-face {
font-family: "MTCORSVA";
src: url("azlily.bex.jp/eccube_1/html/template/default/css/fonts/MTCORSVA.TTF") format("TTF");
}
<div class=" bottom_header">
<div class="bottom_header1"><span class="bottomtext">Love Column</span>
</div>
</div>
You should move your TTF file to in your Fonts folder.
src: url("azlily.bex.jp/eccube_1/html/template/default/css/fonts/MTCORSVA.TTF") format("TTF");
change above code to
src: url("../fonts/MTCORSVA.TTF");
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.
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?