How to make google fonts visible for mobile? - html

I am developing a portfolio and I used google fonts in it. But I am unable to display it on the mobile. Please find the portfolio here
You can find the head tag below
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courgette&family=Poppins:wght#300&display=swap"
rel="stylesheet

You have .d-none set to display: none !important; on some media queries which is why the text disappears on smaller screens

Sometimes the link tag does not work on mobile browser . It's better to use CSS import :
<style>
#import url('https://fonts.googleapis.com/css2?
family=Courgette&family=Poppins:ital,wght#0,100;0,200;0
,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&
display=swap');
</style>

Related

Trouble getting font to display bold on simple webpage

I created a simple article page that uses the Google font, Montserrat for the article's main title. I set the font weight to 700 to make the title appear bold but when displayed on the page, it doesn't appear nearly as bold as it should (compared to the font reference). Here's a link to the sample page I made that illustrates the problem:
https://www.juicehouse.org/ohio-brain-drain.html
I think you are using an outdated format on your link to import the font, as I see in the example you are using the following:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat: 700, 900">
But now the way to specify the weight is different:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#700;900&display=swap" rel="stylesheet">
Live demo:
.w700{
font-family: 'Montserrat';
font-weight: 700;
}
.w900{
font-family: 'Montserrat';
font-weight: 900;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700;900&display=swap" rel="stylesheet">
<p class="w700">font-weight: 700</p>
<p class="w900">font-weight: 900</p>

Linking fonts to #font-face through HTML?

I have an assignment in university which revolves around not editing anything in the HTML-code and only the CSS-code.
I see that my teacher has used the <link> element with something regarding fonts. I just want to make sure if I can use anything from that element to apply a font to the webpage through #font-face. He has not attached any .OTF files it is therefore that I am asking.
The code:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght#300&family=Barlow+Semi+Condensed:wght#300;700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Bungee+Shade&display=swap"
rel="stylesheet">
If those link elements are in the HTML you have been given then you can just use those fonts in your CSS without doing anything further.
Here's a simple example using one of the Bungee fonts:
body {
font-family: 'Bungee Outline', sans-serif;
font-size: 36px;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght#300&family=Barlow+Semi+Condensed:wght#300;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Bungee+Shade&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
</head>
<body>
<div>Some non-alterable HTML</div>
</body>
</html>

Font-size not getting bigger in CSS

I have an h1 element that I want to change the size of it among with other properties, but the only thing gets changed is the font family.
Note that I am using some bootstrap gridding, which I don't know it might be which causing this problem I am still new to Bootstrap.
h1{
font-family: 'Montserrat';
line-height: 1.5;
font-size:3.5rem;
}
<head>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="row">
<div class="col-lg-6">
<h1>Hello World.</h1>
</div>
<div class="col-lg-6">
</div>
</div>
Also, I have tried my code on different browsers and devices, I cleared the cache I have on my browser and same results.
How to approach issues of type "My styles are not applied"
First, you should use the dev tools in your browser to investigate the element in your DOM.
As you can see, your font-size value is overwritten by Bootstrap's styles (coming from that _rfs.scss file mentioned at the right).
Option A: Display Headings (Bootstrap, only in your case)
Use Bootstrap's Display Headings. This lets you define different font sizes on your headings.
In your case, you could try this one:
<h1 class="display-1">Hello World.</h1>
Option B: Class Specificity
Add a class by yourself and refer to this class in your CSS.
h1.my-heading {
font-family: 'Montserrat';
font-size: 15rem;
}
<head>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="row">
<div class="col-lg-6">
<h1 class="my-heading">Hello World.</h1>
</div>
<div class="col-lg-6">
</div>
</div>
Option C: !important (not recommended)
Use the !important keyword, which guarantees, that your styles are preferred on h1 elements. This is problematic as soon as multiple !important statements exist and is rather considered bad practice.
font-size: 15rem !important;
you just need to be more specific in the CSS query selector
.bigger {
font-family: 'Montserrat';
line-height: 1.5;
font-size: 3.5rem;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-lg-6">
<h1 class="bigger">Hello World.</h1>
</div>
<div class="col-lg-6">
</div>
</div>
Some examples with a higher specificity:
table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }
Or add the same selector after the existing one:
td { height: 50px !important; }
Or, preferably, rewrite the original rule to avoid the use of !important altogether.
[id="someElement"] p {
color: blue;
}
p.awesome {
color: red;
}
RES: MDN Specificity
You are on the right track with bootstrap.
The easiest way to figure out why something does or does not work, is to inspect the element in the browser.
You see there, that rfs.scss overwrites your font-size.
Now you can just google "how to change bootstrap font size" if you want to change it in general, or create a css-class and assign that to your h1.
Bootstrap is indeed causing this. Currently you are setting the font-size with just the h1 element, which get's overruled by the CSS of bootstrap.
The only thing you have to do is that you just have to specify the h1 so that it is going to overrule bootstrap.
You can also use !important for your h1. But I always find that the easy way out and not really nice looking.
The only reason your font is working is because it isn't specified in any of bootstrap's CSS.

Why the Alegreya font doesn't display correctly in some browsers?

I use the following minimal HTML code for reproducing the problem:
<html>
<body>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Alegreya&display=swap" rel="stylesheet">
<style>
body {
font-family: "Alegreya"
}
</style>
<h1>Testing the web font Alegreya</h1>
Testing the web font Alegreya
</body>
</html>
The document is displayed like this:
As you can see, there is a weird outline around some letters. This behavior appears only for H1 tags and only for the webfont Alegreya. In normal text, it works. With another font, it works. With the Alegreya font installed on the system, it works too. It has to be downloaded as a webfont to see the bug.
Tested on Windows 10, on two computers. It doesn't work on Opera, Edge and Chrome. It does work on IE and Firefox though.
What's happening here?
I had the same issue. It seems related to the font-weight applied.
I fixed it by specifying explicitly the font weight(s) to be loaded in the URL.
See the code snippet below.
<html>
<body>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Alegreya:wght#400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: "Alegreya"
}
</style>
<h1>Testing the web font Alegreya</h1>
Testing the web font Alegreya
</body>
</html>

Bootstrap 3 Ignores custom.css on load

I have this very strange problem.
I'm trying to code with Bootstrap 3. in the <head> I declare links for CSS to be used. Although the HTML completely ignores my third link.
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/custom.css" rel"stylesheet">
</head>
As you can see, the third link refering to css/custom.css is there correctly. But on the website it's being completely ignored.
I have tried coding a simple button using
<button type="button" class="btn btn-primary">Default</button>
And in custom.css I have the .btn class
.btn{
border-radius: 0px;
}
So the button's border should be straight not rounded like it is in bootstrap3. Problem is that my custom.css doesn't want to work and it's just completely ignored.
Can anyone please help me with this?
Thank you.
Patryk.
Add '=' after 'REL'.
Your code:
<link href="css/custom.css" rel"stylesheet">
Should be:
<link href="css/custom.css" rel="stylesheet">
If custom.css is correctly loaded than bootstrap code has a higher precedence, so you might want to use button.btn.btn-primary{border-radius: 0px;} or .btn.btn-primary{border-radius: 0px!important;}
As #Damian says it, the custom.css file is not loaded at all.