im using Bootstrap framework but i want to change font from default to google font.
Im done something like this:
<head>
<link href='http://fonts.googleapis.com/css?family=Advent+Pro&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<style>
body{
font-family: 'Advent Pro', sans-serif !important;
}
</style>
When Bootstrap isnt included that code works fine, but when im "turning" Bootstrap font changing to default
All in all that code just not works and i dont know why...
Please try this:
In the head section of your html place your custom.css below bootstrap.css.
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
Related
I mean icons from fontawesome or fonts from google fonts. In HTML i place something like this in the head:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
What about react?
You can just import it in your style sheet like so
#import url('https://fonts.googleapis.com/css?family=Roboto');
And your body style will become
body {
font-family: 'Roboto';
}
inset the link in your index.html
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
I am trying to change the width of arrows in a bootstrap carousel. I have worked out that I need to change the width of the carousel.scss. However this is an external library and the css that I have tried (below) doesn't work. I have looked at many examples but I don't know how to incorporate it into my work. I would really appreciate someones help, or even a link to another question that looks like this problem. Thanks
CSS
.modal-body {
padding:15px, 8%;
}
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Trip Guider</title>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic'
rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/creative.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
style.css is the custom css file
The easiest way to do this is to add a new stylesheet to your project called "CustomStyles.css". Add your override code to this stylesheet.
Provided you call your stylesheet as the last stylesheet on the page then the styles in "CustomStyles.css" should override the default bootstrap behaviour by default. If it still causes an issue it is possible to force your style to take precedence by marking it as !Important (shown below) but this shouldn't be necessary.
When loading your page after making this change be sure to reload the page emptying cache (ctrl f5) to make sure the original style isn't cached in your local browser.
.modal-body {
padding:15px, 8% !Important;
}
---- Result of chat conversation ------
In essence this solution works fine for overriding styles. In this instance though the wrong style was being overridden. The particular problem was resolved by inserting the following into the new stylesheet.
.carousel-control-prev {
left: -50px;
}
.carousel-control-next {
right: -50px;
}
I've searched around a bit and can't find a clean solution.
Bootstrap is overriding my custom css. I have ensured that my custom script file is below the bootstrap css file, but this still doesn't solve the issue.
If i tack the !important tag on to a font-size, that works. I just feel like going through and putting !important after everything is sloppy and time consuming. Thoughts?
I am running a rails app, if that is germane to my issue.
Script
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type="text/css">
<link rel="stylesheet" type="text/css" href="style.scss">
CSS
h1 {
font-weight: 600;
color: #fff;
font-size: 5.5em !important;
}
You need to use CSS specificity to override the default Bootstrap CSS without using !important. So your h1 tag could be defined using the following:
CSS
body h1 {
color: #fff;
font-size: 5.5em;
font-weight: 600;
}
Just adding body before any of your CSS declarations should override the Bootstrap CSS. See this Code Pen to see an example with your code.
I know this is a short question, but how do you use multiple custom Google Fonts, i.e Baloo and Roboto, in the text?
In this example the text should be Roboto and headings should be Baloo.
Thanks for your time.
You click "select this font" for each font you want to use, and google will give you a single link tag with multiple fonts. You can also include multiple link tags for each font.
h1 {
font-family: Baloo;
}
h2 {
font-family: Roboto;
}
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
<h1>Baloo</h1>
<h2>Roboto</h2>
google fonts is now using css2 and the answers above are outdated.
the solution using css2 would be:
https://fonts.googleapis.com/css2?family=Baloo&family=Roboto
source: google fonts doc for css2
Go to https://fonts.google.com/
Search for say Roboto - https://fonts.google.com/specimen/Roboto
Hit "select this font" and you'll get a link to add to you html like this:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Note: You can also get one line with multiple fonts by piping the families.
Add this link(s) in your <head> tag
Use CSS to select the font with font-family.
See example below:
h1{
font-family: "Baloo"
}
p{
font-family: "Roboto"
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
</head>
<body>
<h1>Baloo</h1>
<p>Roboto</p>
</body>
Use as many as you want and import them as a stylesheet.
https://fonts.google.com/
For your example:
h1 { font-family: 'Baloo', cursive; }
p { font-family: 'Roboto', sans-serif; }
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h1>heading</h1>
<p>paragraph</p>
I am trying to add a google-font to my jinja2 template. I downloaded the google font and put it in the project directory, using this
<link rel='stylesheet' type='text/css' href="{{ url_for('static', filename='fonts/Oswald-Bold.ttf')}}">
i tried to use the font in the template but it is not working. What is the proper way of doing this? The CSS looks like this
body {
background-color: #ED9121;
font-family: 'Oswald';
font-weight: 700;
}
If I use the font directly from google instead of from my server, it works fine. Please help.
Try to use this in your CSS
#font-face {
font-family: Oswald;
src: url(/static/fonts/Oswald-Bold.ttf);
}
body {
font-family:Oswald;
}
remove href="{{ url_for('static', filename='fonts/Oswald-Bold.ttf')}}"
also make sure your font is inside the folder fonts.
I tried it and for me this is working.
We can change the font size by using the font tag and customizing the size
for example :
<html>
<head>
</head>
<body>
<p><font size="6">Font size is 6</font></p>
<p><font size="24">Font size is 24</font></p>
</body>
</html>