Github GH Pages changes font for h1 - html

I am using a font through edge fonts and am hosting the static html page through github pages. However, when I look at the link, the h1 font has changed. When I look at it in my local host, it has the correct font. Does anyone know how to correct this?
In my index.html
<script src='http://use.edgefonts.net/londrina-shadow.js'></script>
<style>
h1 {
font-family: londrina-shadow, sans-serif;
font-size: 150px;
}
</style>
<h1>TITLE</h1>

Set the H1 code in the .css page, not the HTML.
h1 {
font-family: londrina-shadow, sans-serif;
font-size: 150px;
}
Put that in the .css page and see what happens. Also eliminate the h1 font-family preset from the Github theme.

Related

Can I use early access Google Font on my tumblr blog?

I want to use this early access Google Font:
https://fonts.google.com/earlyaccess#Noto+Nastaliq+Urdu+Draft
on my tumblr blog:
https://muneebkablog.tumblr.com
The theme installed is this one:
https://www.tumblr.com/theme/38737
It does support Google Fonts, but I do not know how to use an early access Google Font.
I have tried adding this after < head >
http://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css' rel='stylesheet' type='text/css'>
but then I did not know how to edit the following html to use this font. Here's the code in the html.
html {
font: 175%/1.5 {block:ifGoogleWebFont}{text:Google Web Font},{/block:ifGoogleWebFont} Avenir, Arial;
-webkit-font-smoothing: antialiased;
}
Alternatively, I searched the web and came to know one can add custom CSS, so I tried to add the following code into 'Add Custom CSS':
#import url(http://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css);
body {
margin: auto;
margin-top: 2em;
margin-bottom: 10em;
}
*[lang=ur] {
direction: rtl;
font-family: 'Noto Nastaliq Urdu Draft', serif;
}
but again nothing seems to be working.
You might have noticed by now that I am not a coder at all. I am just a casual blogger trying to deal with html and CSS codes.
Any help is much appreciated :)
To use any Google font, just use the code snippets that are provided on the web site. In your case, add these lines to your css file:
#import url(//fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css);
You have done that already!
Source: https://fonts.google.com/earlyaccess#Noto+Nastaliq+Urdu+Draft
Your example code then applies this font only to elements that include the lang property, i.e. <p lang="ur">.
*[lang=ur] is called a (CSS) selector, the * is basically a wild card, that selects all elements - which has been modified to only match certain elements.
My guess:
There is no lang attribute in your html code - but I can't tell for now, because you haven't posted any code.
#Muneeb Ahmed, #elasticman is correct
Here is the working code with Google Fonts Early Access https://fonts.google.com/earlyaccess
<html>
<head>
<style>
#import url(//fonts.googleapis.com/earlyaccess/notonastaliqurdu.css);
body {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 36px;
color: blue;
text-align: right;
}
</style>
</head>
<body>
<div>السلام علیکم<br>خوش آمدید </div>
</body>
</html>

custom text css not taking

I am trying to get this specific text I downloaded to take in CSS. I have other fonts that are working. I had to create an image of the text for the H2 line. I want p to have the same text. I would like both of them to work without having to create a png image to have the text I want. I have the text file uploaded into my public folder. This is my CSS code:
p{
padding-top: 30px;
padding-right: 20px;
font-family: "Paper Daisy";
src: url("img.paperdaisy.ttf");
font-size: 20px;
}
Please create your custom font like this
#font-face
{
font-family:yourfontname;
src:url(specify url here) ;
}
Then use the font family u specified whereever u want to.
First of all I'd love to recommend using Google Fonts (https://fonts.google.com/). It's super-easy to use them on your website. You can just choose a font and then use it like this:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Suddenly Paper Daisy is not avaible on Google Fonts, so you'll have to "instal" it to you website. You can find an answer to "How to do it?" on w3schools.com (https://www.w3schools.com/css/css3_fonts.asp).
In your CSS file you use:
#font-face {
font-family: Paper Daisy;
src: url(LINKTOFONT.ttf);
}
And then in the page you want font to work on:
p {
font-family: Paper Daisy;
}

Thin font looks bold, despite css stylesheet

I am using the free, open source font "Roboto".
Here is my code:
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
This code works great on my home page. It is thin and looks great.
But on my members area pages, it looks semi-bold.
I thought, perhaps it was because of the browser I was using (Google Chrome), but I debunked that idea because my homepage looks fine while using Google Chrome. Also, I haven't used any other browser.
Any tips on how to fix this issue?
Here is a screenshot to compare.
http://i.stack.imgur.com/XibIK.png
Here HTML code for "Username": (Note, all text on this page is boldish looking. Not just username. So it's not just this code.)
<div class='title'>Username</div>
Here HTML code for "Money doesn't buy happiness":
<h1 class="h1">Money doesn't buy happiness</h1>
As the people stated in the comments, a parent class is over-ruling the h1 and this results in bold text. I also see that you have a class h1 on the h1 element.
CSS
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
}
Or with !important to override the font-weight. Please note that !important will be helpful on classes that you always want to be same. For example on headings or buttons.
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100 !important;
}

import google fonts on bootstrap

I'm trying to import google fonts, the thing is i follow the steps and actuallyit works if a use
<h3 style="color:white ; font-family:signika; padding:2%"> Whatever </h3>
but what i want to do it's set the Signika font as the default one, so i do
html {
font-family: 'Signika', 'Signika:700' , sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
but it does not wor,i still have to set it in every html tag, i even tried to put it specificly like
h1 {
margin: .67em 0;
font-size: 2em;
font-family:'Signika';
}
but still, not working!
Add this line to your index.html file in the <header>
<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
If font-family: signika works inline use that in the css file too.
html {
font-family: signika, sans-serif;
}
The rule 'Signika:700' would not do anything, what I think you're trying to do should be written as:
font-family: signika;
font-weight: 700;
I figured out i was putting the rule font-family in h1 but that was not the only instance of h1, therefor i had to look further and i found the respective h1 sentence to use the font-family, so it was missplaced after all, thank you for you help, was very useful!

CSS I have a styling.css file but ignores my CSS code...But creating a new one makes it work

So I was having this trouble that my background image was not working at all...
I had the .css file correctly added with element in html. However I never got it to work. The only way it started to show me the background image was when I decided to create a NEW .css file which i called bodystyle.css and it finally did show me the background image.
The code used was the one below... I just pasted it to the new .css file and included the new file and it worked like a charm... why would this happen? Has anybody encounter this?
body {
height: 100%;
font-size: 62.5%;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
color: #333;
background: url('http://wilco/includes/img/body-bg.jpg');
padding-top: 0px;
}
a {
color: #4681da;
text-decoration: none;
}
This is modify version of your program
Directory Structure: in windows
D:\MYPROG\wilco\includes\img
in this folder your image body-bg.jpg exist
D:\MYPROG\styles
Your css file NEW .css exist
AND last
D:\MYPROG
your prog.html file exist
Code is as follow
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="styles/NEW .css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>
<p> This is my Background</p>
</div>
</body>
</html>
AND THIS IS YOUR CSS FILE
body {
height: 100%;
font-size: 62.5%;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
color: #333; width:970px;height:;background-position: center top;
margin:auto;
background-image: url("../wilco/includes/img/body-bg.jpg");
background-repeat: repeat;
padding-top: 10px;
}
a {
color: #4681da;
text-decoration: none;
}
I tried in my computer its working. you try with your image and tell me if any queries
bye
What I do to "fix" this, is F12 to open the developer console (in most modern browsers), navigate to the head element, then the link element, and open the link to the css file in a new window.
Once it is there, press Ctrl+F5 (or Cmd+R on OSX).
Then go back and refresh your page...
All your files (.html,.css and background image) should be in the same folder.
try checking that..