I've used font-face for my website. it shows properly on all browsers except chrome.
what should I do?
CSS:
#font-face {
font-family: "B Yekan";
src: url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.eot');
src: url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.eot?#iefix') format('embedded-opentype'),
url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.svg#B Yekan') format('svg'),
url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.woff') format('woff'),
url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
font-family: "B Yekan","Open Sans";
font-size: 13px;
line-height: 21px;
color: #626262;
}
Check if you have access from your style path to font folder. Is The font folder in the same folder of your style sheet file? try with absolute paths.
regards
Related
Edit: this problem is specific to pseudo element inclusions of Font Awesome, <i class="fas fa-spray-can"></i> works fine. However,
#menu-item-3218 a:before{
content:'\f5bd';
font-family:'FontAwesome';
display:inline-block!important;
padding-right:6px;
vertical-align:-5%;
font-size:90%;
font-weight:normal;
}
does not work.
However, to thicken the plot, that pseudo-element inclusion does work for font-family: "fa5-brands", but not for font-family: "FontAwesome".
As you can see, the font icons do not load for font-family: "FontAwesome" (box placeholders appear instead) but do load for font-family: "fa5-brands" (the PS4 icon, etc.) and font-family: 'Rajdhani' (the text font you see):
In Chrome developer panel, fonts appear to be loading, I guess?
Location of CSS stylesheet:
Location of fonts:
I can't find any error in my implementation of #font-face in the css stylesheet on my WordPress website. Can someone see something wrong that I can't?
Relevant content in CSS stylesheet:
#font-face {
font-family: 'Rajdhani';
src: url('./assets/fonts/Rajdhani/rajdhani-regular-webfont.svg#rajdhaniregular') format('svg'), url('./assets/fonts/Rajdhani/rajdhani-regular-webfont.woff') format('woff'), url('./assets/fonts/Rajdhani/rajdhani-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "fa5-brands";
src: url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.svg#fontawesome-free') format('svg'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.woff2') format('woff2'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.woff') format('woff'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "FontAwesome";
src: url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.svg#fontawesome-free') format('svg'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.woff2') format('woff2'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.woff') format('woff'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I downloaded a font called Helio from envato, but I can't get the font into my local file (haven't tried live).
My code is
#font-face {
font-family: 'helios_roundedregular';
src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
url('../css/fonts/helios_rounded-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
line-height: 1.4;
margin: 0;
padding: 0;
font-family: Helios Rounded;
font-weight: normal;
font-style: normal;
}
This is a picture to the file path:
I believe it's correct. The I have the root folder, the css folder, and the font folder which contain the font files. The img shows the css and font folders open
The file names differ from the font in your path.
change
src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
url('../css/fonts/helios_rounded-webfont.woff') format('woff');
to
src: url('../css/fonts/Helios Regular.woff') format('woff'),
url('../css/fonts/Helios Rounded.woff') format('woff');
Also, if your CSS files reside in the css directory, omit the css directory declaration.
src: url('./fonts/Helios Regular.woff') format('woff'),
url('./fonts/Helios Rounded.woff') format('woff');
your CSS files reside in the css directory, omit the css directory declaration.
src: url('./fonts/Helios Regular.woff') format('woff'),
url('./fonts/Helios Rounded.woff') forma
You seems to be using wrong name for Font-Family, try this name instead.
#font-face {
font-family: 'Helios Rounded';
}
#font-face {
font-family: 'Snell Roundhand Script';
src: url('../fonts/snell-roundhand-script.eot');
src: url('../fonts/snell-roundhand-script.eot?#iefix') format('embedded-opentype'), url('../fonts/snell-roundhand-script.woff') format('woff'), url('../fonts/snell-roundhand-script.ttf') format('truetype'), url('../fonts/snell-roundhand-script.svg#Snell Roundhand Script') format('svg');
}
#font-face {
font-family: 'Baskerville Old Face';
src: url('../fonts/ufonts.com_baskerville-old-face.eot');
src: url('../fonts/ufonts.com_baskerville-old-face.eot?#iefix') format('embedded-opentype'), url('../fonts/ufonts.com_baskerville-old-face.woff') format('woff'), url('../fonts/ufonts.com_baskerville-old-face.ttf') format('truetype'), url('../fonts/ufonts.com_baskerville-old-face.svg#Baskerville Old Face') format('svg');
}
The above code is the font-face code
And below i am poting the css i have added:
.big-red-text{
color: #ff0000;
font-family: Snell Roundhand Script;
font-size: 50px;
text-align: center;
}
.big-orange-text{
color: #ff6600;
text-align: center;
font-weight: 600;
font-family: Baskerville Old Face;
}
Is there something missing in this? For it not to take the font into consideration? All the fonts are stored in the font folder in the root directory.
If your font name contains spaces, you have to enclosure it in single quotes.
Without spaces in the name you can lose the single quotes but I suggest to always use them to avoid mistakes.
So as Fundhor suggests it will work with
font-family: 'Snell Roundhand Script';
and
font-family: 'Baskerville Old Face';
Make sure your files are in the right place:
- css
-- fonts.css <-- here you are declaring your #font-face
- fonts
-- snell-roundhand-script.eot
-- etc...
Additionally include your fonts.css before you are using the font-family
Try with this :
.big-red-text{
color: #ff0000;
font-family: 'Snell Roundhand Script';
font-size: 50px;
text-align: center;
}
Did you purchase the font or font-family?
Url:https://www.fonts.com/font/linotype/snell-roundhand
The support team at fonts.com should be able to resolve your issue.
My CSS includes custom fonts such as:
#font-face {
font-family: 'AllerRegular';
src: url("http://domain/css/fonts/aller_rg-webfont.eot");
src: url('http://domain/css/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'), url('http://domain/css/fonts/aller_rg-webfont.woff') format('woff'), url('http://domain/css/fonts/aller_rg-webfont.ttf') format('truetype'), url('http://domain/css/fonts/aller_rg-webfont.svg#AllerRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
height: 100%;
font-family: AllerRegular, sans-serif;
font-size: 12px;
color: #000000;
}
When loading the web page, several of the paragraphs sometimes seem to be "missing". In the Inspector, I then look at the body, uncheck the line that says font-family: AllerRegular, sans-serif;, then check it again. The text comes back!
Because of this test, I am assuming there is some issue in the order that the CSS and the fonts file are loaded.
Also note that the CSS file and the font files are not hosted on the same server.
I have a problem when I choose a font in a CSS file. The font doesn't appear correctly in local HTML code.
#main_menu ul li
{
border-left:1px solid #dad8d8;
font-family:"arabic transparent";
font-size:16px;
padding: 0px 20px;
color: #e2001a;
list-style: none;
display: inline;
font-weight: bold;
}
The font in the HTML file isn't like in the Photoshop design.
You better use #font-face from CSS3. Example from W3School:
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
You have to embbed the font
Use the following website for font generation
www.fontsquirrel.com/fontface/generator
#font-face {
font-family: 'YourFont';
src: url('YourFont.eot');
src: url('YourFont.eot?#iefix') format('embedded-opentype'),
url('YourFont.woff') format('woff'),
url('YourFont.ttf') format('truetype'),
url('YourFont.svg#YourFont') format('svg');
font-weight: normal;
font-style: normal;
}
You cannot just use any font on the web/in HTML. You have something called web-safe fonts and can add custom ones manual.
Check FontSquirrel for conversion techniques: http://www.fontsquirrel.com
If a font is on your local machine, it "can" work if the browser tries to look for it, but you can't rely on it as most other users that visit your website won't have it on theirs, making the font fallback to Arial or an alike default font.
Font-squirrel will give you these formats (name is an example);
arabic.eot
arabic.svg
arabic.ttf
arabic.woff
With all these included all major browsers should be able to read your custom font with the #font-face property:
#font-face {
font-family: 'arabic transparent';
src: url('arabic.eot');
src: url('arabic.eot?#iefix') format('embedded-opentype'),
url('arabic.woff') format('woff'),
url('arabic.ttf') format('truetype'),
url('arabic.svg#arabic_transparent') format('svg');
font-weight: normal;
font-style: normal;
}
#main_menu ul li {
font-family: 'arabic transparent';
}