1つのフォントファイルに異なるフォントウェイトを含めるにはどうすればよいですか？

Question

私は現在Wordpressでウェブサイトを作っています。私が持っている問題は、フォントを使用している。私はここで私の質問に対する答えを見つけることができませんでしたので、私は自分自身に尋ねることにしました。誰かが私にフォントを送って使ってもらうのですが、ファイルを開くとそのフォントのスタイルが違うという問題があります。より明確にするために、フォントはAvenir Nextであり、異なるスタイルはAvenir Next Bold、Avenir Next Medium、Avenir Next Ultra Lightです。

Googleフォントではありません。私は（かなり大胆なので、私はそれを使用したくない）アベニール次を使用することができます。これにより

@font-face { 
    font-family: Avenir Next; 
    src: url('http://localhost/cultuurfonds/wp- 
     content/themes/monstroid/fonts/Avenir-Next.ttf'); 
    font-weight: bold; 
    font-weight: 700; 
} 

@font-face { 
    font-family: Avenir Next Medium; 
    src: url('http://localhost/cultuurfonds/wp- 
     content/themes/monstroid/fonts/Avenir-Next.ttf'); 
    font-weight: normal; 
    font-weight: 400; 
} 

が、アベニール次ミディアム」はdoesnの：私はする@ font-faceでそれを含めることを試みました仕事。

これは有料フォントですが、私はそれを購入した人ではありません。その人はフォントファイル（Avenir-Next.ttf）を私に送るので、これは私が処理しなければならないものです。

私はが好きではなく、にはプラグインを使用してください。私はとにかくそれのための良いプラグインを見つけることができませんでした。しかし、プラグインを使用する以外の方法がない場合、私はそれを使用して喜んでです。

私の質問がはっきりしていることを願います（ここでの最初の質問）。

Answer 1

ローカルファイルからフォントをロードする場合は、最初にhttps://www.web-font-generator.com/のようなツールを使用して、フォントのさまざまなフォーマットを生成する必要があります。

次にあなたがレギュラー（あなたはフォントファミリ名が同じである見ることができますが、フォントの太サイズが異なっているように、この

@font-face { 
    font-family: 'AvenirNextLTPro'; 
    src: url('fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'), 
     url('fonts/AvenirNextLTPro-Regular.otf') format('opentype'), 
     url('fonts/AvenirNextLTPro-Regular.woff') format('woff'), 
     url('fonts/AvenirNextLTPro-Regular.ttf') format('truetype'), 
     url('fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg'); 
    font-weight: 400; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'AvenirNextLTPro'; 
    src: url('fonts/AvenirNextLTPro-Demi.eot?#iefix') format('embedded-opentype'), 
     url('fonts/AvenirNextLTPro-Demi.woff') format('woff'), 
     url('fonts/AvenirNextLTPro-Demi.ttf') format('truetype'), 
     url('fonts/AvenirNextLTPro-Demi.svg#AvenirNextLTPro-Demi') format('svg'); 
    font-weight: 500; 
    font-style: normal; 

}

のようなフォントの全てのフォーマットをロードする必要があります - 400そしてデミ - あなたが別の要素に異なるフォントの太さを使用する場合500）

その後、あなたはこのようにそれを宣言する必要があります。

p { 
    font-family: 'AvenirNextLTPro'; 
    font-weight: 400; 
} 

h1 { 
    font-family: 'AvenirNextLTPro'; 
    font-weight: 500; 
}