যে ভাবে আপনার Website এ Custom Font Style যুক্ত করবেন।

লিখেছেনঃ
প্রকাশিতঃ
কেমন আছেন আপনারা।
আশা করি আজকেও আপনারা ভাল আছেন।
আর আমিও ভালই আছি।

যে ভাবে আপনার Website এ Custom Font Style যুক্ত করবেন।

যে ভাবে আপনার Website এ Custom Font Style যুক্ত করবেন।

আজকের পোস্ট করা শুধু মাত্র এক জনের অনুরোধের জন্য।
আমিও ভেবে দেখলাম যে , এই পোস্ট টি আপনাদের সকলের উপকারে আসবে।
কেন এ কথা বলছি , একটু পরেই আপনি টা নিজেই বুঝতে পারবেন।

আজ আমি আপনাদের সাথে টেক্সট ফন্ট নিয়ে বিস্তারিত আলোচনা করব।
প্রত্যেক টা ওয়েব সাইটে বিভিন্ন স্টাইলের টেক্সট দেখে থাকবেন।
আসলে কিভাবে এসব ফন্ট তারা ইন্সটল করে ?
জানেন কি ?

যে ভাবে আপনার Website এ Custom Font Style যুক্ত করবেন।

যদি না জেনে থাকেন তবে আজকের এই টপিক আপনার জন্য। আজকের এই টপিক টি মন দিয়ে পরুন ,
আজ থেকে আপনিও বিভিন্ন স্টাইল এর ফন্ট আপনার ওয়েব সাইট এ ইন্সটল করতে পারবেন।

চলুন শুরু করা যাক ,
প্রত্যেক টি ওয়েব সাইটে নিচের স্ট্রাকচার টি পাবেন।

<html>
<head>...Header code here...</head>
<body>
<content>...Article and sibebar Html Code here...</content>
<footer>...Footer html code here...</footer>
</body>
</html>

আশা করি উপরক্ত স্ট্রাকচার টি আপনি দেখে নিয়েছেন।
আমি সব গুলো বাদ দিয়ে আজ

<head>...Header code here...</head>

অংশ টি নিয়ে কথা বলব। কেননা এই অংশেই আমরা ফন্ট স্টাইল এর স্টাইল শীট এর কোড টি বসাব।
আমি ১০ টি ফন্ট স্টাইল এর কোড শেয়ার করতেছি , আপনি এ গুলো আপনার ওয়েব সাইটে ব্যবহার করতে পারবেন সম্পূর্ণ ফ্রি তে।
নিচের যে ফন্ট স্টাইল টি আপনি পছন্দ করেছেন , সেই স্টাইল শীট টি আপনি আপনার ওয়েব সাইটের </head> এর পূর্বে কোথাও এড করে দিবেন।

উদাহরন স্বরূপঃ-
<head>
... some of code here...
<!-- Font family stylesheet start -->
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap" rel="stylesheet"/>
<!-- Font family stylesheet end-->
</head>

...ইংরেজি ফন্ট স্টাইল শীট...

১ম স্টাইল শীটঃ- Teko
Teko
Teko


<link href="https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap" rel="stylesheet"/>

২য় স্টাইল শীটঃ- Goldman

Goldman
Goldman


<link href="https://fonts.googleapis.com/css2?family=Goldman&display=swap" rel="stylesheet"/>

৩য় স্টাইল শীটঃ- Nova Flat

Nova Flat
 Nova Flat


<link href="https://fonts.googleapis.com/css2?family=Nova+Flat&display=swap" rel="stylesheet"/>

চতুর্থ স্টাইল শীটঃ- Rancho

Rancho
Rancho


<link href="https://fonts.googleapis.com/css2?family=Rancho&display=swap" rel="stylesheet"/>

পঞ্চম স্টাইল শীটঃ- Damion

Damion
Damion


<link href="https://fonts.googleapis.com/css2?family=Damion&display=swap" rel="stylesheet"/>

...বাংলা ফন্ট স্টাইল শীট...

ষষ্ঠ স্টাইল শীটঃ- Hind Siliguri

Hind Siliguri
Hind Siliguri


<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&display=swap" rel="stylesheet"/>

সপ্তম স্টাইল শীটঃ- Galada

Galada
Galada


<link href="https://fonts.googleapis.com/css2?family=Galada&display=swap" rel="stylesheet"/>

অষ্টম স্টাইল শীটঃ- Mina

Mina
Mina


<link href="https://fonts.googleapis.com/css2?family=Mina&display=swap" rel="stylesheet"/>

নবম স্টাইল শীটঃ- Atma

Atma
Atma


<link href="https://fonts.googleapis.com/css2?family=Atma:wght@300&display=swap" rel="stylesheet"/>

দশম স্টাইল শীটঃ- Baloo Da 2

Baloo Da 2
Baloo Da 2


<link href="https://fonts.googleapis.com/css2?family=Baloo+Da+2&display=swap" rel="stylesheet"/>

আপনি উপরক্ত স্টাইল শীট এড করে নেওয়ার পর আর ১ টি শুধু আজ করতে হবে।
আপনি যেখানে বা যে CSS এ উক্ত ফন্ট দেখানে চান , সেখানে ঠিক নিচের মত করে ফন্ট স্টাইল যুক্ত করবেন।

উদাহরন স্বরূপঃ-
body {font-family:Teko;}
অর্থাৎ 
body {font-family:এখানে ফন্টের নাম দিবেন;}

আশা করি আপনারা আজকের টিউন টি বুঝতে পেরেছেন। যদি কোন বিষয়ে না বুঝে থাকেন তবে মন্তব্য করে জানাতে লজ্জা পাবেন না।
কারন
"লজ্জা মূর্খতার চেয়েও নিকৃষ্ট"

আপনার যদি এসব ফন্ট পছন্দ না হয় তবে নিচে গুগল ফন্টের লিংক দিচ্ছি সেখানে গিয়ে আপনার পছন্দের ফন্ট বেছে নিতে পারবেন।
এখানে প্রায় ১০২৩(এক হাজার তেইশ) টি ফন্ট স্টাইল আছে।

ফন্ট স্টাইল লিংকঃ-
https://fonts.google.com/

পরিশেষে বলতে চাই , আজকের টিউনে আমার অগচরে ভুল ভ্রান্তি থাকতে পারে , দয়া করে আমাকে ক্ষমা করে দিবেন।
যদি আজকের টিউন আপনার সামান্য তম কাজে আসে , তবে আপনার মতামত জানাতে ভুলবেন না।
আজ এ পর্যন্তই।
সকলে ভাল থাকবেন।
সকলের সু-সাস্থ ও সুখি হন এই কামনায় আজকের টিউন এখানেই শেষ করছি।
টাটা।

ক্রেডিট বাইঃ- SMsudipBD.Com
পোস্ট রেটিং করুন
ট্যাগঃ
About Author
4 comments
Sort by