I've published my ASP.NET MVC5 website to my server and noticed the font is incorrect.
On my local host it works as expected. On every HTML page, I have the following in head head tags
<link href='https://fonts.googleapis.com/css?family=Lato:400,300italic,700,300' rel='stylesheet' type='text/css'>
And in my CSS I have
body {
letter-spacing: .05em;
font-weight: 300;
font-size: 1em;
line-height: 1.8em;
font-family: 'Lato', sans-serif;
color: #4f4f4f;
}
A quick search within the project shows this is the only time I use font.
I'm also aware there is no 'back up font', but that is not relevant.
Font looks different when site is server over https didn't help as I'm already using https
When I try the font in typecast I can see that the localhost is rendering the font correctly where as my server is not.
The website is not using SSL
Within Chrome, I open the dev tools and in Network I can see
css?family=Lato:400,300italic,700,300 GET 200 stylesheet MyPage:13 920 B 263 ms
I've also checked the rendered HTML and CSS, and although there is some minification, the syntax looks the same.
Why will this font not render on my web server.
Related
In google docs, for Montserrat font they have the word January looking like this (which is the same as the design I want):
In my code, I use the same format but what I see is a totally different font in my browser. This is my code:
<div class="event-date">January</div>
.event-date {
font-size: 16px;
font-family: "Montserrat", sans-serif;
}
And this is what I see in the browser (totally different than google fonts):
Is there a way to fix it to look like google fonts?
You must first link the font (ideally in the head tag), because this font is not part of the operating system. When the web browser can't find the font, it uses default font for the operating system.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
Or you can also import it in your CSS file.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap');
Check the Google Fonts CSS API documentation for more info: https://developers.google.com/fonts/docs/css2
I have setup a website with GitHub Pages using Jekyll and I host the stylesheet for the Roboto font (using Google would increase page load time). I then import it in my html as
<link rel='stylesheet' href='{{ site.baseurl }}/static/css/roboto.css'>
site.baseurl is an empty string, so no issues with it.
In my CSS file, I use
body {
font-family: 'Roboto', sans-serif;
}
but it doesn't work. The font is not being rendered on screen. What is happening and is there a way to fix it?
After some investigation, I realized the font files I was hosting didn't include the Roboto font. I downloaded the correct files and replaced them, and now it works like a charm.
I'm having a rather strange issue. I'm trying to include a font from Google Fonts, "Yanone Kaffeesatz", in the head of my HTML and then use it to style my h1 and h2 elements using the font-family property. But even though I followed Google's instructions my browser still displays the standard sans-serif font. Where have I gone wrong?
Screenshot: https://docs.google.com/drawings/d/1NCq3ch0ClzaWfniSDKQJa9C-fX9zXH8-R-I7GnjqqbI/edit?usp=sharing
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'>
</head>
h1, h2 {
color: black;
font-family: 'Yanone Kaffeesatz', sans-serif;
}
You'll probably want to reference the https:// protocol instead of the http://. It is likely getting blocked by the browser for trying to load insecure content over the secure page loaded in your browser url.
To test for this, you can also try to refresh your site without https:// and see if it display the fonts correctly.
Since your screenshot is from within c9.io's preview URL and you're eventual production site may not be using SSL. You may want to change your link href by omitting the http: part of your protocol all together and just use
//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700 which will automatically try to pull the resource from whatever protocol the site is currently using.
I want to have a custom font (HP Simplified Light) for my webpage. I have the font file uploaded to Dropbox, and I have the link here.
But nothing happens. I get Times New Roman as the font. I've tried testing locally, both hosting the font locally, and the HTML document, but with the same effect.
<html>
<head>
<style>
#font-face {
font-family: HP Simplified;
src: url('http://dl.dropboxusercontent.com/s/dau4s6y033jkg4y/HPSimplified_Lt.ttf');
}
h1 {
font-family: HP Simplified
}
</style>
Hello world!
</html>
Your CSS is only styling h1 elements with the font HP Simplified. The text "Hello world!" is not a h1. Either you can make it so:
<h1>Hello world!</h1>
Or you can have the CSS style everything with the font:
* {
font-family: HP Simplified
}
This is the error I get in chrome:
Redirect at origin 'http://dl.dropboxusercontent.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'Null' is therefore not allowed access.
Download the file and host it locally. Also be sure to put the tags around your text and include a ; at the end of your font-family css. I did all that and it works. Example: http://catsarecrits.com/test.html
When I checked your font, it looks like an ordinary font and not a webfont. Correct me if I am wrong.
The othher possible reason is that Drop box have blocked your font file from being accessed on random location.
I have uploaded your font and converted it to different webfont formats.
test link
http://files.coderinthebox.com/webfont/
zip files
http://files.coderinthebox.com/webfont/webfontkit-20150531-215129.zip
The html+css for Firefox in windows, looks fine, but same looks out of place in Firefox in Ubuntu. Please do let me know, as to how it can corrected, what should i do?
More info 1: The css code for the text in the attached image:
style="font-family:'Museo 300';
font-size:11px;
text-align:left;
color:#636466;
padding-top:3px;"
Although am changing Museo 300 to font to Arial, Helvetica, sans-serif, so it can load in any browser with these default fonts, but still i see the this problem.
image attached
Most likely the font you are using is not installed on the Ubuntu machine. To get around this you must supply the font yourself. Google Fonts is a great way to do just this.
You can search their site for a suitable font, and then link it in your site <head>.
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
And then use it in your CSS
font-family: 'Roboto', sans-serif;
Sadly, Google Fonts does not have the Museo font you are trying to use. However, you can use the #font-face CSS At-Rule to link to a font file which you are hosting on your site. Make sure that you only host the languages and font weight/style that you plan to use, and that your font file is limited to those same parameters. This will allow the file to be loaded much faster.
#font-face {
font-family: 'My Custom Font';
src: url('http://yoursite.com/yourfontfile.ttf') format('truetype');
}
p.customfont {
font-family: 'My Custom Font', Verdana, Tahoma;
}
(See this answer for more information)