So I've downloaded a font from Fontsquirrel which has all the letters used in Estonian language. It works fine in the browser when I use all the common letters, but as soon as I use the letter "ž", it's not displaying the correct font.
This is how my HTML looks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>8 Delfiini | Massaažiga argipäevast kõrgemale</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"> <!--page wrapper-->
<section id="avaleht">
<h1>Massaažiga argipäevast kõrgemale</h1>
</section>
...
And the CSS:
h1 {
font-family: 'alluraregular';
font-size: 6em;
text-align: center;
}
I changed the "lang=en" to "lang=et", but it didn't work.
This is the result:
Is there a way to make this work properly? Thank you!
The FontSquirrel webfont generator by default uses “Basic subsetting” for “Western languages”, which effectively means ISO Latin 1, designed for languages of Western and Northern Europe, lacking e.g. ž, z with caron. To overcome this, select “Expert” in the user interface, then either “No subsetting” or “Custom subsetting” with suitable options (either “Latin Extended-A” or “Estonian” should handle the issue). Since the font is small, “No subsetting” is the best option.
Related
I'm currently working on my own website. So i coded some HTML with a style.css . Testing it offline - everything works as expected but when I upload it to my webhoster and get a preview of my website, there is only the raw html visible without anything from the style.css
I already checked the path and overwrote it with the for me correct path (from the root of the webserver) - it changed a little bit but still is far away from the right appearance.
The head of my index.html (The only page I have)
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> test </title>
<link rel="icon" href="img/fav.png" type="image/x-icon">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="ionicons/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- main css -->
<link href="httpdocs/css/style.css" rel="stylesheet">
<!-- modernizr -->
<script src="js/modernizr.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
as well as my path:
https://i.imgur.com/0YNkUrJ.png
The result is a described aboth only some html text but not how it would looks like with style.css
You should use relative paths from the httpdocs.
So change httpdocs/css/style.css to ./css/style.css.
So I'm using Dreamweaver and the bolded words appear on the DW editor but when I open the webpage in Chrome, I don't see the words bolded. Oh and the funny thing is that Safari and Firefox seem to display the bolded words while Chrome cannot. Which leads me to believe this is a Chrome-only issue. What's going on with my Chrome browser?
Here's a snippet of code that uses bold text:
<strong><br>
<h4>Membership</h4>
</strong>
<p dir="ltr"><strong>Eligibility:</strong> All users must be <strong>18</strong> years of age or older and be eligible to legally work in the U.S.</p>
<p dir="ltr"><strong>Account:</strong> All information provided in your account must be accurate in order to achieve the best results from using our service. We are not liable for consequences that may result from fraudulent misrepresentation. </p>
<p dir="ltr"><strong>Profile:</strong> Profile pictures must be appropriate for the professional atmosphere and clearly contain the person representing the corresponding profile only. Failure to comply will result in suspension of membership. </p>
<strong> <br>
This is what sets up the HTML styling:
<head>
<!-- This needs to be on every HTML page -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>ProConnect</title>
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/legal.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<meta http-equiv="refresh" content="" >
<link type="text/css" rel="stylesheet" href="css/legal.css"/>
</head>
The CSS:
.container{
margin-right: auto;
margin-left: auto;
}
p{
text-align: justify;
}
Whenever you import custom fonts, be sure to include all weights and styles that you will need. Normal font weight is usually 400, and bold is usually 700. The style sheet below would include pretty much everything you would need for the Roboto font.
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
you can use this simple method to bold words
use <b> tag to bold words
just adding <strong> tag your word wont be bold you have too add this css rule to it font-weight: bold; only then it will work
<b>bold word</b> normal text
<b><br>
<h4>Membership</h4>
</b>
<p dir="ltr"><b>Eligibility:</b> All users must be <b>18</b> years of age or older and be eligible to legally work in the U.S.</p>
<p dir="ltr"><b>Account:</b> All information provided in your account must be accurate in order to achieve the best results from using our service. We are not liable for consequences that may result from fraudulent misrepresentation. </p>
<p dir="ltr"><b>Profile:</b> Profile pictures must be appropriate for the professional atmosphere and clearly contain the person representing the corresponding profile only. Failure to comply will result in suspension of membership. </p>
<b> <br>
i use this method to bold in my website
You want to add <b></b> tag to your HTML file instead of strong or you can do it by CSS also like this:
strong {
font-weight: strong;
}
You can also keep your texts in normal way and just add some colours to look or more attractive or eye-catching:
strong {
color: red;
}
Remember one thing I used CSS including strong tag because you have kept that word which you want to decorate in <strong></strong> tag.
Iam experiencing some weird issue with HTML 5, currently i'm retrieving information from a Database on MySQL, the database is encoded using UTF-8, and when i retrieve information without using any HTML markup everything is working fine, but in pages with HTML markup things are not properly working.
Here is a page that uses HTML markup
Here is a page without any HTML Markup ( Things working well )
The query's are the exact same.
Here is the HEAD information:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quizu - Testes de personalidade</title>
<!-- Bootstrap -->
<link href="css/normalize.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<script src="js/jquery-1.11.2.js"></script>
<script src="js/meu.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="css/quizu.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Thanks in advance, any help will be appreciated.
The problem was in my MySQL query, although my Database was encoded in UTF-8, the query was not being made using UTF-8. All i had to do "SET NAMES UTF-8" to my query.
$dbHandle = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8", $dbUser, $dbPass,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
I have uploaded a page to a webserver. When I go there with IE and switch browser mode to IE 8 or IE 7 to see if html5shiv and respond.js are downloaded I see that they are not. Anybody knows why ? I use bootstrap's recommended template with a bit added code in a . Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<section>
<h2>how are you doing ?</h2>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
and my uploaded page is there http://toto3000.byethost24.com/bootstrap/basic%20ii.html
Correct your first link by adding prefix (http://).
FROM: //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
TO : http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
Your browser is trying to use a file protocole (file://)
It works. I was switching "browser mode" in IE rather than "document mode" that's why I couldn't see these files. My bad.
I am new to Bootstrap and ran into a strange problem. I am trying to include a cool hover effect for a facebook png image.
Everything works fine when I put the CSS in the as an internal style rule. It won't work when I put it in an external style sheet.
All the paths are working because I have been successfully overriding the default bootstrap CSS rules.
With an external style sheet the image link is there but the image does not display. Kind of hard to explain. Not sure what to do?
http://jsbin.com/UFoRIYex/394/edit?html,css
Here is a link to the website where I got the html/css from. http://bradsknutson.com/blog/css3-ro...l-media-icons/
Like I said. Everything works internally. Just not externally....
Try the bootstrap cdn (code copied direct from Bootstrap).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Problem solved. I changed the path to ../img/facebook-hover.png and it worked.Thanks!