Multple Google Fonts in html doc - html

I want to apply a google font to only specific css selectors or elements in my page.
I also want the same font in mutliple weights (Eg Roboto). Not controlled using the css attribute but actually using the separate font versions provided by google.
If possible id prefer not to have an external stylesheet.
Is this possible? I dont mind doing in a script tag if i have to.

Here you have a example and I've put the style in the html so you dont need a external stylesheet although I wouldn't recommend it
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&family=Rowdies&display=swap" rel="stylesheet">
<style>
h2,
h3,
span {
font-family: 'Roboto', sans-serif;
}
h2 {
font-weight: 500;
}
h3 {
font-weight: 700;
}
h1,
p {
font-family: 'Rowdies', cursive;
}
</style>
<h1>h1 Rowdies</h1>
<h2>h2 Roboto font-weight 500</h2>
<h3>h3 Roboto font-weight 700</h3>
<p>p Rowdies</p>
<span>span Roboto</span>
I also want the same font in mutliple weights (Eg Roboto). Not controlled using the css attribute but actually using the separate font versions provided by google.
Not a 100% sure if its possible or not but I see no reason why you can't just use the font-weight property

Related

Possible to alias a font family/weight?

I'm working in a project where font families are defined inline style with weighting detail built into them, like font-family: Inter_700Bold
Is there a way to alias that in css/html where font-family: Inter_700Bold becomes font-family: Inter,font-weight:700
One possible solution could be to have a selector that targets elements by the inline style you mention, and apply the weight/actual font to them.
[style*="font-family: Inter_700Bold"] {
font-family: 'Inter_700';
font-weight: 700;
}
<p style="font-family: Inter_700Bold;">has the font family</p>
<p style="text-transform: capitalize; font-family: Inter_700Bold;">has other styles as well</p>
<p>doesn't have the font family</p>
You can't use some sort of dynamic aliases in html/css, you gonna need some kind of preprocessor for that.
But while defining a #font-face, you define a local page alias for the font:
#font-face {
font-family: 'this_font_will_be_used_through_this_long_ugly_name';
...
}
.some_element{
font-family: this_font_will_be_used_through_this_long_ugly_name;
}
Sure you will need all possible combinations defined as such the #font-face definitions.

Line Spacing for Individual Fonts

I'm using custom fonts in WordPress. I do it by defining font family. I'm having problem if line spacing with One if my fonts. If I use line-height code in my custom css I'd theme, it's applied to all the fonts which isn't required. I just want to change line spacing of problematic font. Can we define line spacing for a font while defining its font family?
Best Regards
You can implement font-family with line-height in one class. I mean something like this:
HTML:
<div class="lato-font">Text</div>
<div class="monospace-font">Text</div>
CSS:
.lato-font {
font-family: Lato, sans-serif;
line-height: 1.6;
}
.monospace-font {
font-family: monospace, serif;
line-height: 1.6;
}
In this case you can set custom line-height for each font.
You'll have to define line-height for each element or class that uses the custom font.
h1,h2,h3,h4,h5,h6,.lead-text,.some-other-class,li {
font-family: ######;
line-height: 20px;
}

Font-Family uses different font on same header

When loading a Google font (Open sans) like this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
and using it in the CSS like this:
font-family: 'Open Sans',sans-serif !important;
On different pages but the same header, css etc the page loads:
page 1: font-family: 'Open Sans',sans-serif !important;
page 2: font-family: 'Open Sans',sans-serif !important;
On both pages the Google-font and css get loaded.
Anybody a idea what may cause this?
Try to make your CSS rule more specific. I see you're using the !important tag, so you're probably overwriting existing rules from a framework or elsewhere.
For example, if you're trying to give a font to all headers, you probably have other divs surrounding them. Let's say that div's called content:
body .content .h1, body .content .h2 {
font-family: 'Open Sans',sans-serif !important;
}
The best thing to do would be the see why your styles aren't being set in inspect element. Right click with Chrome > Inspect over your headers, and see what's styling them. You should try and not use !important rules anywhere unless completely necessary.

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!

How to give different font for all bolded text in html?

I don't think there is an easy way to do this, and it looks like a shortcoming in CSS to me.
Anyway here is the problem:
I want to use a different font for all the bold text in my web page.
For example, take look at the following markup:
<span>Hello</span> <strong>world</strong>
and the CSS:
span { font-weight: bold }
Now is there an easy or recommended way to get both the bolded words (the one using the tag and the one using the css rule) to be using a different font?
Something like:
*[font-weight:bold] { font-family: 'Comic Sans'}
Edit:
What I want is to have a global option of setting font for all bolded text in the page. Given that normally CSS files tend to get bigger in size over time, giving a special class for all places where bold text is used is not a feasible solution.
It involves a little lying, but this seems to work in Firefox 13, Chrome Latest, Opera 11.64, and even IE9:
<h1>This is Bold!</h1>
<p>This is <span id="bold">text</span> that is <strong>bolded</strong>.</p>
<p>Something <span style="font-style: italic;">here</span> is <i>Italicized</i>!</p>
#font-face {
font-family: 'Merriweather';
font-weight: regular;
src: local('Unkempt'), url('http://themes.googleusercontent.com/static/fonts/unkempt/v4/MsFMwD9wD1OCzqw3trD0PA.woff') format('woff');
}
#font-face {
font-family: 'Merriweather';
font-weight: bold;
src: local('Merriweather Bold'), local('Merriweather-Bold'), url('http://themes.googleusercontent.com/static/fonts/merriweather/v4/ZvcMqxEwPfh2qDWBPxn6nnl4twXkwp3_u9ZoePkT564.woff') format('woff');
}
#font-face {
font-family: 'Merriweather';
font-style: italic;
src: local('Cousine Bold Italic'), local('Cousine-BoldItalic'), url('http://themes.googleusercontent.com/static/fonts/cousine/v4/y_AZ5Sz-FwL1lux2xLSTZXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
* {
font-family: 'Merriweather', serif;
}
strong, #bold {
font-weight: bold;
}
http://jsfiddle.net/userdude/vF9Qr/4
It’s a design feature, not a shortcoming, of CSS that properties work independently of each other, except where otherwise indicated in CSS specifications. There is no way to couple two properties together. Even if you set them in the same rule, as in .foo { font-weight: bold; font-family: Awkward }, they act independently (and either of them, or both, could be overridden by other style sheet rules).
So you just have to design your use of markup and CSS so that that uses a specific font for all bold text, if that’s what you want. (It’s typographically very questionable and makes me wonder what design error caused that assumed need.) Note that in general browser style sheets can bold whatever they want to, and they typically want to bold heading elements and th elements, among others. So if you wanted to prevent anything from getting bolded except on your command, you would start with * { font-weight: normal; }.
In your code all the span are bold why you don't just change the font-family of the span tag ?
change your html to
<span>Hello <strong>world</strong></span>
and your css to
span {font-weight:bold;}
strong {font-family:'Comic Sans';}
You can also use the strong tag, it the perfect tag to use bold text.
http://www.w3.org/wiki/HTML/Elements/strong
Add a class to the span (Bold), not a style, and just do this:
span.Bold { font-weight: bold }
strong, span.Bold { font-family: 'Comic Sans' }
I don't see the problem here? Since the emboldened text will be contained either within a b or strong element (depending on your markup), you can simply target that with a font-family rule?