This is my CSS code:
The font is not working. Did I miss something?
I want to mention that it's not installed on the local OS and I'm sure that the URL goes to the font exactly
#font-face {
font-family: 'ma';
src: url('http://localhost/header/images/FS_Old.ttf');
}
.menu_head {
width: 100%;
position: relative;
height: 30px;
font-family: 'ma';
}
Ryan is right. I replaced your URL with a working URL and it works absolutely fine.
This is what I used.
#font-face {
font-family: 'ma';
src: url('http://www.cse.buffalo.edu/~rsd7/BaroqueScript.ttf');
}
.menu_head {
width: 100%;
position: relative;
height: 30px;
font-family: 'ma';
}
It should probably because Chrome, Firefox ,IE does not support ttf extension. You can try to put other extension:
#font-face {
font-family: 'ma';
src: url('FS_Old.eot'); /* IE9 Compat Modes */
src: url('FS_Old.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FS_Old.ttf.woff') format('woff'), /* Modern Browsers */
url('FS_Old.ttf.ttf') format('truetype'), /* Safari, Android, iOS */
}
I used this website to convert the font to other types http://www.fontsquirrel.com/tools/webfont-generator and used a different supported font type and that seems to have solved the problem. Here is new code that works with all browsers.
<html>
<head>
<style>
#font-face {
font-family: 'baroque_scriptregular';
src: url('baroquescript.eot');
src: url('baroquescript.eot?#iefix') format('embedded-opentype'),
url('baroquescript.woff') format('woff'),
url('baroquescript.ttf') format('truetype'),
url('baroquescript.svg#baroque_scriptregular') format('svg');
font-weight: normal;
font-style: normal;
}
.menu_head {
width: 100%;
position: relative;
height: 30px;
font-family: baroque_scriptregular;
}
</style>
</head>
<body>
<div class="menu_head" >
hellod
</div>
</body>
Related
When I am adding a font to my website via a google fonts tag, my font displays fine. But when I add it as a file via #font-face, it gets thinned out.
Example:
Here's the code that I use:
.title {
color: white;
font-family: 'myBodoni', serif;
position: absolute;
top: 120px;
left: 200px;
font-size: 64px;
z-index: 2;
line-height: normal;
}
.img {
position: relative;
margin: 3%;
}
#font-face {
font-family: myBodoni;
src: url(bodoni-variable.ttf); //variable file downloaded directly from google fonts
}
When I add this code, it works properly:
Css:
font-family: 'Bodoni Moda', serif;
Html
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda&display=swap" rel="stylesheet">
Here's how it looks with the following code
It is because you are only adding one #font-type. You need to add #font-type for eot, woff2, woff & svg:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Can anyone tell me why this is not loading at all? When I inspect the element, the inspector is showing "Times Roman" Used as "Times"
This is from my main.scss file:
body,
html {
height: 100%;
font-size: 100%;
#font-face {
font-family: 'proxima_nova_reg';
src: url('../media/fonts/proxima_nova_reg.eot'); /* IE9 Compat Modes */
src: url('../media/fonts/proxima_nova_reg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../media/fonts/proxima_nova_reg.woff') format('woff'), /* Modern Browsers */
url('../media/fonts/proxima_nova_reg.ttf') format('truetype'), /* Safari, Android, iOS */
url('../media/fonts/proxima_nova_reg.svg#svgFontName') format('svg'); /* Legacy iOS */
}
section{
font-family: 'proxima_nova_reg' !important;
}
}
It is then converted to the following via phpstorm's sass watch:
body,
html {
height: 100%;
font-size: 100%; }
#font-face {
body,
html {
font-family: 'proxima_nova_reg';
src: url("../media/fonts/proxima_nova_reg.eot");
/* IE9 Compat Modes */
src: url("../media/fonts/proxima_nova_reg.eot?#iefix") format("embedded-opentype"), url("../media/fonts/proxima_nova_reg.woff") format("woff"), url("../media/fonts/proxima_nova_reg.ttf") format("truetype"), url("../media/fonts/proxima_nova_reg.svg#svgFontName") format("svg");
/* Legacy iOS */ } }
body section,
html section {
font-family: 'proxima_nova_reg' !important; }
No errors or warnings, but I also do not see any fonts being downloaded under the network tab.
Do I need to set the chmod of fonts to something special? They are currently 755
first edit - I changed the files to chmod 777 proxima_nova_reg.* while they look they have changed, but under the fonts tab, it still reads as Times
As usual, thanks in advance
Thanks to comments from #Ry- it put me on the right track. I changed my scss file to the following, which places the font-face rules before the html, body:
#font-face {
font-family: 'proxima_nova_reg';
src: url('../media/fonts/proxima_nova_reg.eot'); /* IE9 Compat Modes */
src: url('../media/fonts/proxima_nova_reg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../media/fonts/proxima_nova_reg.woff') format('woff'), /* Modern Browsers */
url('../media/fonts/proxima_nova_reg.ttf') format('truetype'), /* Safari, Android, iOS */
url('../media/fonts/proxima_nova_reg.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body,
html {
height: 100%;
font-size: 100%;
section{
span{
font-family: 'proxima_nova_reg';
}
}
}
As a result, phpstorm's watch sass creates the following css file, which renders the fonts correctly:
#font-face {
#font-face {
font-family: 'proxima_nova_reg';
src: url("../media/fonts/proxima_nova_reg.eot");
/* IE9 Compat Modes */
src: url("../media/fonts/proxima_nova_reg.eot?#iefix") format("embedded-opentype"), url("../media/fonts/proxima_nova_reg.woff") format("woff"), url("../media/fonts/proxima_nova_reg.ttf") format("truetype"), url("../media/fonts/proxima_nova_reg.svg#svgFontName") format("svg");
/* Legacy iOS */ }
body,
html {
height: 100%;
font-size: 100%; }
body section span,
html section span {
font-family: 'proxima_nova_reg'; }
/*# sourceMappingURL=main.css.map */
Thank you all for your help
I created some icons using FontForge, and the icons work in all modern browsers except for Safari. What would be causing Safari to be the only browser that doesn't display the fonts?
This is the SCSS that is being used:
#font-face {
font-family: 'MyFont';
src: url('/assets/fonts/MyFont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.my-font-icon {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
&:before {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
&.my-font-questions:before {
content: "\0001";
}
&.my-font-chevron-left:before {
content: "\0002";
}
&.my-font-close:before {
content: "\0003";
}
}
Safari requires the TrueType/ttf font version and really you should be including several different types rather than just woff2 which is the most modern type. Here's a sample list from the CSS Tricks article here, the browser finds the font it understands and renders that one:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
FontForge should provide you these other font types, but if it doesn't, you'll need to go to FontSquirrel to render them (if you have the licence and permission to do so):
https://www.fontsquirrel.com/tools/webfont-generator
Chrome and Safari are showing the (local) be fonts correctly, but Firefox isn't.
The code I got from Fontsquirl added ' marks in the code, which I got rid of, but it's still not working:
Original code:
#font-face {
font-family: 'frutigerboldcn';
src: url('frutiger_67_bold_condensed-webfont.eot');
src: url('frutiger_67_bold_condensed-webfont.eot?#iefix') format('embedded-opentype'),
url('frutiger_67_bold_condensed-webfont.woff') format('woff'),
url('frutiger_67_bold_condensed-webfont.ttf') format('truetype'),
url('frutiger_67_bold_condensed-webfont.svg#frutigerboldcn') format('svg');
font-weight: normal;
font-style: normal;
I changed it into:
#font-face {
font-family: frutigerboldcn;
src: url(frutiger_67_bold_condensed-webfont.eot);
src: url(frutiger_67_bold_condensed-webfont.eot?#iefix) format(embedded-opentype),
url(frutiger_67_bold_condensed-webfont.woff) format(woff),
url(frutiger_67_bold_condensed-webfont.ttf) format(truetype),
url(frutiger_67_bold_condensed-webfont.svg#frutigerboldcn) format(svg);
font-weight: normal;
font-style: normal;
Fonts are loaded in the same folder as the stylesheet.
This is part of the stylesheet regarding the navigation:
#navigation .sf-menu a {
display: inline;
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: #008abf;
border-radius: 2px;
padding: 0 5px;
height: 26px;
line-height: 26px;
font-weight: normal;
letter-spacing: 1px;
font-family: frutigerboldcn;
How do I fix this? Thanx in advance
Put the following in your .htaccess and all will be fine, at least on modern FF versions.
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Go here for the full discussion on Stack Overflow:
CSS #font-face not working with Firefox, but working with Chrome and IE
#font-face {
font-family: 'ArialRounded';
src: url('ArialRounded.eot');
src: local('ArialRounded'), url('fonts/ArialRounded.eot'); /* for firefox */
}
#font-face {
font-family: 'ArialRounded';
src: url('ArialRounded.woff') format('woff'),
src: local('ArialRounded'), url('fonts/ArialRounded.woff'); /* for firefox */
url('ArialRounded.svg#ArialRounded') format('svg');
src: local('ArialRounded'), url('fonts/ArialRounded.svg'); /* for firefox */
}
Edit:
Chrome is somehow rendering the fonts i use via #font-face incorrectly. Which i found as i changed the font family of the inspected element to arial. The reason this might be, is because as i was searching for a fix on how chrome renders fonts so they appear more smooth instead of pixelated, i found that you could swap the order of the font formats and put the svg on top which would cause chrome to render it perfectly. As seen here.
So either the order is messing them up, or simply the font is broken in some way.
Now the question is, how do i use this font without breaking the site and keeping the fonts smooth?
Here is the #font-face code i use:
#font-face {
font-family: 'alegreya_scregular';
src: url('../includes/fonts/alegreyasc-regular-webfont.eot');
src: url('../includes/fonts/alegreyasc-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/alegreyasc-regular-webfont.svg#alegreya_scregular') format('svg'),
url('../includes/fonts/alegreyasc-regular-webfont.woff') format('woff'),
url('../includes/fonts/alegreyasc-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.eot');
src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg'),
url('../includes/fonts/droidsans-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'droid_sansbold';
src: url('../includes/fonts/droidsans-bold-webfont.eot');
src: url('../includes/fonts/droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-bold-webfont.svg#droid_sansbold') format('svg'),
url('../includes/fonts/droidsans-bold-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have some rendering issues on chrome. For some reason, the links right side gets cut off so the underlines will only fill half the of text, and the divs on the right side will not break off the words to a new line. It only happens some of the time and if i refresh the page a couple of times (differs how many times) it will fix itself eventually. Images are below.
Note: The site is in danish.
Images, underlined the issues in red:
http://i.stack.imgur.com/zJHXD.jpg
What causes this, and how do i fix it?
Note: This is for the navigation links
HTML:
<ul class="nav">
<li class="first"></li>
<li>Forside</li>
<li>Booking</li>
<li>Galleri</li>
<li>Begivenheder</li>
<li>Events</li>
<li>Politik</li>
<li>Kontakt</li>
</ul>
CSS:
.header .nav {
position: absolute;
overflow: hidden;
font-size: .70em;
bottom: -8px;
right: 16px;
}
.header .nav li {
float: left;
background: #171717 url(../images/site/nav_divider.png) repeat-y right;
text-transform: uppercase;
} .header .nav li:hover {
background: #1a1a1a url(../images/site/nav_divider.png) repeat-y right;
}
.header .nav .first {
width:2px;
height:31px;
margin-bottom:-0.95em;
}
.header .nav li a {
display: block;
padding: .75em .85em .75em .75em;
color: #e0e0e0;
text-decoration: none;
}
After a bit of searching on #font-face and chrome behaviour, i found a solution to the problem. Apparently moving the svg to the top will make the rendered font break the layout, so instead you should keep the original formatting and add a special media query, which will render the font smoothly in chrome while not breaking the layout.
Example:
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.eot');
src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-webfont.ttf') format('truetype'),
url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
}