საიტზე სასურველი ფონტის ჩასმა

4-04-2021, 12:36

საიტის სტილებში თუ არ მივუთითებთ სასურველ შრიფტს, მაშინ საიტის გახსნისას გამოჩნდება ის ფონტი რომელიც ნაგულისხმებია ბრაუზერის "სეტინგებში". იმისათვის რომ სასურველი შრიფტით გაიხსნას საიტი, ჩვენ უნდა ჩავსვათ ეს შრიფტი საიტის სტილებში. არსებობს რამდენიმე გზა.
ჯერ იხილეთ კოდი და შემდეგ განვიხილოთ ეს გზები.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ფონტები</title>
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
    <style>
p{
    font-size: 40px;
}
p.a {
  font-family: "Times New Roman", serif;
}

p.b {
  font-family: Arial, Helvetica, sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Train+One&display=swap');

@font-face {
   font-family: nino;
   src: url(bpg_nino_mtavruli_normal.ttf);
}
</style>
</head>
<body>
    <h1>ფონტების თვისებები: თანაბარი სისქის და არათანაბარი სისქის ასოები</h1>

<p class="a">This is a paragraph, shown in the Times New Roman font.  "serif"</p>

<p class="b">This is a paragraph, shown in the Arial font.  "sans-serif"</p>

<p style="font-family: nino; font-weight: 300;">ეს არის ქართული ფონტი "ნინო"</p>
    <p style="font-family: Lobster;">This is a Font Lobster</p>
    <p  style="font-family: 'Train One', cursive;">This is a Font TrainOne </p>
    
</body>
</html>

პირველ რიგში უნდა ავღნიშნოთ რომ, ფონტები ორი ტიპისაა: არათანაბარი სისქის (serif) და თანაბარი (sans-serif) სისქის მოხაზულობის. უფრო დაწვრილებით ამ საიტზეა
ახლა განვიხილოთ ჩასმის მეთოდები: 1) ყველაზე მარტივია გუგლის ფონტების ჩასმა. შევდივართ საიტზე https://fonts.google.com/ ავირჩევთ სასურველ ფონტს, მოვნიშნავთ, ავირჩევთ სტილს და გამოსულ ფანჯარაში ავირჩევთ პირდაპირ ბმულს, დავაკოპირებთ და ჩავსვამთ საიტის "ჰედერში", ან
2) ავირჩევთ იმპორტირებას ( @import-ს) და ჩავსვამთ სტილებში.
3) გადმოვიწერთ სასურველ ფონტს, განვათავსებთ საიტის ფოლდერში. შემდეგ სტილების ფაილში ჩავსვამთ ინსტრუქციას მაგ;
@font-face {
font-family: nino;
src: url(bpg_nino_mtavruli_normal.ttf);
}
სადაც მივუთითებთ დასახელებას და მისამართს. ხოლო შრიფტი რომ გამოჩნდეს საიტზე, შესაბამის სტილში უნდა ჩავსვათ font-family: nino;
ამ სტატიის სათაური სწორედ ამ მეთოდითაა გაკეთებული. სათაური ფონტ "ნინოთი" ჩანს.
ქართული ფონტების გადმოსაწერი საიტი fonts.ge

საიტზე სასურველი ფონტის ჩასმა

მსგავსი სიახლე