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.
Related
I'm trying to use two web fonts, Bahnschrift and Blanka Regular on my Github Pages site. I'm using CDN Importing in my <head>.
I have the Blanka font working locally, but when exported the github, it stops working. I deleted Blanka from my system to check if the font is actually working.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link href="http://fonts.cdnfonts.com/css/blanka" rel="stylesheet">
</head>
<body style="margin: 0px; padding-left: auto; padding-right: auto;">
<div style="font-family: Blanka;">IS THIS BLANKA FONT WORKING????</div>
</body>
</html>
This gives the result (which is what I'm looking for)
Case1
However, when pushed to git, the github pages updates and gives this result
Case2
I've heard somewhere that absolute links dont work, but when Imported my ttf files in the directory, they still don't show up in the Inspect Element section.
Is there a way I could make my custom fonts work on GitHub Pages? Thanks
To solve this problem you have to add #font-face in main css file
You can read about #font-face here
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
one of my client website uses font called Roboto. When I look on their pages all looks fine and font is working properly on all of them.
However they say that their products pages http://lichtblick-led.de/index.php/produkte.html showing other font instead of Roboto. Again, they say its only on that page and not on other pages.
Can any of you replicate the same problem?
P.S. They said they tested it from all browsers, few different computers, and even cleared the cache.
Cheers!
after an inspection of the page I noticed that it's not using the Roboto font
<link href="//fonts.googleapis.com/css?family=Lora:400,700&subset=latin,cyrillic" rel="stylesheet" type="text/css">
that is font Lora.
this needs to be changed
under HTML:
<link href='http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
OR
under CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);
You can further modify your selection over here on GoogleFonts
PS: I have included the latin & cyrillic subsets.
The link to load the Roboto font from the Goolge CDN isn't present on the products page:
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,300italic&subset=latin-ext" rel="stylesheet" type="text/css">
Also you should load the fonts before the JavaScript to prevent FOUC.
I'm trying to use Google Fonts on Cloud9 IDE, but the page keeps displaying the default font.
At first I thought there's something wrong with my code, but I've stripped down the HTML and CSS to a minimum, and it still does not work.
I've tried the same code on codepen.io, there it works just fine.
Is there a known issue with Google Fonts on Cloud9, or there's something that I'm missing?
Here are the links to Workspace in Cloud9 and Pen in Codepen.
And here's the code that I'm using.
HTML:
<head>
<link href="test.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400&subset=latin,latin-ext" rel="stylesheet" type="text/css">
</head>
<body>
<h1>This is a text.</h1>
</body>
CSS:
h1 {
font-family: "Lato", sans-serif;
font-weight: 300;
}
You are loading the font from an HTTP resource while Cloud9's preview is loading the html page over HTTPS. Try changing the protocol of the font url to https. You could've found the error message in the browser's console: http://screencast.com/t/2vIF2y2rLZt
I am trying to use Google fonts in this website. The link is in the head, if you click it the result is the correct. In the CSS, the font-family is the correct, but the font I am seen in my screen is not the correct.
This is the link:
<link rel="stylesheet" id="options-google-fonts" title="google-fonts" href="//fonts.googleapis.com/css?family=Open+Sans:300%7CMontserrat&subset=latin&v=1399056353" type="text/css" media="all" />
And the CSS:
.caption-wrap .line-2, .caption-wrap .line-3, .caption-wrap .line-5 a, .navbar-nav>li>a, .service-wrap .service-btm a {
font-family: Montserrat;
}
Nobody can tell me if is there a problem with this?
Use this snippet to link the CSS, it's done the way Google recommends to link their fonts:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
You put the stylesheet <link> element inside the <body>. It should be in the <head>.
As far as Chrome is concerned, a page served as HTTPS should not be calling a resource served as HTTP. Chrome isn't picky about when things are the other way around, so it will happily retrieve an HTTPS resource via a page served as HTTP.
Solutions
Match the protocols
Make sure you always call the https version of your Google Webfont URL. For example:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300%7CMontserrat&subset=latin&v=1399056353'
rel='stylesheet' type='text/css' media="all">
This link was generated by Redux Options Framework. The problem seems to occurs only on Chrome in Windows 8.
The problem fixes deleting the title attribute.