গুগল ওয়েব ফন্ট সিএসএস ফাইলে কীভাবে আমদানি করবেন?

Question

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

Answer 1

@importপদ্ধতিটি ব্যবহার করুন :

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

স্পষ্টতই, "ওপেন সানস" ( Open+Sans) হ'ল ফন্ট যা আমদানি করা হয়। সুতরাং এটি আপনার সাথে প্রতিস্থাপন করুন। হরফের নামটিতে যদি একাধিক শব্দ থাকে, তবে +প্রতিটি শব্দের মধ্যে একটি চিহ্ন যুক্ত করে URL- এ এনকোড করে ।

@importকোনও নিয়মের আগে আপনার সিএসএসের একেবারে শীর্ষে স্থানটি নিশ্চিত করে নিন ।

গুগল ফন্টগুলি স্বয়ংক্রিয়ভাবে @importআপনার জন্য নির্দেশ তৈরি করতে পারে। একবার আপনি কোনও ফন্ট বেছে নিলে তার (+)পাশের আইকনটিতে ক্লিক করুন । নীচে-বাম কোণে, "1 পরিবার নির্বাচিত" শিরোনামে একটি ধারক উপস্থিত হবে। এটি ক্লিক করুন, এবং এটি প্রসারিত হবে। বিকল্পগুলি নির্বাচন করতে "কাস্টমাইজ করুন" ট্যাবটি ব্যবহার করুন এবং তারপরে "এম্বেড" এ ফিরে যান এবং "এম্বেড ফন্ট" এর নীচে "@ ইমপোর্ট" ক্লিক করুন। <style>ট্যাগগুলির মধ্যে সিএসএস আপনার স্টাইলশিটে অনুলিপি করুন ।

Comments

আপনি @ ইম্পোর্টের ব্যবহার এড়িয়ে যাবেন কারণ ফাইলটি না পাওয়া পর্যন্ত এটি অন্তর্ভুক্ত সংস্থানটির লোডিং পিছিয়ে দেবে। বিস্তারিত উত্তর এখানে দেখুন: stackoverflow.com/a/12380004/925560

— রেনাতো কারভালহো

@ ইমপোর্ট লাইনটিকে শীর্ষে স্থানান্তরিত করা আমার জীবনকে সমাধান করেছে! ধন্যবাদ!

— joalcego

গুগল কেন এটি বলে? গুগল অন্তর্দৃষ্টিগুলি @ ইম্পোর্ট না করার দাবি করে। বিকাশকর্তা.কম / স্পিড / পেজস্পিড / ইনসাইট ?

— বিপদ 89

এটি পুরানো উত্তর is @importক্রমান্বয়ে লোড হয় এবং সেরা এড়ানো হয়: varvy.com/pagespeed/avoid-css-import.html আজকাল গুগল ফন্ট লোড করার জন্য পছন্দের (এবং ডিফল্ট) উপায়টি ব্যবহার করা হচ্ছে <link>।

— চক লে বাট

আপনি এসইও এলে এবং গুগল পেজস্পাইড অন্তর্দৃষ্টি দিয়ে আপনার পৃষ্ঠার গতি অপ্টিমাইজ করতে শুরু করলে আপনি এটি অনুশোচনা করবেন। <link>পরিবর্তে এর বিতরণটি ব্যবহার করুন এবং অনুকূলিত করুন ।

— হিসাবরক্ষক

Answer 2

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

@ ইম্পোর্ট ব্যবহার না করাই ভাল। উপরে উল্লিখিত লিঙ্ক উপাদানটি আপনার বিন্যাসের মাথায় কেবল ব্যবহার করুন।

Comments

"ব্যবহার না করা ভাল" এর উপর আপনি কী প্রসারিত করতে পারেন? আমি এই প্রশ্নের জন্য অনুসন্ধান করেছি কারণ আমি জানতে চাই যে কোন পদ্ধতিটি সবচেয়ে ভাল বলে বিবেচিত হয়।

— অ্যাডাম ফাঁপা

@ ইম্পোর্টে আমার ইন্টারনেট এক্সপ্লোরার সমস্যা ছিল। কখনও কখনও এটি শুধু এটি পড়া না।

— বার্ক

তিনি বিশেষত বলেছিলেন যে তিনি তার শিরোনামে <লিঙ্ক> ট্যাগটি ব্যবহার করতে পারবেন না।

— নাথান

'লিঙ্ক' ব্যবহারের জন্য +1, কারণ এটি অন্যান্য বাহ্যিক ফাইলগুলির সমান্তরাল লোডিংকে আটকাবে না। 'আমদানি' অন্যান্য বাহ্যিক ফাইলগুলির সমান্তরাল লোডিংকে ব্লক করবে।

— জহমিক

@ ইম্পোর্ট ব্যবহার করে আপনি এইচটিএমএল মার্কআপের পরিবর্তে সিএসএস স্টাইলিংয়ের ফন্টটিকে তৈরি করতে সক্ষম হবেন যা শব্দার্থকভাবে আরও সঠিক মনে হয় এবং আপনি সিএসএসের মাধ্যমে আপনার সাইটে ফন্টগুলি সরিয়ে নিতে পারবেন। কিন্তু চকের মন্তব্য হিসাবে, মনে হয় আপনি এটির জন্য সামান্য গতি হিট করছেন। সম্ভবত লোড বার ঘড়ি, তারপর সিদ্ধান্ত নিন, কেস কেস দ্বারা কেস। নোট করুন যে এসভিজির জন্য @ ইমপোর্ট একমাত্র উপায় যা আফাইক কাজ করে ।

— মানসিকবাদী

Answer 3

ফন্ট টিটিএফ / অন্যান্য ফর্ম্যাট ফাইলগুলি ডাউনলোড করুন, তারপরে কেবল এই সিএসএস কোড উদাহরণ যুক্ত করুন:

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}

Answer 4

গুগল ওয়েব ফন্টগুলি আমদানি করতে আপনার সিএসএস ফাইলে নীচে কোড যুক্ত করুন।

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

আপনার ফন্ট নামের সাথে ওপেন + সান্স প্যারামিটার মানটি প্রতিস্থাপন করুন ।

আপনার সিএসএস ফাইলটি দেখতে এমন হওয়া উচিত:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}

Answer 5

1. কেবল https://fouts.google.com/ এ যান
2. ক্লিক করে ফন্ট যোগ করুন + +
3. নির্বাচিত ফন্টে> এম্বেড> @ আইএমপোর্ট> কপির url এ যান এবং বডি ট্যাগের উপরে আপনার .css ফাইলটিতে আটকান।
4. হয়ে গেছে।

Answer 6

ট্যাগ @ ইমপোর্ট ব্যবহার করুন

@import url('http://fonts.googleapis.com/css?family=Kavoon');

Answer 7

উপরের উত্তরের পাশাপাশি এই সাইটটিও বিবেচনা করুন; https://google-webfonts-helper.herokuapp.com/fonts

সুবিধা:

• আপনাকে আরও ভাল সাড়া সময়ের জন্য সেই গুগল ফন্টগুলি স্ব-হোস্ট করতে দেয়

• আপনার ফন্ট নির্বাচন করুন

• আপনার চরিত্র সেট চয়ন করুন
• আপনার ফন্ট শৈলী / ওজন চয়ন করুন
• আপনার লক্ষ্য ব্রাউজার চয়ন করুন
• এবং আপনি সিএসএস স্নিপেটগুলি (আপনার সিএসএস স্টাইলশিটে যুক্ত করুন) এবং ফন্ট ফাইলগুলির একটি জিপ আপনার প্রকল্পে অন্তর্ভুক্ত করবেন

যেমন আপনার_পরিচয়

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal;  
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

body { 
    font-family: 'Open Sans',sans-serif;
}

Comments

এটি আপনাকে font-weight: 400প্রথমে লোড করতে এবং তারপরে কোনও যুক্তি ছাড়াই একই কোড ব্যবহার করে বাকী ফন্টটি লোড করতে দেয় । এটি দ্রুত প্রদর্শনের অনুমতি দেয় এবং, যদি আপনি সম্পূর্ণ ফন্ট, ছোট সিএসএস ফাইলের প্রয়োজন শেষ না করেন।

— মোটো

Answer 8

আপনি ইউআরএলগুলিতে লিঙ্ক করতে @ ফন্ট-ফেস ব্যবহার করতে পারেন। http://www.css3.info/preview/web-fonts-with-font-face/

সিএমএস কি আইফ্রেমেস সমর্থন করে? আপনি আপনার সামগ্রীর শীর্ষেও একটি আইফ্রেম নিক্ষেপ করতে সক্ষম হতে পারেন। এটি সম্ভবত ধীর হতে পারে - এটি আপনার সিএসএসে অন্তর্ভুক্ত করা ভাল।

Answer 9

<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

ফন্টটি চয়ন করতে আপনি লিঙ্কটি দেখতে পারেন: https://fouts.google.com

বন্ধনীগুলি বাদ দিয়ে ওয়েবসাইট থেকে আপনার পছন্দের ফন্টের নাম লিখুন।

উদাহরণস্বরূপ আপনি তখন লবস্টারকে আপনার পছন্দের ফন্ট হিসাবে বেছে নিয়েছেন,

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

তারপরে আপনি এটিকে আপনার সম্পূর্ণ এইচটিএমএল / সিএসএস ফাইলে ফন্ট-পরিবার হিসাবে সাধারণত ব্যবহার করতে পারেন।

উদাহরণ স্বরূপ

<h2 style="Lobster">Please Like This Answer</h2>

Answer 10

জুটি লিঙ্কটি দিয়ে

https://developers.google.com/fonts/docs/getting_started

স্টাইলশিট ব্যবহারে এটি আমদানি করতে

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Answer 11

আমরা সহজেই CSS3 এ এটি করতে পারি। আমাদের সহজভাবে @ আমদানি বিবৃতি ব্যবহার করতে হবে। নীচের ভিডিওটিতে কীভাবে এটি করা যায় তা সহজেই বর্ণনা করা হয়। সুতরাং এগিয়ে যান এবং এটি দেখুন।

https://www.youtube.com/watch?v=wlPr6EF6GAo