I am having issues formatting any block elements with an embedded font in Safari and Chrome on a Mac.
Formatting is correct for all windows browsers (IE, Firefox, Chrome even Safari), and the font correctly displays for inline elements. I have stripped the html to just the following basics and still having this issue - What am I missing ??
#font-face { font-family: yowieFont; src: url(/template/GROBOLD.ttf); font-weight:normal; font-style:normal; font-variant:normal;}
h1 { font-family: yowieFont; color: #ed2249;}
h2 { font-family: yowieFont; color: #ed2249;}
h3 { font-family: yowieFont; color: #ed2249;}
p { font-family: yowieFont; color: #ed2249;}
span { font-family: yowieFont; color: #ed2249;}
<h1 style="display: inline;">1: CONTACT US</h1>
<h1 >1: CONTACT US</h1>
<h2 >2: CONTACT US</h2>
<h3 >3: CONTACT US</h3>
<p >P: CONTACT US</p>
<span>span: CONTACT US</span>
I resolved this issue by running the font through the font squirrel tool:
fontsquirrel.com/tools/webfont-generator
The tool generated the differing web formats required and fixed the line-height issues I was also having with this font
#font-face {
font-family: 'yowieFont';
src: url('/template/grobold-webfont.eot');
src: url('/template/grobold-webfont.eot?#iefix') format('embedded-opentype'),
url('/template/grobold-webfont.woff') format('woff'),
url('/template/grobold-webfont.ttf') format('truetype'),
url('/template/grobold-webfont.svg#groboldmedium') format('svg');
font-weight: normal;
font-style: normal;
}
Related
I have a web page with a custom font in Arabic but numbers with that font appear in Arabic and not clear so I want to show it with Arial font (numbers only)?
I used that but not working :
#font-face {
font-family: Arial, Helvetica, sans-serif !important;
src: local("Arial"), local("Arial");
font-style: normal;
unicode-range: U+30-39;
}
You need to name your unicode-range specific font.
In sort I am instructing the browser to use test font for all applied glyphs, then fallback to Ballet
#import url('https://fonts.googleapis.com/css2?family=Ballet&display=swap');
#font-face {
font-family: 'test';
src: local("Arial");
font-style: normal;
unicode-range: U+30-39;
}
p {
font-size: 4em;
font-family: test, 'Ballet', cursive;
}
<p>Hi there! 1 2 3 4 5</p>
If I understand correctly you have to set the unicode-range to the #font-face declaration and then specify the font-family for the element (body, ...) where this font should be used:
I created two examples, one with arial and helvetica mixed and one with arial + Comic Sans MS mixed, since this is easier to see.
#font-face {
font-family: 'myNumbers';
src: local('Arial');
unicode-range: U+30-39;
}
p {
font-size: 2em;
}
.mixed {
font-family: myNumbers, Helvetica;
}
.mixedComic {
font-family: myNumbers, 'Comic Sans MS';
}
.arial {
font-family: Arial;
}
.helvetica {
font-family: Helvetica
}
<p class="mixed">
Hello, I am 123 and 456 with Arial for Numbers and Helvetica for Text
</p>
<p class="mixedComic">
Hello, I am 123 and 456 with Comic Sans MS as Text and Arial for Numbers
</p>
<p class="arial">
Hello, I am 123 and 456 in arial only
</p>
<p class="helvetica">
Hello, I am 123 and 456 in helvetica only
</p>
Imagine that I only have control through CSS. HTML is generated automatically, so I cannot add JS or change the HTML.
/*!
* Font Awesome Free 5.13.0 by #fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons:CC BY 4.0, Fonts:SIL OFL 1.1, Code:MIT License)
*/
#font-face {
font-family: 'my_font_awesome';
font-style: normal;
font-weight: 900;
font-display: auto;
src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.eot);
src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.eot?#iefix) format('embedded-opentype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff2) format('woff2'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff) format('woff'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.ttf) format('truetype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.svg#fontawesome) format('svg');
}
#btn_apple:before,
#btn_check:before,
#btn_facebook:before,
#btn_plus:before {
font-family: 'my_font_awesome';
margin-right: .6rem;
margin-left: 1rem;
}
#btn_apple:before {content:'\f179'}
#btn_check:before {content:'\f00c'}
#btn_facebook:before {content:'\f082'}
#btn_plus:before {content:'\f067'}
<a id="btn_apple">Apple</a>
<a id="btn_check">Check</a>
<a id="btn_facebook">Facebook</a>
<a id="btn_plus">Plus</a>
https://jsfiddle.net/johnlasantos/o1thrzxv/12/
You need to generate a new font for the brand icons because they don't belong to the same group as the solid one. Then you can simply use both font together and the browser will pick the needed one:
/*!
* Font Awesome Free 5.13.0 by #fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons:CC BY 4.0, Fonts:SIL OFL 1.1, Code:MIT License)
*/
#font-face {
font-family: 'my_font_awesome';
font-style: normal;
font-weight: 900;
font-display: auto;
src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.eot);
src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.eot?#iefix) format('embedded-opentype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff2) format('woff2'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff) format('woff'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.ttf) format('truetype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.svg#fontawesome) format('svg');
}
#font-face {
font-family: 'my_font_awesome_b';
font-style: normal;
font-weight: 400;
font-display: auto;
src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.eot);
src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.eot?#iefix) format('embedded-opentype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.woff2) format('woff2'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.woff) format('woff'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.ttf) format('truetype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/ffa-brands-400.svg#fontawesome) format('svg');
}
#btn_apple:before,
#btn_check:before,
#btn_facebook:before,
#btn_plus:before {
font-family: 'my_font_awesome','my_font_awesome_b';
margin-right: .6rem;
margin-left: 1rem;
}
#btn_apple:before {content:'\f179'}
#btn_check:before {content:'\f00c'}
#btn_facebook:before {content:'\f082'}
#btn_plus:before {content:'\f067'}
<a id="btn_apple">Apple</a>
<a id="btn_check">Check</a>
<a id="btn_facebook">Facebook</a>
<a id="btn_plus">Plus</a>
More details from the Documentation: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself#using-certain-styles
Related question: Font Awesome 5 Choosing the correct font-family in pseudo-elements
I'm creating an HTML newsletter. I'm using nested array. I have two question : how do I import font? Because #import and #font-face are not working on my newsletter (but works on simple html)
And the second is this :
How can I " vertical align middle " 2 span with different font-size ? It's working on simple html but not on the newsletter...
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:10px;">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:60px;v-text-anchor:middle;width:180px;" arcsize="17%" stroke="f" fillcolor="#00436f">
<w:anchorlock/>
<center>
<![endif]-->
<a href="#"
style="background-color:#00436f;font-weight:bold;border-radius:10px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;padding-top: 25px; padding-bottom: 25px;"> <span style="font-size:2em;font-weight:bold;vertical-align:middle">15</span>
<span style="font-size:1.2em;font-weight:bold;text-transform:uppercase;vertical-align:middle">Février</span>
</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
<!--<p style="Margin: 0;font-size: 14px;line-height: 17px;width: 100%;padding: 25px 0;text-align: center;border-radius: 10px;background: #00436f;-->
<!-- color: white;">-->
<!--</p>-->
<p style="padding-top:10px;Margin: 0;line-height:1;font-size: 1em;font-weight:bold;color:#797979">Réunion d'information Loiret Numérique</p>
<p style="Margin: 0;font-size: 12px;line-height: 14px">
Mairie de Montargis - Salle Montdignan
</p>
</td>
</tr>
</tbody>
</table>
What I get:
What I need:
My fonts :
#media screen{
#import url("https://use.typekit.net/jqe0zpu.css");
#import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
#font-face {
font-family: 'Walsheim';
font-weight: normal;
font-style: normal;
src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Regular.eot');
}
#font-face {
font-family: 'Walsheim';
src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Bold.eot');
src: url('https://www.site.fr/.../GT-Walsheim-Bold.ttf') format('truetype'),
url('https://www.site.fr/.../GT-Walsheim-Bold.woff') format('woff'),
url('https://www.site.fr/.../GT-Walsheim-Bold.woff2') format('woff2'),
url('https://www.site.fr/.../GT-Walsheim-Bold.eot?#iefix') format('embedded-opentype');
font-weight: 800;
font-style: normal;
}
}
As I mentioned in my comment, Outlook does not work with all web-fonts like Google fonts. You don't include full paths to resources so there is no way for us to test what you are doing and look for a solution.
My first suggestion is to open your email in a web browser and test to see if it works at all. If it does, then I suggest testing what you are doing in an Apple or IOS email client, since they seem to work well with web fonts. If it works, you know you have things coded correctly.
Generally an HTML document wih a web font needs a link to that font and applied in a class for use in the document.
You should have a link like this:
<style>
#import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
</style>
Or this:
<link href="https://use.typekit.net/jqe0zpu.css" rel="stylesheet">
Next, you need to find some way to get the font out into the document.
<style>
.classname {
font-family: GT-Walsheim, Arial, sans-serif;
}
</style>
In the last example, I added Arial as a fallback font that is pretty web-safe because Walsheim is not going to work with Gmail and most likely not work with Outlook 2007, 2010, 2013-2019.
Finally, apply the classname:
<p class="classname">Hello</p>
You could go fancy and add in inline styles as well:
<p class="classname" style="font-family: GT-Walsheim, Arial, sans-serif;">Hello</p>
This is a very basic plan on how to work with web fonts in email.
Good luck.
Here is a simpler method of using div tags:
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#fevrier {
background: #00436f;
border-radius: 10px;
font-weight: bold;
color: #ffffff;
display: inline-block;
font-family: sans-serif;
text-align: center;
text-decoration: none;
width: 180px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
vertical-align: middle -webkit-text-size-adjust:none;
padding-top: 25px;
padding-bottom: 25px;
}
#fevrier .text {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
</style>
<div id="fevrier">
15 <span class="text">FÉVRIER </span>
</div>
My problem is very simple and the symptom is weird.
In the head of my HTML, I have included the code to load the font directly from Google Font.
<link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
And this is my CSS:
.text {
font-family: 'Roboto', sans-serif;
color: white;
font-size: large;
}
No matter what customization I choose, the font seems to be the normal font. I tried with Roboto Thin (Roboto:100) and Roboto Thin Italic (Roboto:100i) but none of them actually change.
Is there anything that I miss in my code?
It depends on which font you have from google, in this case:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
You approach to each font weight in CSS like that:
// 300 weight
.text {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
// 400 weight
.text {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
// 700 weight
.text {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
You are loading Roboto font with 700 font weight and trying to show it with 100 font weight. Embed it with the following URL:
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,400,700" rel="stylesheet">
Using this link, it will work fine for you.
Update: This code snippet will explain you it in detail.
.text {
font-family: 'Roboto', sans-serif;
color: #000;
}
.text-100 {
font-weight: 100;
}
.text-100i {
font-weight: 100;
font-style: italic;
}
.text-400 {
font-weight: 400;
}
.text-700 {
font-weight: 700;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,400,700" rel="stylesheet">
<div class="text text-100">
Hello (Font weight: 100)
</div>
<div class="text text-100i">
Hello (Font weight: 100i)
</div>
<div class="text text-400">
Hello (Font weight: 400)
</div>
<div class="text text-700">
Hello (Font weight: 700)
</div>
You simply need to set the font of your weight in your CSS
.text {
font-weight: 700;
}
First of all load all the fonts-
Just use
font-weight: 100|300|700 /Any one of them/ .
Google fonts basically work with font-weight property. The google fonts are rendered according to the font weight specifications.
For example-
Case 1 - font-weight:100 then thin font will load.
Case 2 - font-weight:300 then light font will load.
Case 3 - font-weight:700 then bold font will load.
In your css file, add:
#import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
at the top.
And, user it in the desired class like:
.class{
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
HTML:
<div class="postleftmen">
<header class="clearfix">
<span>Post Ad</span>
<h1>Select categlory</h1>
</header>
<ul class="cbp-vimenu">
<li>Logo</li>
<li></i>Archive</li>
<li>Search</li>
<li>Pencil</li>
<li>Location</li>
<li>Images</li>
<li>Download</li>
</ul>
am trying to change the font icon color on hover
class="flaticon-smart"
code used to ling font icon
visited this link CSS, changing hover effect of icon font in a link and changed in my code but its not work
CSS
#font-face {
font-family: "Flaticon";
src: url("flaticon.eot");
src: url("flaticon.eot#iefix") format("embedded-opentype"),
url("flaticon.woff") format("woff"),
url("flaticon.ttf") format("truetype"),
url("flaticon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
font-size: 10px;
font-style: normal;
margin-left: 10px;
}
.flaticon-smart:before {
content: "\e038";
color: #9999ff;
}
If you want to use JQuery, you can use the hover function
First include JQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
and then
$(document).ready(function() {
$('.flaticon-smart').hover(function(){
$(this).css('color', '#f00');
});
});
Edit
If you want to do it with CSS put this in the <head> </head> section
<style>
.flaticon-smart:hover{
color: #f00;
}
</style>
The color changes back to the original when you stop hovering the link.
If you want it changed permanently use the JQuery solution
I would not recommend using jQuery at all. Instead, do this.
REGULAR OR NORMAL MODE
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {color: $smoke;}
HOVER OR MOUSEOVER MODE
[class^="flaticon-"]:hover:before, [class*=" flaticon-"]:hover:before,
[class^="flaticon-"]:hover:after, [class*=" flaticon-"]:hover:after {color: $red;}
RECAP:
REGULAR OR NORMAL MODE: element:after, element::after or element:before, element::before (no change)
HOVER OR MOUSEOVER MODE: element:hover::after or element:hover::before (change)
I hope that made sense and good luck to you.
https://developer.mozilla.org/en-US/docs/Web/CSS/::after