Ran into a strange problem. I'm using Factor Font for the first part of the title and another font for the second part of the title. I uploaded the .ttf files and linked to them in the css. It's showing up on my mac (chrome, safari, mobile), but not on someone else's computer (chrome, mozilla, even mobile). I have no idea what the problem could be. This is how it should look:
This is how it looks when it's wrong.
Like I said, it's uploaded to the server just fine because I use a certain font for "Life Blog" so that font is loaded and used correctly. What could be the problem??? Is it this font? Here's my css code:
#font-face{
font-family: "Factor";
src: url("..//fonts/factor.ttf");
}
#font-face{
font-family: "Mamma Gamma";
src: url("..//fonts/MammaGamma.ttf");
}
#title h1{
font-family: "Factor";
font-size: 46px;
margin-bottom: -30px;
}
#title h2{
font-family: "Mamma Gamma";
font-size: 80px;
margin-bottom: -25px;
}
And here's the html...it's all really simple:
<div id="title">
<h1>Elena Ikovleva</h1>
<h2>Life Blog</h2>
</div>
Related
I am using a particular font on my website. Firefox and Chrome recognize it on the PC (locally and server), but not on mobile (Firefox and Chrome). I am using #font-face in my CSS file.
I have the fonts uploaded on the server. I don't know what to try since it does work on the computer. Any help greatly appreciated.
Here is my HTML:
<div class="welcome">WELCOME</div><div class="home">HOME</div>
Here is my CSS:
#font-face {
font-family: 'typographicaregular';
src: url('../fonts/typographica.regular-webfont.woff') format('woff2'),
url('../fonts/typographica.regular-webfont.woff2') format('woff');
font-weight: normal;
font-style: normal;}
.welcome {
width: 47%;
padding: 0;
margin: 0 auto;
font-family: 'typographicaregular', sans-serif;
font-size: .7em;
letter-spacing: 26px;
text-align: center;
color: #004391;
}
.home {
width: 85%;
padding: 0;
margin: -40px auto 0;
font-family: 'typographicaregular', sans-serif;
letter-spacing: 12px;
font-weight: bold;
font-size: 1.6em;
text-align: center;
color: #004391;
}
It should show the actual font on my Android phone and iPad, not a generic san-serif font.
This seems like a duplicate from: #font-face Not Working in Chrome for Android
The problem may be related to your font-family declaration (I can't tell because you haven't posted that part). If, for example, you had this:
font-family: fghjkjh, 'jump_startregular', sans-serif;
...Chrome for Android would simply pretend that fghjkjh is installed (but really use the default Android font) and ignore everything else. (Not sure if this is a bug or a feature.)
In which case, the solution is to move 'jump_startregular' to the front - and possibly add a local source to the #font-face block instead, which probably causes problems with other older browsers.
"Taken word for word from the link mention above"
If this doesn't work, I suggest you use google fonts instead.
I was trying to add a custom font to my Neocities site, so I used the following css code in my style.css file:
body{
font-family: statusplz;
font-size: 10px;
}
p {
}
html {
background-color: #000100;
color: #999999;
font-size: 14px;
}
h1 {
color: #990033;
font-size: 28px;
}
hr {
color: #660033;
border-color: #660033;
background-color: #660033;
}
h2 {
}
#font-face {
font-family: 'statusplz';
src: url('https://vaguesoft.neocities.org/statusplz.ttf') format("truetype");
}
The custom font does not display in any browser other than Edge. I've used other sites with custom fonts on Firefox, and Chrome. I viewed the css files for those sites using the firefox dev tools, and they also used ttf files and #font-face, but actually worked. I don't know why the font isn't showing up in other browsers. I don't know if the problem is in the css file, the font file, or the html of the site. It was working at some point. It works on one of my computers, but that machine already has the font installed. Maybe I'm not handling frames properly (I do have a sidebar)? Any help would be greatly appreciated. Here's a link to the site: https://vaguesoft.neocities.org/
I'm making a new site and webfonts aren't working at all. I stole the chunk of code as well as the same exact font files from a previous website I made, yet they don't work on this new site. I'm working from a responsive framework so I have a feeling something is taking priority over the code I've written to use webfonts.
The URL is http://willryan.us/responsive and the chunk I'm (currently) trying to make a webfont is the big "Will Ryan" at the top.
loading font
#font-face {
font-family: 'MuseoSlab700';
src: url('assets/webfonts/museo_slab_700-webfont.eot') format('eot'),
url('assets/webfonts/museo_slab_700-webfont.woff') format('woff'),
url('assets/webfonts/museo_slab_700-webfont.ttf') format('truetype');
/* font-weight:200; /* fixes bold bug in Firefox */
/*-webkit-font-smoothing: antialiased; /* Fixes viewing in Safari. Maybe unnecessary */
}
header code
h1, h2, h3, h4, h5, h6 {
font-family: 'MuseoSlab700', Helvetica, sans-serif;
font-weight : normal;
margin-top: 10px;
letter-spacing: 0;
}
specific header code
h2 {
font-family: 'MuseoSlab700';
color: #222;
margin-bottom : .5em;
margin-top : .5em;
font-size : 2.75em; /* 40 / 16 */
line-height : 1.2;
text-align: center;
}
html
<div class="section group">
<div class="col span_3_of_3">
<h2>WILL RYAN</h2>
</div>
</div>
Your CSS is in here: http://willryan.us/responsive/css/ , more exactly
styles.css
From there, you're trying to load assets/webfonts/aCertainWebFont.woff
So the WOFF file should be in the directory /responsive/css/assets/webfonts/
(on the FTP/SSH side, something like /var/site102/www/responsive/css/assets/webfonts/ but I digress)
You can check in Firebug or Inspector or any Devtools (F12) in the Network tab: red color and 404 status is bad, properly loading is better :)
I have a odd issue on my "in-development" website here: http://www.cphrecmedia.dk/musikdk/stage/
The H1-h6 fonts are just "sans-serif", but often in Chrome it shows another font (screenshot: http://cl.ly/image/260B0H0l1w0C). When the mouse hover the navigation it changes to the right font. FYI this is how it should look like: http://cl.ly/image/442l071M3N1B
The code used for font is:
.nm li a {
float: left;
font-family: sans-serif;
height:22px;
padding: 12px 14px 7px 14px;
color:#white;
font-size: 12px;
line-height: 20px;
}
I mainly develop using Chrome, so I'm not sure if the issue is present in other browsers. Have anyone of you seen this issue before?
'sans-serif' is not a font name it's a font family specification.
Use a sans-serif font name like "Arial" or "Verdana" or else you will have unexpected results (the browser may replace your font with generic ones).
Try using custom font method by downloading the font and keeping it in your fonts folder.
Example:
#font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{ font-family:myFirstFont; }
Try using custom web font from google:
http://www.google.com/fonts
Select a font and uses one of the three metods, i prefer CSS method.
Example:
#import url(http://fonts.googleapis.com/css?family=Roboto);
Import this in CSS and use this for you text: font-family: 'Roboto', sans-serif;
Simple question: Why this 2 fonts looks different at photoshop and at website.
At this picture - this first text is from html code, second is an image from photoshop. The same font, the same size - 30. But this first looks more "bold" than second. Why? I want to have a identically font as it is at photoshop (second picture).
Here css code:
#font-face {
font-family: "SegoeWP";
src: url("fonts/play/SegoeWP.eot");
src: url("fonts/play/SegoeWP.eot?#iefix")
format("embedded-opentype"),
url("fonts/play/SegoeWP.woff") format("woff"),
url("fonts/play/SegoeWP.ttf") format("truetype"),
url("fonts/play/SegoeWP.svg#PlayRegular") format("svg");
font-weight: lighter;
}
#strona {
width: 1120px;
margin-left: auto;
margin-right: auto;
}
#Section1
{
font-family: "SegoeWP", Tahoma, Arial, sans-serif;
font-size: 30px;
}
header, footer, article, section, hgroup, nav, figure {
display: block;
}
body {
font-family: "SegoeWP", Tahoma, Arial, sans-serif;
background-image:url('background.jpg');
background-repeat: no-repeat;
background-position: top center;
color: #ffffff;
}
And html code.
<section id="Section1"> { mywebsite.NET } </section>
<img src="mojeportfolio.png" />
any ideas? Greetings!
MORE
i found, that I have 3 types of SegoeWP font in folder. "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold". "SegoeWP" looks a litle bit too "bold", but this "SegoeWP-Light" is perfect and looks identical as in photoshop when i doubleclick it. How can I use it on my website? When I change this part -> url("fonts/play/SegoeWP-Light.*"), nothing change at website. What is wrong?
photoshop handles fonts a lot differently than a web browser ... because photoshop used functions like smoothing, kernel and others the font will almost always look different in a browser
To get the same result try using font-smoothing: antialiased, and reducing the font size so it matches your Photoshop image.
The biggest difference is because Adobe Photoshop will not do subpixel font-smoothing—unlike most browsers. In your example image this is easily visible if you zoom in(see the color shifts around the edges). Windows has a history of using an extra crisp form of subpixel font rendering, which exacerbates the problem as the perceived font weight can change severely.
Smashing Magazine has an excellent article on font rendering.
Make sure you are adding the css to the right location sometimes that could be the issue. For full notes on how to lessen the weight of a font you can find it here:
http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight