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
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
I’m trying to implement some animated social media icons on my site with pure CSS and no JS. The pen I found that am trying to adapt is called "Yet Another Set of Animated Social Icons".
The problem is, rectangle glyphs are showing instead of the correct social media icons in my web browser locally and remotely. The icons appear properly in the original codepen. But somewhere along the way in my implementation on my web server or in my web browser, I am importing the web fonts incorrectly.
Here is what it looks like locally in my web browser.
So you can see it yourselves, here it is on my web-server: https://angeles4four.info/
The author of the original codepen uses external style sheets and preprocessors. I’ve done my best to include these imported in my HTML and CSS. See below.
In my head tags in my index.html is this:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
In my css file is this:
#charset "UTF-8";
#font-face {
font-family: 'icomoon';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?3qkin2");
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?#iefix3qkin2") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.woff?3qkin2") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.ttf?3qkin2") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.svg?3qkin2#icomoon") format("svg");
font-weight: normal;
font-style: normal;
Is this set up correctly? What am I missing? I'm trying to get my social media icons to render properly (as they appear in the original pen) instead of empty rectangle glyphs.
you forgot add
https:
try this
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
To recap how I got this working, I made two changes:
Courtesy of Hossam Elmasrey, I added https: to one of the link elements in index.html.
Turns out I was missing local system fonts. So with Manjaro being my local O/S, I invoked: sudo pacman -Ss ttf-liberation. I’m not sure when, how, or why these fonts were missing, but Liberation fonts are installed now.
Then I restarted my browser. When accessing my remote website through Firefox and Chrome, all the icons load properly. Hooray! But loading index.html from Chrome and Firefox directly from my local file tree doesn’t work - - which Connum explained is because web browsers disable some content from loading externally for security reasons. Going forward I will use a local testing server.
Thank you both for your help.
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 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.