I work with a system that can use an email template to make and send an email, and I face a problem while trying to attach local font (any type) to email.
I attach a font with #font-face in in this way (prerendered HTML):
<style>
#font-face {
font-family: "Pacifico";
src: url("../resources/Pacifico.ttf");
}
body, span, div, input[type=text], label {
font-family: 'Pacifico' !important;
color:red;
}
</style>
After rendering, ready to send HTML page contains an appropriate link to the font (I can download font successfully as a font (content type is correct) from Tomcat server localhost:8080/.../font) and it is uploaded properly. However, the page doesn't implement it and the font itself isn't represented as it should (seems like default font is used).
This problem relates exclusively to locally stored fonts - if I use any CDN email is rendered properly.
The font is 100% workable since when I create a dummy HTML page and attach font (with a direct link to a folder) there it is applied correctly.
Edit
May this issue to connected to the inequality of content types for fonts in Tomcat and my application (application/x-font-ttf in Tomcat for .ttf fonts VS font/ttf in application)?
Edit 2
Rendered HTML contains this snippet
<style>
#font-face {
font-family: "Pacifico";
src: url("http://localhost:8080/path/to/resource/Pacifico.ttf");
}
body, span, div, input[type=text], label {
font-family: 'Pacifico' !important;
color:red;
}
</style>
The relative URL will be relative to the location of the CSS.
Which appears to be inline in the email, which does not have a URL. So a relative URL has nothing to be relative to.
I assume when using a CDN you'll have an absolute URL: you'll need one for each non-embedded resources,
Related
I am trying to embed base64-encoded font in the #font-face rule in the style in document's head.
<style>
#font-face {
font-family: OmoType-BoldStdTwo;
src: url(data:font/ttf;base64,<base64data>);
}
div {
font-family: OmoType-BoldStdTwo;
font-feature-settings: "ss03" 1, "ss04" 1;
}
</style>
For some reason, it's not using my font, but Times (I see that when I look at the computed styles in Web inspector). I am testing on Google Chrome.
Here's the fiddle: https://jsfiddle.net/gfwdzx5s/
It looks like there was an issue with the font itself. I loaded the content of the font as a text and then base64encoded it, and that doesn't work, but when I loaded it as an array buffer and then converted to base64, it worked.
I found a gorgeous font called Slim Joe on a webpage whose link I posted below.
Even though I spent quite some time searching through their code, I couldn't find how/where exactly they included the font. I can see it being used in their CSS file (font: Slim-Joe), but I don't see where it's included in their html.
Could someone help me with including this font in my html? I understand what to do/how it looks like when I'm browsing through fonts that Google is offering (since they make it pretty easy to include in my HTML), but I can't do anything about this specific font.
The webpage where it's included:
http://presentation.creative-tim.com/ (where it says "creative tim")
How the font looks like:
https://befonts.com/big-john-slim-joe-font.html
You can include fonts into your website by css #font-face rule.
This requires having either the otf or ttf font file on your server.
To make this work you use the font-family property to name font. This is what you will use later to reference the font you have downloaded. Then you use src to map it to a ttf or otf file downloaded somewhere on your machine.
Declare it like
#font-face {
font-family: john-slim-joe;
src: url(myFontsFolder/john-slim-joe.ttf);
}
Use it like
p{
font-family: john-slim-joe;
}
To add a font to your website:
Locate the CSS file.
Create or locate your fonts folder.
Use the CSS's #font-face property to add your font file via url. This is also where you will name your font. Here's an example to follow from W3School.com's CSS #font-face Rule
After that, you can use the "font-family" property.
Hope this helps!
The website you are referring (http://presentation.creative-tim.com/) has imported the font files from given directory. Take Look at the Html header and you will find the following line:
<link href="/assets/css/fonts/Rubik-Fonts.css" rel="stylesheet" />
On this file, you can see how they imported and declared Slim-Joe font.
#font-face {
font-family: 'Slim-Joe';
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?d7yf1v');
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?#iefixd7yf1v') format('embedded-opentype'),
url('../../fonts/Slim-Joe/Slim-Joe.woff?d7yf1v') format('woff'),
url('../../fonts/Slim-Joe/Slim-Joe.ttf?d7yf1v') format('truetype');
font-weight: normal;
font-style: normal;
}
And usage by the nav bar css:
.navbar .navbar-brand {
font-weight: 600;
margin: 5px 0px;
padding: 20px 15px;
font-size: 20px;
font-family: "Slim-Joe";
letter-spacing: 0;
}
I am new to HTML5 coding, and i am looking to create a very basic website.
I've been searching on the internet for a few hours wondering how i can use a custom font on a webpage through a font file (.tff) and i came out short of solid answers. All i can conclude is that i require a style.css file of some sort with information of the font i wanna use.
While i am still unable to figure out how i can get the font to display on my webpage, what i really don't know is how i can use 2 different custom fonts on a webpage.
Of all the vague answers i could find on the internet, they only tell me how to use a single font for a webpage, however i would like to use 2 different fonts for different paragraphs and such.
I still cannot figure out how to do so, what i could find teaches me how to do so in CSS format, though i am using HTML format (specifically 5).
I would like some help on how i can use 2 custom fonts in a webpage for different paragraphs and how i can have these fonts display when i open the .html file on my browser. I would appreciate the help.
You have to use CSS to do that. That CSS can embedded in your html under your tag
<html>
<head>
<style>
#font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
#font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
#font-face { font-family: Delicious2; src: url('Delicious2-Roman.otf'); }
#font-face { font-family: Delicious2; font-weight: bold; src: url('Delicious-Bold.otf');}
</style>
</head>
Then you can reference these fonts in your html
<font face="Delicious">This is some text!</font>
Check these two posts for more details
How do I install a custom font on an HTML site
https://www.w3schools.com/tags/att_font_face.asp
You need to first host the font on the website (put the TTF file in a folder beside your HTML files), then use CSS to apply it to the elements (Ex: your paragraphs, headers, etc.). Using this method, you can use two, three, or however many different fonts you like.
W3Schools is sometimes really helpful, and this is an occasion where they are. I can elaborate more on this later.
I believe all you want is to apply different font styles on your web page. First, host your fonts in your project and use CSS class to change font family to any section of the web page you like.
<div style:'font-family: fantasy'>This is font style 1</div>
<div style:'font-family: cursive'>This is font style 2</div>
I have been using Font-Awesome and its icons for a while now, and it has been working just fine.
Today, however, it only displays blank squares instead of icons. I have read many other related questions, but none of those cases apply to me. As I said, it worked before, and I did not make any changes to the Font-Awesome files (I am using a downloaded version of FA, not the CDN) or to the HTML templates that display the icons.
So I want to start debugging the process. One example is this:
<i style="color: orange" class="fa fa-exclamation-triangle"></i>
However, I cannot find any urls in the CSS of the affected elements, when inspecting with Chrome. What I do see on every icon element though, is something like this:
.fa-warning:before, .fa-exclamation-triangle:before {
content: "\f071";
}
Where \f071 is the "blank square" character.
So my question is:
Where do the icons come from, and how can I debug no-show FA icons, in general?
UPDATE
I found out that \f071 and its friends are actually symbols referring to icons, stored in the font files. The fact that they show up as blank squares seems to indicate that the font has not been loaded successfully.
However, I checked and the client downloads fonts/fontawesome-webfont.woff and fonts/fontawesome-webfont.ttf just fine.
Also, the elements' font is correctly set through the fa class:
font-family: normal normal normal 14px/1 FontAwesome
What else is necessary to make sure, a font has loaded successfully?
UPDATE
I solved it: Font file(s) were corrupted/not delivered properly. That's always something to check out first!
FontAwesome is... a font!
This means you'll have a set of characters, which are (visually) icons. These characters are generally contained between \e000 and \f8ff (which are private use area's characters).
When you see this code:
.fa-warning:before, .fa-exclamation-triangle:before {
content: "\f071";
}
It means the \f071 character will be displayed in the pseudo-element. It's coupled with this code, which loads FontAwesome font for .fa elements:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Seeing a white square can means:
your font is not loaded (most common problem)
your font is not well created (re-download it)
your CSS is missing the font declaration (#font-face {})
your CSS is missing the font call (font: normal normal normal 14px/1 FontAwesome;)
How to debug:
Check that you're using the right class name (.fa .fa-foo)
Check that your FontAwesome CSS is loaded (it should be the case as you're seeing the square)
Double-check that your font is loaded. There could have a path issue, like font/ folder instead of fonts/
Have a look on your .htaccess. People often makes strong rules which affect assets.
If everything is ok, try to re-download the font (font files could have been corrupted)
I want to use a single font named "Algerian" across my whole website. So, I need to change all HTML tags and I don't want to write different code for different tags like:
button{font-family:Algerian;}
div{font-family:Algerian;}
The method written below is also highly discouraged:
div,button,span,strong{font-family:Algerian;}
Put the font-family declaration into a body selector:
body {
font-family: Algerian;
}
All the elements on your page will inherit this font-family then (unless, of course you override it later).
*{font-family:Algerian;}
better solution below
Applying a single font to an entire website with CSS
The universal selector * refers to all elements,
this css will do it for you:
*{
font-family:Algerian;
}
But unfortunately if you are using FontAwesome icons, or any Icons that require their own font family, this will simply destroy the icons and they will not show the required view.
To avoid this you can use the :not selector, a sample of fontawesome icon is <i class="fa fa-bluetooth"></i>, so simply you can use:
*:not(i){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the tag name <i>, you can also do it for classes:
*:not(.fa){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the class "fa" which refers to fontawesome default class,
you can also target more than one class like this:
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
* { font-family: Algerian; }
The universal selector * refers to any element.
Ensure that mobile devices won't change the font with their default font by using important along with the universal selector * :
* { font-family: Algerian !important;}
As a different font is likely to be already defined by the browser for form elements, here are 2 ways to use this font everywhere:
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}
There'll still have a monospace font on elements like pre/code, kbd, etc but, in case you use these elements, you'd better use a monospace font there.
Important note: if very few people has this font installed on their OS, then the second font in the list will be used. Here you defined no second font so the default serif font will be used, and it'll be Times, Times New Roman except maybe on Linux.
Two options there: use #font-face if your font is free of use as a downloadable font or add fallback(s): a second, a third, etc and finally a default family (sans-serif, cursive (*), monospace or serif). The first of the list that exists on the OS of the user will be used.
(*) default cursive on Windows is Comic Sans. Except if you want to troll Windows users, don't do that :) This font is terrible except for your children birthdays where it's welcome.
Please place this in the head of your Page(s) if the "body" needs the use of 1 and the same font:
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
Everything between the tags <body> and </body>will have the same font
Ok so I was having this issue where I tried several different options.
The font i'm using is Ubuntu-LI , I created a font folder in my working directory. under the folder fonts
I was able to apply it... eventually here is my working code
I wanted this to apply to my entire website so I put it at the top of the css doc. above all of the Div tags (not that it matters, just know that any individual fonts you assign post your script will take precedence)
#font-face{
font-family: "Ubuntu-LI";
src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}
*{
font-family:"Ubuntu-LI";
}
If i then wanted all of my H1 tags to be something else lets say sans sarif I would do something like
h1{
font-family: Sans-sarif;
}
From which case only my H1 tags would be the sans-sarif font and the rest of my page would be the Ubuntu-LI font
in Bootstrap,
web inspector says the Headings are set to 'inherit'
all i needed to set my page to the new font was
div, p {font-family: Algerian}
that's in .scss
*{font-family:Algerian;}
this html worked for me. Added to canvas settings in wordpress.
Looks cool - thanks !