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!
Related
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>
Ok, so I have html code like the following:
<div class="aClass">Thing One/Thing Two/Thing Three</div>
and the "/" displays correctly on IE and FireFox, but for Chrome and Edge it doesn't. There is no specific CSS styling applied to the class or any explicit font-family. The image displayed is:
Also, specifc codes such as / don't fix the problem
EDIT: I forgot to mention that I'm using bootstrap... Don't know if that has any impact or not.
well if i'm understanding the same what you meant by the question then i've just tested it on mentioned browsers and it works perfectly fine. i don't see any problem. or if you can elaborate your question with the help of screenshots, it might help us to answer you properly..
following snippet might prove helpful.
div.withCss{
font-family: arial;
font-size: 20px;
}
<html>
<head>
</head>
<body>
<div class="aClass">Thing One / Thing Two / Thing Three</div>
<div class="para"><p>Thing One / Thing Two / Thing Three</p></div>
<div class="withCss"> Thing One / Thing Two / Thing Three </div>
</body>
</html>
I found the issue. The site that I'm working with, they have an extra css file that contains the font info.
#font-face {
font-family: 'Campton Bold';
src: url('../fonts/campton/Campton-BoldDEMO.otf');
}
#font-face {
font-family: 'Campton Light';
src: url('../fonts/campton/Campton-LightDEMO.otf');
}
html {
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 16px;
}
h2, h3, h4, h5, h6, .bold-text {
font-family: "Campton Bold", sans-serif;
}
h1, .light-text {
font-family: "Campton Light";
}
header p {
font-size: 18px;
}
The "Campton" variations are what's causing the problem. I just have to change those and it's fixed.
I have this site:link
I put an image to understand better
The difference bothers me more background and text size.
Font used in photoshop is "ArchivoNarrow regular", this I put myself in the CSS code below
CODE CSS:
.details-footer{
display: inline-block;
width: auto;
font-size: 9pt;
color: white;
font-family: ArchivoNarrow regular;
}
Can you tell me please from where all these differences and how can I fix?
Thanks in advance!
To add font, insert this in your index.php or whatever file, that containt links to your css files.
<link href='https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
You need to insert this above all other css links.
Then add following line to your css, where you need it:
font-family: 'Archivo Narrow', sans-serif;
For example, to apply this to the footer:
.details-footer {
font-family: 'Archivo Narrow', sans-serif;
}
Done!
P.S.: It's not a good idea to upload the font to your server, you should use Google Fonts when you can.
Have you defined the font? If not you do so like this:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
then you need to upload the .woff font file to your folder.
I want to use 'Open Sans' as default-font in my CKEditor, but can't find out how.
I am using CKEditor 4.4.5 full.
I've included the font in my html head:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Then I tried to change CKEditor's default font by changing the CSS in its contents.css:
body
{
/* Font */
font-family: "Open Sans";
font-size: 18px;
}
But this doesn't seem to work.
I also tried to set it in my Javascript:
CKEDITOR.config.font_names = "Open Sans;";
CKEDITOR.config.font_defaultLabel = 'Open Sans';
But this only seems to influence the display of the 'Font' Toolbar, not the style by itself.
note: I can use 'Open Sans' when I am using the "ckeditor-gwf-plugin", but this doesn't help me to set it as default font either.
Thanks for any help !
I assume you need to style the content area of CKEditor? Than you need to create a css file and add it to your CKEditor config like this:
contentsCss : '/path/to/style.css',
And in the style.css:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body, p { font-family: 'Open Sans', sans-serif; }
Make sure /path/to/style.css loads. Use your browsers developer tools.
Also set the appropriate selectors: body, p for text and maybe h1, h2, h3.
Most of the time the styling in this file will be the same typography styles used in your web application.
note: this is how you can generally change the default font-family and font-size for your CKEditor. In order to change it by using a custom CSS file, look at the accepted answer!
Just found out how to use a google font as default font in CKEditor:
/* contents.css of your CKEditor */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body
{
/* Font */
font-family: 'Open Sans';
font-size: 36px;
}
note: you need to add the google-font with #import url. and, be careful: font-size gets ignored here!
Then, with the help of this answer https://stackoverflow.com/a/12545905/3391783,
I also managed to set the default font-size:
/* contents.css of your CKEditor */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body, p
{
/* Font */
font-family: 'Open Sans';
font-size: 36px;
}
note: you need to add the p-tag in addition to the body-tag. like the mentioned answer explains, the styles of the paragraphs are overwriting the font-size of your body.
I have a little experience with css, and learning it day by day, but I need to figure this out.
I have a little problem with defining the styles for the page.
My page contains the following sections:
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
</head>
.
.
.
.
<article>
<header>
<h1 class="txtName">Your pathway to success starts here</h1>
</header>
<p class="txtDesc">
SomeText.................SomeText
</p>
</article>
and I have the .css file containing the following section:
article h1
{
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
The text inside the header is displayed with correct styles, however, text inside the paragraph is not displayed correctly. Looks like it is not recognizing given styles.
It displays the right font-family, but does not recognize font-weight.
What am I doing wrong here? Need some help.
Thank you
Link : https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
As you can see there is styles for fonts like "Light 300 Italic" or "Extra-Bold 800". You must select that styles for bolder or lighter fonts. Then you can use font-weight in css otherwise it doesnt works.
Dont Forget: When you select "light 300" you can use font-weight:300. So font-weight:200 is not make any differences. If you select too much font styles it will take more time to load fonts from google when opening your page. You can see performance indicator on right.
Your link tag should look like
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
You need to include each of the font weights that you want in the URL.
Your styles should be:
article h1
{
color: #0140be;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
You select which font style you want with the font-weight attribute.
JSFiddle